write_html
Insert or replace HTML nodes in Paper design files to create UI components incrementally. Supports inline styles and real-time visual feedback for autonomous design workflows.
Instructions
IMPORTANT: Write incrementally. The user sees you write on the canvas in real-time. Show them visual progress every few seconds.
Each write_html call should create one visual item: a header, a single list row, a button bar, or a paragraph block.
Even simple components should be incremental: a card = container/header, then each row, then the footer.
IMPORTANT: Prefer cloning instead of remaking existing Paper nodes using <x-paper-clone node-id="A-01" style="..." />.
For repeated elements: create the container first, then add each item as a separate write_html call into the container or use the duplicate tool on the first child.
HTML and CSS rules:
Always use inline styles (style="..")
Enforce consistency with design tokens as CSS variables if available
All Google Fonts and locally installed fonts are available in font-family
All CSS color formats are supported: hex, rgb(a), hsl(a), oklch, oklab etc
Use flex as the primary layout mode. Flexbox, padding, and gap are the core layout tools in Paper's interface
Absolute position is fully supported. Use it for decorative elements. Avoid covering the entire artboard with a single absolute element, it blocks cursor interaction underneath
Do NOT use: margin, display: inline, display: grid, HTML tables. Use padding and gap for spacing
display: block is acceptable for simple elements (text, decorative shapes) but not for layout containers
Assume border-box sizing everywhere
Use or white-space: pre for code blocks or indented text
Do NOT use emojis as icons. Use SVG icons or images
Rich text isn't supported in Paper; code snippets should be a single element with one text color and pre whitespace
Use the layer-name attribute to set names on elements in the Paper layer tree, e.g.
Local images MUST use absolute paths in an img starting with paper-asset:// e.g.
paper-gen:// URLs generate AI images. ONLY if the user asked; read the "image-generation" guide first
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | HTML string to parse into design nodes. Supports standard HTML elements with inline CSS styles. | |
| mode | Yes | "insert-children" adds the HTML as children of the target node. "replace" removes the target node and puts the parsed HTML in its place. | |
| fileId | No | Optional. The Paper file ID this call should act on. Pass it to reliably target a specific file when several are open at once (e.g. multiple agents from the same session working in parallel). Omit to use the most recently opened file in the session. | |
| targetNodeId | Yes | The ID of the target node. In "insert-children" mode, new nodes are added as children of this node. In "replace" mode, this node is removed and replaced by the parsed HTML. |