Events

Subscribe to editor events using addEventListener and removeEventListener on the editor instance. In framework wrappers, use the corresponding props/emits instead.

Usage

const editor = await createEditor('container', config);

function handleChange(design: DesignJson) {
  console.log('Design changed', design);
}

editor.addEventListener('change', handleChange);

// cleanup
editor.removeEventListener('change', handleChange);

Lifecycle Events

Event	Payload	Description
ready	—	Editor is fully initialized and interactive.
load	DesignJson	A design was loaded via loadDesign() or the design prop.
destroy	—	The editor instance is being destroyed.
error	EditorError	An internal editor error occurred.

Design Events

Event	Payload	Description
change	DesignJson	The design was modified (any content or structure change).
designUpdate	DesignJson	Alias for change — fires on every design mutation.
bodyValuesChange	BodyValues	Body-level values changed (background, width, etc.).
rowAdd	{ rowId: string; index: number }	A row was added to the design.
rowRemove	{ rowId: string }	A row was removed from the design.
rowMove	{ rowId: string; fromIndex: number; toIndex: number }	A row was reordered.
rowDuplicate	{ sourceRowId: string; newRowId: string }	A row was duplicated.

Selection Events

Event	Payload	Description
select	{ elementId: string; elementType: string }	A content element was selected.
deselect	—	Selection was cleared.
rowSelect	{ rowId: string }	A row was selected.
columnSelect	{ columnId: string; rowId: string }	A column was selected.

Content Events

Event	Payload	Description
contentAdd	{ elementId: string; elementType: string; columnId: string }	A content block was added.
contentRemove	{ elementId: string; elementType: string }	A content block was removed.
contentUpdate	{ elementId: string; values: Record<string, any> }	A content block's values were updated.
contentMove	{ elementId: string; fromColumnId: string; toColumnId: string }	A content block was moved between columns.
contentDuplicate	{ sourceId: string; newId: string }	A content block was duplicated.

Preview Events

Event	Payload	Description
previewOpen	—	The preview modal was opened.
previewClose	—	The preview modal was closed.
viewModeChange	{ mode: ViewMode }	The view mode changed (desktop/tablet/mobile).

Image Events

Event	Payload	Description
imageUpload	{ elementId: string; url: string; file?: File }	An image was uploaded or inserted.
imageRemove	{ elementId: string }	An image was removed from a block.
imageEdit	{ elementId: string; url: string }	An image was edited (crop, filter, etc.).

Export Events

Event	Payload	Description
exportStart	{ format: 'html' | 'image' | 'pdf' }	An export operation started.
exportComplete	{ format: 'html' | 'image' | 'pdf'; data: ExportHtmlData | ExportImageData | ExportPdfData }	An export operation completed.
exportError	{ format: string; error: EditorError }	An export operation failed.

Save Events

Event	Payload	Description
save	DesignJson	The user triggered a save action (Ctrl+S / Cmd+S).
autoSave	DesignJson	Auto-save was triggered (if configured).
moduleSave	ModuleSaveData	A module (reusable block) was saved.

Template Events

Event	Payload	Description
templateSelect	{ templateId: string; design: DesignJson }	A template was selected from the template picker.
templateApply	{ templateId: string }	A template was applied to the design.

Display Condition Events

Event	Payload	Description
displayConditionSet	{ rowId: string; condition: DisplayCondition }	A display condition was set on a row.
displayConditionRemove	{ rowId: string }	A display condition was removed from a row.

info

All event handlers receive a single argument with the payload. Events with — as payload fire with no arguments.

tip

In React, use the onReady, onChange, etc. props instead of addEventListener. In Vue, use @ready, @change. In Angular, use (ready), (change).