Editor

The <KritzelEditor> is the high-level, full-featured whiteboard component. It wraps <KritzelEngine> and adds a toolbar, utility panel, context menus, dialogs, and workspace management.

General

Props

Property	Type	Description
isLoading	boolean	Whether the editor is currently loading.
assetStorageConfig	KritzelAssetStorageConfig	Asset storage provider configuration.
debugInfo	KritzelDebugInfo	Debug overlay configuration.
editorId	string	Identifier for namespacing storage keys.
licenseKey	string	Valid key removes the watermark.
lockDrawingScale	boolean	Keeps drawn objects at a fixed visual size across zoom.

Events

Event	Payload Type	Description
isReady	EditorIsReadyEvent	Emitted when the editor is initialized and ready.

Methods

beginSceneBootstrap

beginSceneBootstrap(): Promise<void>

endSceneBootstrap

endSceneBootstrap(): Promise<void>

---

UI Elements

Props

Property	Type	Description
cursorTarget	HTMLElement	Element used as the cursor target.
customSvgIcons	string	Custom SVG icon definitions.
globalContextMenuItems	ContextMenuItem[]	Canvas background menu items.
isMoreMenuVisible	boolean	Controls More menu visibility.
isToolbarVisible	boolean	Controls toolbar visibility.
isUtilityPanelVisible	boolean	Controls utility panel visibility.
isWorkspaceManagerVisible	boolean	Controls workspace manager visibility.
isZoomPanelVisible	boolean	Controls zoom panel visibility.
moreMenuItems	IKritzelMenuItem[]	Custom More menu entries.
objectContextMenuItems	ContextMenuItem[]	Selected-object menu items.

Events

No UI-specific events.

Methods

openContextMenu

openContextMenu(options: { x: number; y: number; objectId?: string }): Promise<void>

openWorkspaceManagerMenu

openWorkspaceManagerMenu(): Promise<void>

openMoreMenu

openMoreMenu(): Promise<void>

hideContextMenu

hideContextMenu(): Promise<void>

getDisplayableShortcuts

getDisplayableShortcuts(): Promise<Omit<KritzelShortcut, "action" | "condition">[]>

triggerNotification

triggerNotification(notification: Omit<KritzelNotification, "id"> & Partial<Pick<KritzelNotification, "id" | "timestamp">>): Promise<void>

---

Object

Props

No object-specific props.

Events

Event	Payload Type	Description
objectsAdded	ObjectsAddedEvent	Emitted when objects are added.
objectsChange	KritzelBaseObject[]	Emitted when objects change.
objectsRemoved	ObjectsRemovedEvent	Emitted when objects are removed.
objectsUpdated	ObjectsUpdatedEvent	Emitted when objects are updated.

Methods

addObject

Adds a new object to the canvas. The object is automatically assigned an ID, core reference, and z-index.

addObject<T extends KritzelBaseObject>(object: T): Promise<T | null>

addObjects

addObjects<T extends KritzelBaseObject>(objects: T[]): Promise<T[]>

removeObject

Removes an object from the canvas.

removeObject<T extends KritzelBaseObject>(object: T): Promise<T | null>

removeObjects

removeObjects<T extends KritzelBaseObject>(objects: T[]): Promise<T[]>

updateObject

Updates properties of an existing canvas object.

updateObject<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>): Promise<T | null>

getObjectById

Retrieves a canvas object by its unique ID.

getObjectById<T extends KritzelBaseObject>(id: string): Promise<T | null>

getAllObjects

Returns all objects on the canvas across all layers.

getAllObjects<T extends KritzelBaseObject>(): Promise<T[]>

findObjects

Returns all objects matching the given predicate. Excludes internal selection-related objects.

findObjects<T extends KritzelBaseObject>(predicate: (obj: KritzelBaseObject) => boolean): Promise<T[]>

getObjectsTotalCount

Returns the total number of objects on the canvas.

getObjectsTotalCount(): Promise<number>

getObjectsInViewport

Returns all objects currently visible within the viewport bounds.

getObjectsInViewport(): Promise<KritzelBaseObject[]>

---

Selection

Props

No selection-specific props.

Events

No selection-specific events.

Methods

getSelectedObjects

Returns the currently selected objects. Returns an empty array if nothing is selected.

getSelectedObjects(): Promise<KritzelBaseObject[]>

selectObjects

Programmatically selects the given objects. Switches to the selection tool automatically.

selectObjects(objects: KritzelBaseObject[]): Promise<void>

selectAllObjectsInViewport

Selects all objects currently visible in the viewport. Switches to the selection tool automatically.

selectAllObjectsInViewport(): Promise<void>

clearSelection

Deselects all currently selected objects.

clearSelection(): Promise<void>

triggerSelectionChange

Manually triggers the objectsSelectionChange event.

triggerSelectionChange(): Promise<void>

---

Viewport & Navigation

Props

