Elements

Every element shares a common set of fields, then adds type-specific ones. type selects the element; key, x, y, width, height are always required.

Common fields#

Field	Notes
key	Unique id for this element.
type	The element type (below).
name	Optional layer name.
x, y, width, height	Artboard-local geometry in meta.unit.
rotation	Degrees.
opacity	0–1.
locked	Boolean.
fill	A color.
stroke	{ "color": <color>, "width": <number> }.
effects	Array of effects (below).

text#

{ "type": "text", "key": "h1", "x": 15, "y": 20, "width": 180, "height": 40,
  "content": "Summer\nSale", "font": "Playfair Display", "size": 48,
  "fontWeight": "bold", "align": "center", "lineHeight": 1.05, "fill": { "hex": "#111111" } }

• content — the text (use \n for line breaks).
• font — a curated Google font family (e.g. Inter, Playfair Display, JetBrains Mono).
• size, letterSpacing — in points.
• align — left | center | right | justify. case: "upper" for all-caps.
• autoSize — auto-width | auto-height | fixed. columns: { count, gutter } for multi-column flow.
• runs — per-character styling: [{ start, end, color, fontWeight, italic, font, size }] (character offsets into content).
• paragraphs — per-paragraph attributes: [{ index, paragraphStyleRef, spaceBefore, spaceAfter, align, list: { ordered, level } }].
• textPath — makes the text CURVED (type-on-path): the content runs along an arc, circle, ellipse, or a custom Bézier path (see below). For badges, seals, stamps, and arched titles. Mutually exclusive with columns and flowInto.

Curved text (textPath)#

{ "type": "text", "key": "seal", "x": 40, "y": 40, "width": 120, "height": 120,
  "content": "PREMIUM QUALITY", "font": "Bebas Neue", "size": 18, "align": "center",
  "textPath": { "shape": "arc", "radius": 50, "startAngle": -180, "endAngle": 0, "side": "outside" } }

• shape — arc (a partial sweep, uses startAngle/endAngle), circle or ellipse (a full ring), or custom (a Bézier path via points).
• radius (arc/circle) or rx + ry (ellipse) — in meta.unit, like other geometry.
• startAngle, endAngle — DEGREES (0 = right, -90 = top, 90 = bottom; clockwise). A top arch is -180 to 0; text along the top of a full ring is a circle with side: "outside".
• side — outside (default, text sits on the outer side reading upright) or inside (flipped — use for text reading along the BOTTOM of a circle).
• align — left | center | right | justify distribution along the curve (default center).
• startOffset — shift along the curve (in meta.unit). baselineOffset — raise (+) / lower (-) off the curve (in meta.unit). direction — forward (default) or reverse.
• custom shape: points are Bézier anchors identical to a path's points ({ x, y, hIn?, hOut?, type?, radius? }), plus closed.

The box (width/height) is re-derived from the curve when the design loads, so set x/y to position the element and give width/height an approximate size (e.g. ~2× the radius). Font size is still in points.

rect / ellipse / line#

{ "type": "rect", "key": "card", "x": 0, "y": 0, "width": 90, "height": 50,
  "cornerRadius": 6, "fill": { "cmyk": [0, 0, 0, 5] } }

rect adds cornerRadius (a number, or { tl, tr, br, bl }). ellipse and line use only the common fields.

image#

{ "type": "image", "key": "hero", "x": 0, "y": 0, "width": 210, "height": 120,
  "assetUrl": "https://…/photo.jpg", "fit": "fill" }

Provide a real assetUrl, or a prompt describing the intended image (a placeholder frame is created that you can generate or replace later). fit is fill | fit | free | stretch.

path#

{ "type": "path", "key": "wave", "x": 0, "y": 0, "width": 100, "height": 40,
  "closed": false, "points": [ { "x": 0, "y": 20 }, { "x": 50, "y": 0 }, { "x": 100, "y": 20 } ] }

points are anchors ({ x, y, hIn?, hOut?, type? }); closed makes it a shape.

barcode#

{ "type": "barcode", "key": "qr", "x": 10, "y": 10, "width": 30, "height": 30,
  "symbology": "qrcode", "value": "https://example.com" }

symbology — qrcode, datamatrix, code128, code39, ean13, ean8, upca, itf14.

group#

{ "type": "group", "key": "badge", "x": 0, "y": 0, "width": 60, "height": 60,
  "elements": [ /* child elements in the same artboard-local coordinates */ ] }

dieline#

A cut-contour on a spot swatch: { "type": "dieline", "swatchRef": "die", "points": [...], "closed": true }.

effects#

effects is an array of { type, color, offsetX, offsetY, blur, spread } where type is drop-shadow, inner-shadow, layer-blur, or background-blur. color is an rgba(...) string.