skip to content

canvas basics

what is on the canvas, what each thing you do there does to the files, and every shortcut.

read this page as markdown

on this page

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.

what each action does

you dowhat happens
double-click a nodeyou enter it and select the elements inside; the inspector edits their styles
pin a commentit 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 nodesoft: the folder moves to .ignaru/.trash and Cmd-Z brings it back
versionsa node's inspector lists the git commits that changed its page; click one to see it, restore to bring it back
exportcopy a node as png, react or a prompt, or save it as png, svg or a react file
deploya preview link through your own vercel or cloudflare login; production asks once more

shortcuts

keysdoes
Cmd-C, Cmd-X, Cmd-Vcopy, cut, paste nodes or elements
Cmd-Dduplicate, placed in the first clear gap
Deletedelete, undoably
Cmd-Z, Shift-Cmd-Zundo, redo
Cmd-Aselect every node on the page
Cmd-G, Shift-Cmd-Ggroup, ungroup
Cmd-], Cmd-[forward, backward; with Shift, front and back
Shift-Cmd-L, Shift-Cmd-Hlock, hide
F2rename
Option-Cmd-Vpaste style: radius and opacity
arrowsnudge 1px, with Shift 10px
Shift-1, Shift-2, Shift-0fit all, fit selection, 100%
F, T, R, O, N, Iframe, text, rectangle, ellipse, line, image
P, Dvector pen, draw for the agent
Shift-Pplay the node
Cmd-Ffind nodes, element names and words