Whiteboard SDK
Shortcuts
Comprehensive keyboard shortcuts and hotkeys reference for the Whiteboard SDK.
Keyboard Shortcuts
<SketchEditor /> provides an extensive set of single-key, combination, and modifier shortcuts for rapid drawing, node arrangement, canvas navigation, and presentation delivery.
Inside <SketchEditor />, you can press ? (or Shift + /) at any time to open the built-in interactive shortcuts cheat-sheet overlay.
1. Tool Selection
Select any drawing, shape, connector, or utility tool instantly with a single keystroke:
| Key | Tool | Description |
|---|---|---|
| V or 1 | Select | Select, drag, resize, rotate, and multi-select elements |
| H or Space or 2 | Hand / Pan | Drag to pan canvas smoothly in any direction |
| R or 3 | Rectangle | Draw solid or rounded bounding rectangles |
| D or 5 | Diamond | Draw decision gateways and validation checks |
| O or 4 | Ellipse | Draw circular processes, start/end nodes, and tokens |
| C | Cylinder | Draw 3D databases, storage nodes, and data warehouses |
| U | Cloud | Draw cloud infrastructure, edge networks, and perimeters |
| Y | Triangle | Draw yield nodes, warnings, and triage indicators |
| B | Capsule / Stadium | Draw horizontal rounded API endpoints and microservices |
| G | Parallelogram | Draw data I/O inputs, streams, and operational states |
| Z | Trapezoid | Draw manual operations and input transformations |
| X | Hexagon | Draw microservices, internal preparation, and adapters |
| J | Star | Draw key milestones, featured services, and highlights |
| A or 6 | Arrow | Smart magnetic connector with auto-binding anchor points |
| L or 7 | Line | Draw straight or segmented structural dividers |
| P or 8 | Pen | Smooth freehand sketch brush with pressure smoothing |
| T or 9 | Text | Place standalone typography anywhere on the canvas |
| S or 0 | Sticky Note | Collaborative post-it note with auto-contrast typography |
| F | Frame | Artboard container for grouping screens and slides |
| N | Table | Grid matrix with auto-resizing rows and columns |
| I | Image | Ingest external images directly from your filesystem |
| K | Laser Pointer | Ephemeral high-visibility laser trail for live presentations |
| E | Eraser | Click or sweep across elements to delete them |
| Q | Lock Tool | Keep active creation tool enabled after drawing |
2. Selection & Arrangement
| Shortcut | Action | Description |
|---|---|---|
| Ctrl + A | Select All | Select all visible canvas elements |
| Ctrl + G | Group | Group selected elements into a single movable unit |
| Ctrl + Shift + G | Ungroup | Disband selected group into independent elements |
| Ctrl + D | Duplicate | Clone selection with a slight visual offset |
| Del or Backspace | Delete | Remove selected elements |
| Esc | Deselect | Clear active selection or exit editing mode |
| ↑ ↓ ← → | Nudge | Shift selection by 1px (Shift + Arrow = 10px) |
| Ctrl + Arrow Keys | Quick Branch | Spawn a connected adjacent shape with an arrow |
| Double Click | Edit Text | Open inline text editor for shapes, tables, or frames |
3. Canvas & Viewport Navigation
| Shortcut | Action | Description |
|---|---|---|
| Ctrl + Wheel | Zoom In / Out | Smooth pointer-centered canvas zooming |
| Space + Drag | Pan View | Move camera viewport without changing selected tool |
| Shift + 1 | Zoom to Fit | Auto-fit entire diagram to fill the active viewport |
| Shift + 0 | Reset Zoom | Reset zoom scale back to 100% |
| Ctrl + Z | Undo | Step backward through the undo history stack |
| Ctrl + Y or Ctrl+Shift+Z | Redo | Step forward through the redo history stack |
| Ctrl + S | Save | Trigger explicit save handler (onSave prop) |
| Ctrl + Shift + C | Copy as PNG | Snapshot canvas selection to system clipboard |
4. Presentation & Panels
| Shortcut | Action | Description |
|---|---|---|
| Alt + P | Presentation Mode | Enter full-screen slide deck view using defined Frames |
| ← / → | Slide Navigation | Step between slides while in Presentation Mode |
| L | Laser Pointer | Toggle live laser spotlight while presenting |
| G | Slide Overview | Toggle visual thumbnail grid of all slides |
| Alt + S | Spotlight Focus | Dim canvas backdrop to spotlight selected nodes |
| Alt + I | Cloud Stencils | Open Developer & Cloud Stencils library (AWS, GCP, K8s) |
| Alt + T | Templates Drawer | Browse pre-built architecture starter diagrams |
| Alt + F | Frames Outline | Toggle side drawer listing all canvas frame artboards |
5. Color Palette & Shades
When an element is selected:
| Key | Action |
|---|---|
| Q to B | Pick quick color swatch from the active palette |
| 1 to 5 | Cycle tone and shade levels (light pastel to deep vivid) |