---
title: "canvas basics"
description: "What is on the canvas, what each thing you do there does to the files, and every shortcut."
url: https://ignaru.com/docs/canvas
---

# canvas basics

## nodes and files

everything on the canvas is a node: a frame you draw, a page an agent makes, an image, a terminal. each one is .ignaru/nodes/<id>/ with node.json and index.html. where nodes sit, their links and pages live in .ignaru/canvas.json.

| you do | what happens |
| --- | --- |
| double-click a node | you enter it and select the elements inside; the inspector edits their styles |
| pin a comment | it is saved to comments.json and becomes a turn for the agent, which marks it working, edits, then resolves it |
| draw on a node (D) | each stroke goes into annotations.svg with its box and the elements under it, so "make this bigger" has a target |
| play (Shift-P) | the page goes live in place: clicks, hovers, animation and scroll. Esc stops |
| delete a node | soft: the folder moves to .ignaru/.trash and Cmd-Z brings it back |
| versions | a node's inspector lists the git commits that changed its page; click one to see it, restore to bring it back |
| export | copy a node as png, react or a prompt, or save it as png, svg or a react file |
| deploy | a preview link through your own vercel or cloudflare login; production asks once more |

## shortcuts

press ? in the app for the full sheet. it reads the same table as the keys, so it is always right.

| keys | does |
| --- | --- |
| Cmd-C, Cmd-X, Cmd-V | copy, cut, paste nodes or elements |
| Cmd-D | duplicate, placed in the first clear gap |
| Delete | delete, undoably |
| Cmd-Z, Shift-Cmd-Z | undo, redo |
| Cmd-A | select every node on the page |
| Cmd-G, Shift-Cmd-G | group, ungroup |
| Cmd-], Cmd-[ | forward, backward; with Shift, front and back |
| Shift-Cmd-L, Shift-Cmd-H | lock, hide |
| F2 | rename |
| Option-Cmd-V | paste style: radius and opacity |
| arrows | nudge 1px, with Shift 10px |
| Shift-1, Shift-2, Shift-0 | fit all, fit selection, 100% |
| F, T, R, O, N, I | frame, text, rectangle, ellipse, line, image |
| P, D | vector pen, draw for the agent |
| Shift-P | play the node |
| Cmd-F | find nodes, element names and words |