Keyboard Shortcuts

Complete reference for canvas editor shortcuts. Works in both VS Code extension and the web playground.

ℹ️ Platform note — ⌘ on macOS = Ctrl on Windows/Linux. Shortcuts work when the canvas is focused (not the code editor).

Tools

Press once to activate. Press twice (VV) to lock the tool (it stays active after drawing).

Key	Tool	Description
`V`	Select	Click, drag, marquee select, move, resize
`R`	Rectangle	Draw rects. +Shift = square
`O`	Ellipse	Draw ovals. +Shift = circle
`T`	Text	Click to place text, then type
`A`	Arrow	Draw connectors between nodes
`P`	Pen	Click/drag for free-form paths
`E`	Eraser	Click/swipe to erase nodes
`F`	Frame	Draw a container frame

Shortcut	Action
`⌘Z`	Undo
`⌘⇧Z`	Redo
`⌘C`	Copy selected node(s) as .fd text
`⌘V`	Paste .fd text onto canvas
`⌘X`	Cut (copy + delete)
`⌘D`	Duplicate selected node(s)
`⌫` / `Delete`	Delete selected nodes or edges
`⌘A`	Select all
`Esc`	Deselect / cancel drag / exit Zen

Shortcut	Action
`↑↓←→`	Nudge 1px
`⇧` + `Arrow`	Nudge 10px
`Shift` + drag	Constrain to horizontal or vertical axis
`Shift` + draw Rect	Constrain to square
`Shift` + draw Ellipse	Constrain to circle
`Alt` + draw	Draw from center outward
`Alt` + drag node	Duplicate and drag the clone

Holding a modifier key shows a cursor preview to indicate the available action:

Shortcut	Action
`⌥⌘C`	Copy style from selected node
`⌥⌘V`	Paste style onto selected node

The scroll-themed floating toolbar supports drag interactions:

Drag handle — grab the ornamental handles to reposition the toolbar
Drag tool button to canvas — starts a "drag-to-create" gesture with ghost preview
Hold ⌥ while dragging — snap to existing nodes and auto-create edges
Double-click handle — snap toolbar to nearest edge

Zen mode hides all UI chrome for a distraction-free canvas. Toggle with the 🧘 button or Esc to exit.