iframe-canvas

Web

knowledge — teaches; changes nothing

225 lines

2 references

Decide and build a pan/zoom canvas whose artboards are live <iframe> previews — the architecture behind AI site/app builders (Reweb, Sleek, Plasmic, Builder.io, Onlook), not the one behind Figma. Owns the decisions that fail late: how many live frames the tab can afford, same-origin vs cross-origin isolation, snapshot-vs-live per artboard, the interaction mode that gates pointer events, the camera and its two coordinate spaces, and the postMessage contract across the boundary. Use when the user says "infinite canvas", "canvas infinita", "tavolozza tipo Figma", "artboard", "live preview in an iframe", "visual editor", "click to select an element in the preview", "pan and zoom the workspace", or when a preview iframe gets slow, blurry, or stops receiving clicks. Refuses outside Next.js 16 web. Not for: WebGL/Konva canvas rendering (a different architecture — this skill says when to switch), React Native, or building the editor UI around the canvas.

When it applies

The user wants a workspace you can pan and zoom with more than one preview on it.
The user wants to click an element inside a preview and edit it.
A preview iframe went slow, blurry, or stopped receiving clicks.
The user says "like Figma" about a DOM-and-iframe product — read *The Figma trap* first.
The user is choosing between an iframe canvas and a rendered one (WebGL/Konva/2D).

What it does not do

Does not build a rendered canvas. If Decision 2 lands on "rendered", this skill has
Does not design the editor UI. Panels, toolbars, layer trees are screenshot-to-page.
Does not own export. Capturing, serialising or exporting artboards is product work.
Does not cover React Native. No iframes there.

References it ships

Get it

/plugin install dev-flow@dev-flow      # the whole suite
./install.sh --platform claude        # or drop dist/iframe-canvas.skill into Claude Code

Read iframe-canvas/SKILL.md on GitHub →