Canvas tools and document model
All supported wireframe operations, node types, library properties, variations and the coordinate system for agents.
The canvas is a flat document
A document has fileName, nodes (an ID-to-node map), order (back to front), look and variations. Coordinates are world pixels on an infinite plane: x increases right, y increases down. Each node has id, type, x, y, w, h and a stable drawing seed. Components default to the catalog size. Use explicit dimensions for text. Groups are groupIds arrays, outermost first, not container nodes or automatic layouts.
The complete node vocabulary
component: kind plus props from the catalog. shape: rect or ellipse with fill. text: text and fontSize, with align, verticalAlign, fixedW/fixedH, bold, italic, underline, link and optional box styling. arrow: two points relative to its origin, head, optional bind/anchors and straight/elbow/curved lineStyle. draw: relative freehand points. image: raster data URL, naturalW/naturalH and optional normalized crop. All support geometry, groupIds, flipX/flipY and locked.
Create and modify
add inserts any node type. update merges node fields, and merges props for component instances; IDs and node types cannot change. Optional fields can be reset with a patch entry’s unset array (for example removing crop restores a full image, removing snap restores connector snapping). This covers moving, resizing, variant switching, text editing and styling, image crop, connector binding, fill, strokes and locking. delete removes named nodes and settles arrow bindings. note creates a boxed text annotation. rename and look update document presentation. Arbitrary JavaScript or external URL fetching is never executed.
Compose and arrange
duplicate clones nodes with remapped group and connector IDs and dx/dy offsets. group wraps the named nodes in one new group beneath the parent they already share, skipping locked ones, and refuses when there is nothing to group; a group left with a single member dissolves. ungroup removes one outer path level. detach converts component drawing primitives into editable nodes. align supports left, right, top, bottom, hcenter and vcenter. distribute uses x or y and even gaps. reorder supports front, back, forward and backward. flip mirrors a node’s visual content horizontally or vertically. Use update geometry for moving an entire composition; no DOM or CSS layout engine is involved.
Locked nodes and explicit scope
Operations act on exactly the IDs supplied. Include all group members when editing a whole group. Locked nodes reject mutations until explicitly unlocked with an update containing only locked:false. Duplication and variation membership can read locked nodes. To change every button, first read the canvas, select its button IDs, then submit patches for those nodes.
Variations and notes
variation creates or updates a named set of member node IDs with a title and description. Place directions side by side, include their annotations in nodeIds when exporting a focused render, and make the rationale specific. Removing a member node removes its variation unless that variation is updated in the same batch. remove_variation removes a named direction without deleting its nodes. Review comments are stored and returned by the API, but the editor does not display them yet, so put anything the user must see on the canvas with note; resolve comments after addressing the feedback.
Undo, export and visual inspection
history and restore are durable revision-based undo. restore records a new revision. export_document returns portable .squig.json plus variation metadata, feedback and implementation guidance. render_document returns SVG or a PNG image directly to the agent. Drawing paths match the canvas. render_document embeds the editor's fonts (Patrick Hand, Geist, Source Serif 4), so text is legible in the PNG; letterforms are rasterized on the server, so use a browser screenshot for final typography checks. measure_text (squig_measure_text over MCP) reports line counts, required dimensions, overflow and missing glyphs for text nodes using the same font advances and wrapping as server renders. It does not inspect component labels; italic measurements use regular-face advances. PNG previews normalize WebP images before rasterizing (up to 16 million source pixels). The browser also exports SVG and PNG. Pan, zoom, selection and the clipboard remain browser UI state; agents edit the same underlying geometry directly.