> ## Documentation Index
> Fetch the complete documentation index at: https://opencanvas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  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.
</Info>

## 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.

<Note>
  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.
</Note>

## 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

<Tip>
  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.
</Tip>

<Warning>
  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.
</Warning>