Property	Type	Description
isPanningEnabled	boolean	Enables regular-wheel panning.
isZoomingEnabled	boolean	Enables Ctrl+wheel zooming.
scaleMax	number	Maximum zoom scale.
scaleMin	number	Minimum zoom scale.
viewportBoundaryBottom	number	Bottom pan boundary.
viewportBoundaryLeft	number	Left pan boundary.
viewportBoundaryRight	number	Right pan boundary.
viewportBoundaryTop	number	Top pan boundary.

Events

Event	Payload Type	Description
viewportChange	KritzelViewportState	Emitted on viewport pan, zoom, or resize.

Methods

getViewport

Returns the current viewport state including position, scale, and dimensions.

getViewport(): Promise<KritzelViewportState>

setViewport

Sets the viewport to center on the given world coordinates at the specified scale.

setViewport(x: number, y: number, scale: number): Promise<void>

panTo

Pans the viewport to center on the given world coordinates without changing the scale.

panTo(x: number, y: number): Promise<void>

panToObject

panToObject(object: KritzelBaseObject): Promise<void>

zoomTo

Zooms the viewport to the given scale. Optionally centers on a world point; if omitted, zooms around the viewport center.

zoomTo(scale: number, worldX?: number, worldY?: number): Promise<void>

zoomIn

zoomIn(factor?: number, duration?: number): Promise<void>

zoomOut

zoomOut(factor?: number, duration?: number): Promise<void>

centerObjectInViewport

Moves the given object to the center of the viewport. Use panToObject or centerObjects to move the camera instead.

centerObjectInViewport(object: KritzelBaseObject): Promise<KritzelBaseObject<HTMLElement | SVGElement>>

centerObjects

centerObjects(objects: KritzelBaseObject[], animate?: boolean): Promise<boolean>

centerAllObjects

centerAllObjects(animate?: boolean): Promise<boolean>

backToContent

Pans and zooms the viewport to fit the nearest content, with padding. Useful when the user has panned away from all objects.

backToContent(): Promise<boolean>

screenToWorld

Converts screen-relative pixel coordinates to world coordinates.

screenToWorld(x: number, y: number): Promise<{ x: number; y: number }>

worldToScreen

Converts world coordinates to screen-relative pixel coordinates.

worldToScreen(x: number, y: number): Promise<{ x: number; y: number }>

---

Workspace

Props

Property	Type	Description
activeWorkspaceId	string	Optional workspace ID to activate.
workspaces	KritzelWorkspace[]	Optional authoritative workspace catalog.

Events

Event	Payload Type	Description
activeWorkspaceChange	ActiveWorkspaceChangeEvent	Emitted when the active workspace changes.
isPublicChange	IKritzelIsPublicChangeEvent	Emitted when public sharing status changes.

Methods

setActiveWorkspace

Switches the active workspace shown in the editor by ID.

setActiveWorkspace(id: string): Promise<void>

createWorkspace

Creates a new workspace and emits a workspacesChange event. Accepts a KritzelWorkspace instance.

createWorkspace(workspace: KritzelWorkspace): Promise<KritzelWorkspace | null>

updateWorkspace

Applies a workspace as declared and emits a workspacesChange event. Metadata and viewport are always applied. When workspace.objects is set it is treated as the complete desired object set: objects are matched by ID, unknown IDs are added, known IDs are updated, and objects missing from the list are removed. Leave objects undefined to keep the current objects, or pass [] to remove them all. Updating the objects of a workspace that is not currently active requires a configured sync provider.

updateWorkspace(workspace: KritzelWorkspace): Promise<void>

deleteWorkspace

Deletes a workspace and emits a workspacesChange event.

deleteWorkspace(workspace: KritzelWorkspace): Promise<void>

getWorkspaces

Returns all available workspaces.

getWorkspaces(): Promise<KritzelWorkspace[]>

getActiveWorkspace

Returns the currently active workspace.

getActiveWorkspace(): Promise<KritzelWorkspace>

loadSharedWorkspace

loadSharedWorkspace(token: string): Promise<void>

---

Tool Management

Props

Property	Type	Description
toolbarItems	KritzelToolbarItem[]	Toolbar items and tool configuration.

Events

No tool-management-specific events.

Methods

registerTool

Registers a new drawing tool with the engine.

registerTool(
  toolName: string,
  toolClass: any,
  toolConfig?: KritzelBrushToolConfig | KritzelLineToolConfig | KritzelTextToolConfig | KritzelShapeToolConfig
): Promise<KritzelBaseTool | null>

setActiveTool

Switches the active drawing tool. Deactivates the current tool and clears any selection.

setActiveTool(toolName: string): Promise<void>

disable

Disables all user interaction with the engine (pointer, keyboard, etc.).

disable(): Promise<void>

enable

Re-enables user interaction after a call to disable.

enable(): Promise<void>

---

Clipboard & Editing

Props

No clipboard/editing-specific props.

Events

No clipboard/editing-specific events.

Methods

copy

Copies the currently selected objects to the internal clipboard.

copy(): Promise<void>

cut

cut(): Promise<void>

paste

Pastes previously copied objects at the specified world coordinates.

