Typograph — Page Action Events

This document describes the custom DOM events fired by the Typograph canvas engine when the user performs page-level actions. It is intended for developers who embed the Typograph editor and need to react to changes in the page structure (e.g. to sync a thumbnail strip, update a save state, or push changes to a backend).

---

How to listen

All page events are dispatched on document as standard CustomEvent objects. The event payload is available on event.detail.

document.addEventListener('typograph_page_added', (event) => {
    const { page_index, page_name } = event.detail;
    console.log(`Page "${page_name}" added at index ${page_index}`);
});
Copy

---

Throttling

Page events pass through the same throttle as all other Typograph custom events. The default limit is 5 events per event-type per second. Because page actions are user-initiated and infrequent this limit is never reached in practice.

If your application needs a higher or lower rate you can adjust it after the editor is ready:

document.addEventListener('typograph_editor_ready', () => {
    typograph.set_custom_event_throttle(10); // max 10 per type per second
});
Copy

---

Events

typograph_page_added

Fired after a new blank page has been appended to the document.

Property	Type	Description
page_index	number	Zero-based index of the newly added page
page_name	string	Name given to the new page

document.addEventListener('typograph_page_added', (e) => {
    const { page_index, page_name } = e.detail;
});
Copy

---

typograph_page_duplicated

Fired after a page has been duplicated. The new page is always appended at the end of the document.

Property	Type	Description
source_index	number	Zero-based index of the page that was copied
page_index	number	Zero-based index of the resulting duplicate
page_name	string	Name of the duplicate page

document.addEventListener('typograph_page_duplicated', (e) => {
    const { source_index, page_index, page_name } = e.detail;
});
Copy

---

typograph_page_deleted

Fired after a page has been removed from the document.

Note — page_index is the index the page held before it was deleted. After deletion, all pages at higher indexes shift down by one.

Property	Type	Description
page_index	number	Zero-based index of the deleted page (pre-deletion)
page_name	string	Name of the deleted page

document.addEventListener('typograph_page_deleted', (e) => {
    const { page_index, page_name } = e.detail;
});
Copy

---

typograph_page_rearranged

Fired after the user drags a page thumbnail to a new position in the page bar.

Property	Type	Description
from_index	number	Zero-based index of the page before the move
to_index	number	Zero-based index of the page after the move

document.addEventListener('typograph_page_rearranged', (e) => {
    const { from_index, to_index } = e.detail;
});
Copy

---

typograph_page_scaled

Fired after a page and all its elements have been scaled. Both dimensions are scaled independently, so non-uniform scaling is possible.

Property	Type	Description
page_index	number	Zero-based index of the scaled page
scale_x	number	Horizontal scale factor (e.g. 2.0 = doubled in width)
scale_y	number	Vertical scale factor

document.addEventListener('typograph_page_scaled', (e) => {
    const { page_index, scale_x, scale_y } = e.detail;
});
Copy

---

typograph_spread_split

Fired after a spread page has been split into two independent single pages. The spread is replaced by the two pages at the same position in the document; subsequent pages shift up by one index.

Property	Type	Description
spread_index	number	Zero-based index the spread occupied before the split
page_name	string	Name of the spread page that was split

document.addEventListener('typograph_spread_split', (e) => {
    const { spread_index, page_name } = e.detail;
});
Copy

---

typograph_pages_merged

Fired after two adjacent single pages have been merged into a horizontal spread. The right page is removed from the document; the left page becomes the spread and retains its index. Pages that were after the right page shift down by one.

Property	Type	Description
left_index	number	Zero-based index of the left (surviving) page before the merge
right_index	number	Zero-based index of the right page before it was merged in

document.addEventListener('typograph_pages_merged', (e) => {
    const { left_index, right_index } = e.detail;
});
Copy

---

Quick-reference table

Event	Trigger	Key detail properties
typograph_page_added	New blank page appended	page_index, page_name
typograph_page_duplicated	Active page duplicated	source_index, page_index, page_name
typograph_page_deleted	Page removed	page_index, page_name
typograph_page_rearranged	Page dragged to new position	from_index, to_index
typograph_page_scaled	Page and elements scaled	page_index, scale_x, scale_y
typograph_spread_split	Spread split into two pages	spread_index, page_name
typograph_pages_merged	Two pages merged into a spread	left_index, right_index