jsx
Create design trees by nesting JSX markup in a single atomic call, building complete subtrees with built children. Use parent, replaceId, and insertIndex to place the subtree in the document.
Instructions
Create design trees with nested JSX markup. One jsx call builds a complete subtree atomically — nesting is the hierarchy. Keep a single logical unit inside one call; the returned root's children are already built, not stubs to be filled in later.
Examples: jsx({markup: ""}) jsx({markup: "Account"})
Elements: frame, text, rect, ellipse, line, icon, image, instance, component, group, section, vector Attributes (frame): layout, justify, items, wrap, w, h, minW, maxW, p, gap, bg, fill, rounded, stroke, shadow, blur, bgblur, opacity, layoutPositioning Attributes (text): size, weight, lineHeight, font, fill, w (w="fill" for wrap), maxLines, textTruncation Effects: shadow="0,8,32,0,#0006" or shadow={shadow(0,8,32,0,'#0006')}; blur={10} for layer blur; bgblur={20} for frosted-glass/glassmorphism background blur. Multiple effects merge automatically. Decoration in auto-layout: floating orbs/blobs/decorative shapes inside a row/column parent need layoutPositioning="absolute" so they don't get stacked into the main-axis flow. Full-frame backgrounds: set the parent frame's bg directly. Don't add a separate backdrop. Supported gradient strings (CSS-like subset, not full CSS):
linear-gradient(deg, <#hex> %, ...) e.g. "linear-gradient(135deg, #A 0%, #B 100%)"
linear-gradient(to , ) directions: top/right/bottom/left and corners (e.g. "to bottom right")
radial-gradient() centered, ellipse-fill — no position/shape modifiers
radial-gradient(circle, ) centered, circle shape only
conic-gradient(from deg, ) Unsupported (will be rejected): "circle at X% Y%", "ellipse at ...", "X% Y%" position syntax, named colors (red/blue/...), hsl(), and numeric stops without a percent sign. Text: content here Instance: Self-closing: (use line for dividers/separators; rect/ellipse for SMALL pure decoration with no children — page-level backgrounds belong on the parent frame's bg) Arc/Ring: (arc="start end innerRadius?" — innerRadius 0-1 makes a donut/ring) Grid layout: call help({ name: "grid-layout" }) for tracks, gaps, and when row/column is a better fit Variable binding: fill/bg/stroke accept qualified bare-name token strings (e.g. bg="$Theme/Bg/Surface"). Object literals (fill={{variable_id:...}}) drop the binding silently — always use the string form.
Swap an existing subtree: jsx({replaceId: "", markup: "..."}) replaces the old node at the same parent and sibling index atomically, preserving position in one call. Markup must have a single root. Use jsx for tree creation; edit for property updates on known nodes.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes | JSX-like nested markup string | |
| parent | No | Target parent node ID — the frame/container the new subtree will live inside | |
| replaceId | No | Replace this existing node in-place (keeps parent + sibling index). Old node is deleted on success. Markup must be single-root. Mutually exclusive with parent. | |
| insertIndex | No | Position among parent siblings (0 = first). Omit to append at end. Ignored when replaceId is set (inherits old node index). |