paste(x: number, y: number): Promise<void>

delete

Deletes the currently selected objects from the canvas.

delete(): Promise<void>

---

Ordering

Props

No ordering-specific props.

Events

No ordering-specific events.

Methods

bringForward

Moves an object one layer forward in the z-order. If omitted, applies to the current selection.

bringForward(object?: KritzelBaseObject): Promise<void>

sendBackward

Moves an object one layer backward in the z-order. If omitted, applies to the current selection.

sendBackward(object?: KritzelBaseObject): Promise<void>

bringToFront

Moves an object to the very front of the z-order. If omitted, applies to the current selection.

bringToFront(object?: KritzelBaseObject): Promise<void>

sendToBack

Moves an object to the very back of the z-order. If omitted, applies to the current selection.

sendToBack(object?: KritzelBaseObject): Promise<void>

---

Alignment

Props

No alignment-specific props.

Events

No alignment-specific events.

Methods

alignObjects

Aligns the currently selected objects according to the specified alignment.

alignObjects(alignment: KritzelAlignment): Promise<void>

Alignment values: StartHorizontal, CenterHorizontal, EndHorizontal, StartVertical, CenterVertical, EndVertical.

---

Grouping

Props

No grouping-specific props.

Events

No grouping-specific events.

Methods

group

Groups the currently selected objects into a single group.

group(): Promise<void>

ungroup

Ungroups the currently selected group back into individual objects.

ungroup(): Promise<void>

---

Undo & Redo

Props

No undo/redo-specific props.

Events

Event	Payload Type	Description
undoStateChange	KritzelUndoState	Emitted when undo/redo availability changes.

Methods

undo

Undoes the last action.

undo(): Promise<void>

redo

Redoes the last undone action.

redo(): Promise<void>

---

Export & Import

Props

No export/import-specific props.

Events

No export/import-specific events.

Methods

getScreenshot

Captures a screenshot of the current viewport as a data URL.

getScreenshot(format?: "png" | "svg"): Promise<string | null>

exportViewportAsPng

Exports the current viewport as a PNG file and triggers a browser download.

exportViewportAsPng(): Promise<void>

exportViewportAsSvg

Exports the current viewport as an SVG file and triggers a browser download.

exportViewportAsSvg(): Promise<void>

canExportSelectedObjectAs

canExportSelectedObjectAs(format: KritzelObjectExportFormat): Promise<boolean>

exportSelectedObject

exportSelectedObject(format: KritzelObjectExportFormat): Promise<void>

getSelectedObjectSupportedExportFormats

getSelectedObjectSupportedExportFormats(): Promise<KritzelObjectExportFormat[]>

exportAsJson

exportAsJson(): Promise<string>

importFromJson

importFromJson(json: string): Promise<void>

downloadAsJson

Downloads the canvas state as a JSON file. Use the optional filename directly.

downloadAsJson(filename?: string): Promise<void>

importFromFile

Triggers a local file selector, parsing the user's selected file to import objects.

importFromFile(): Promise<void>

loadObjectsFromJson

Hydrates the canvas with a serialized JSON string containing objects.

loadObjectsFromJson(json: string): Promise<number>

---

Theming

Props

Property	Type	Description
customFonts	KritzelFontMap	Fonts available to rendering and text tools.
theme	ThemeCode	Current theme.
themes	KritzelTheme[]	Available theme definitions.

Events

Event	Payload Type	Description
themeChange	ThemeCode	Emitted when the active theme changes.

Methods

registerFonts

registerFonts(fonts: KritzelFontMap): Promise<void>

---

Localization

Props

Property	Type	Description
fallbackLocale	LocaleCode	Locale used for missing terms.
locale	LocaleCode	Current locale.
locales	KritzelLocale[]	Available locale definitions.

Events

Event	Payload Type	Description
localeChange	LocaleCode	Emitted when the active locale changes.

Methods

registerLocales

registerLocales(locales: KritzelLocale[]): Promise<void>

getAvailableLocales

getAvailableLocales(): Promise<LocaleCode[]>

getLocale

getLocale(): Promise<LocaleCode>

setLocale

setLocale(code: LocaleCode): Promise<void>

t

t(key: KritzelTermKey, vars?: KritzelTermVars): Promise<string>

---

User Management

Props

Property	Type	Description
user	IKritzelUser	Current authenticated user.
loginConfig	KritzelLoginConfig	Login provider configuration.

Events

Event	Payload Type	Description
login	LoginEvent	Emitted when login is triggered.
logout	void	Emitted when logout is triggered.

Methods

openLoginDialog

openLoginDialog(): Promise<void>

setLoginLoading

setLoginLoading(provider: string | null): Promise<void>

---

Collaboration

Props

Property	Type	Description
activeUsers	IKritzelUser[]	Other users in the session.
syncConfig	KritzelSyncConfig	Collaboration provider configuration.

Events

Event	Payload Type	Description
awarenessChange	AwarenessStateMap	Emitted when awareness state changes.

Methods

reinitSync

reinitSync(): Promise<void>