DesignJS Keyboard Shortcuts

Complete keyboard shortcut reference for DesignJS — saving, canvas navigation, zoom, GrapesJS editing commands, and the Insert Rail tool keys.

DesignJS keyboard shortcuts fall into three groups: application-level shortcuts handled by the React shell, canvas navigation shortcuts, and GrapesJS editing shortcuts that follow the conventions you may already know from other design tools. The sections below cover all of them.

Shortcuts that require focus inside the canvas iframe (select, delete, undo/redo) follow GrapesJS conventions. They are active when the canvas area is focused. Shell-level shortcuts like Cmd+S are active anywhere in the application window.

Saving

Shortcut	Action
Cmd+S / Ctrl+S	Save the current project to .designjs.json immediately

Pressing Cmd+S triggers a manual save regardless of which panel has focus. The topbar save-status indicator updates to show Saving… and then Saved (or Save error if the write fails).

Autosave runs every 30 seconds in the background. It only writes to disk when the project has changed since the last save, so unchanged canvases incur no disk I/O. You do not need to configure autosave — it is always on.

Both the manual save and autosave write to the same .designjs.json file in your project root. The file is human-readable JSON and safe to commit to git — each save produces a clean diff of only the changed components.

Canvas zoom and fit

These shortcuts work in the ZoomControl and canvas area.

Shortcut	Action
Cmd+0	Reset zoom to 100%
Click − button	Zoom out 10%
Click + button	Zoom in 10%
Click zoom % → Zoom to fit	Fit all artboards in the viewport

Zoom is clamped between 10% and 400%.

Insert Rail tools

The Insert Rail floats in the top-left corner of the canvas. Press the shortcut key to activate the corresponding tool.

Key	Tool	What it inserts
V	Select	(reserved — default selection mode)
F	Frame	New 1440×900 Desktop artboard
T	Text	A <p> paragraph element
I	Image	An <img> element
B	Button	A styled <button> with Tailwind classes

GrapesJS canvas shortcuts

These shortcuts are active when the canvas iframe is focused (i.e., after you click inside the canvas area). They follow standard GrapesJS conventions.

Selection and editing

Shortcut	Action
Click	Select a component
Escape	Deselect / exit edit mode
Delete / Backspace	Delete the selected component
Enter	Enter text-edit mode on a text component

Undo and redo

Shortcut	Action
Cmd+Z / Ctrl+Z	Undo the last action
Cmd+Shift+Z / Ctrl+Shift+Z	Redo
Cmd+Y / Ctrl+Y	Redo (alternate)

GrapesJS maintains a full undo/redo history for the current session. History is reset when you reload the page; it is not persisted to .designjs.json.

Copy and paste

Shortcut	Action
Cmd+C / Ctrl+C	Copy selected component
Cmd+X / Ctrl+X	Cut selected component
Cmd+V / Ctrl+V	Paste component

Moving components

Shortcut	Action
Arrow keys	Nudge selected component 1px in the given direction
Shift+Arrow keys	Nudge selected component 10px in the given direction

Artboard rename

Shortcut	Context	Action
Double-click name	Artboards panel	Enter rename mode
Enter	Rename input focused	Confirm rename
Escape	Rename input focused	Cancel rename

Tips

If a keyboard shortcut is not responding, click somewhere inside the canvas iframe to give it focus first. Browser security prevents keydown events from firing in an iframe that has not received a pointer event.

The Delete key deletes the selected component without a confirmation prompt. Use Cmd+Z immediately to undo an accidental deletion. Undo history is session-only — if you reload after an accidental delete and before a save, the deletion will be permanent if it was already autosaved.