Opcode mode

Opcode mode returns a structured array of Figma operations and a font manifest. This is the default — if you omit outputMode, the API returns opcodes.

How it works

Each opcode is an instruction to create or configure a Figma node — frames, text layers, images, vectors. They are ordered for sequential execution to reconstruct the design tree.

Example

Same HTML as the clipboard example, but without outputMode to get the default opcode output:

curl -X POST https://api.coderender.app/api/html \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer cr_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
  -d ''{
  "schemaVersion": "1.0",
  "html": "<section style=\"max-width:400px; padding:24px; ...\">...</section>",
  "vpWidth": 1280,
  "vpHeight": 900
}'

Response

{
  "opcodes": [
    ["createFrame", "root", null, 0, 0, 1280, 900],
    ["setProps", "root", { "fills": [...] }],
    ["createFrame", "section", "root", 0, 0, 400, 120],
    ["createText", "txt_0", "section", 24, 24, 352, 22],
    ...
  ],
  "fontManifest": [
    { "family": "Inter", "style": "Regular" },
    { "family": "Inter", "style": "Bold" }
  ],
  "stats": { "nodes": 8, "images": 0, "frames": 3, "text": 3 }
}

Font manifest

The fontManifest lists every font family and style needed to render the design. Load these fonts in Figma before executing the opcodes.