Whiteboard SDK
UI Flags
Complete reference for the 54 granular SketchUIConfig boolean flags.
SketchUIConfig Flags
<SketchEditor /> provides 54 granular boolean visibility flags allowing you to hide or show any UI button, menu, dialog, or panel.
Configuration Example
Pass a partial uiConfig object to <SketchEditor />:
<SketchEditor
uiConfig={{
// Hide creation toolbars (read-only presentation)
showToolBar: false,
showPropertiesPanel: false,
// Keep top bar and zoom controls
showTopBar: true,
showZoomControls: true,
// Enable only PNG and PDF exports
showExportMenu: true,
showExportPng: true,
showExportPdf: true,
showExportSvg: false,
showExportJson: false,
}}
/>Top Bar Controls
| Flag | Default | Description |
|---|---|---|
showTopBar | true | Top navigation container |
showExitButton | true | Exit / back arrow button (renders only when onExit or exitHref is supplied) |
showThemeToggle | false | Canvas theme toggle button (light / dark mode) in top bar |
showBoardName | true | Top bar title indicator |
showHistoryControls | true | Undo & Redo buttons |
showZoomControls | true | Zoom percentage & +/- buttons |
showHandTool | true | Hand / Pan tool toggle |
showGridSelector | false | Grid pattern dropdown in top bar |
showFramesOutline | true | Toggle frame container outlines (auto-hidden when no frames exist) |
showPresentation | true | Fullscreen presentation mode button (auto-hidden when no frames exist) |
showExportMenu | true | Export trigger button |
Creation Toolbar & Overlays
| Flag | Default | Description |
|---|---|---|
showToolBar | true | Floating shape creation toolbar |
showTechStencils | true | AWS, Docker, K8s, React stencil modal |
showTemplates | true | Starter diagram template picker |
showPropertiesPanel | true | Left styling sidebar (colors, strokes, fonts) |
showMinimap | true | Radar overview minimap |
showShortcutsButton | true | Keyboard shortcuts cheat-sheet modal |
showGuideButton | true | Help guide pill linking to documentation (configured via guideHref or onOpenGuide) |
showContextMenu | true | Right-click canvas context menu |
Customizing or Hiding the Guide Button
The bottom-left Guide button can be routed to your own documentation, handled with a custom in-app modal, or opted out completely:
// 1. Point to your internal documentation
<SketchEditor guideHref="/docs/getting-started" />
// 2. Or trigger a custom in-app help modal / drawer
<SketchEditor onOpenGuide={() => setHelpModalOpen(true)} />
// 3. Or completely hide the guide button
<SketchEditor uiConfig={{ showGuideButton: false }} />