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.
Object TitlebarPreview
A titlebar is an optional bar rendered above an object, similar to the frame labels in design tools. Pass a KritzelObjectTitlebarConfig such as the ready-made KRITZEL_DEFAULT_OBJECT_TITLEBAR to the objectTitlebar prop, and choose which objects get a titlebar with the hasTitlebar option of the objectConfig prop, either true or a function that receives an object. Both are required. The titlebar shows the object's name, or a localized type label such as Shape if it has none. Pressing a titlebar selects its object, and dragging it moves the object.
The configuration has left, center, and right sections, each holding an array of title, text, icon, button, menu, spacer, or separator elements. Most element options accept a function of the titlebar context, for example to show the size of an object. Button clicks and menu item selections emit objectTitlebarAction, which you can handle with the onObjectTitlebarAction prop. Set isEditable on a title element to let users rename objects from their titlebar.
Titlebars are styled through the titlebar and titlebarMenu sections of KritzelTheme, and expose parts such as titlebar, titlebar-title, and titlebar-button on <kritzel-engine> for ::part() rules.
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.