Skip to main content

Controls

Overview​

The <KritzelEditor> includes a complete set of whiteboard controls, including toolbars, utility panels, context menus, and settings dialogs. You can selectively hide them or adjust them to fit your application's behavior.

Toolbar and Utility Panel​

The toolbar provides the configured drawing and selection tools, while the utility panel exposes undo, redo, and delete actions. Set isToolbarVisible or isUtilityPanelVisible to false independently to replace either control surface without changing the editor's core functionality.

Workspace Manager​

The workspace manager in the top-left corner lets people switch between workspaces and create, rename, or delete them. Set isWorkspaceManagerVisible to false to hide it. Use a typed editor ref and await openWorkspaceManagerMenu() to programmatically open the workspace manager's menu after onIsReady fires.

Context Menu​

The Editor separates right-click actions into two arrays: globalContextMenuItems for empty-canvas interactions and objectContextMenuItems for selected-object interactions. Each item accepts a label, an icon, and an action handler. Keep these array props stable with useMemo or module-level constants.

Items can also call clipboard methods such as copy, paste, and delete, wiring the menu to the same actions available from keyboard shortcuts.

Use group to cluster related entries with a separator, and children to nest a submenu of arbitrary depth for actions that do not need a top-level entry.

The optional isVisible and isDisabled conditions accept booleans or async functions, so entries can react to editor state, such as disabling "Select All" when the viewport is empty.

More Menu​

The more menu in the top-right corner groups secondary editor actions. Set isMoreMenuVisible to false to hide it. Await openMoreMenu() to programmatically open it. Pass a stable array of menu items to the moreMenuItems prop to configure the actions shown in the menu.

Export Dialog​

The export dialog allows users to save the current viewport as an image or export the current workspace as JSON. You can open it from the default more menu or await openExportDialog() on the editor ref after the editor is ready.

Import Dialog​

The import dialog allows users to load a workspace stored as JSON. You can open it from the default more menu or await openImportDialog() on the editor ref.

Zoom Panel​

The zoom panel shows the current zoom level and provides zoom-in and zoom-out buttons. Set isZoomPanelVisible to false to hide it. On small screens, the zoom panel is automatically hidden to save space.

Notifications​

Call triggerNotification() to display a transient message in the editor. Notifications have info, warning, and error types, allowing your application to provide feedback without building a separate notification surface.

API Details​

For the full list of related APIs, see the following reference sections.