Render HTML/CSS via Satori
render_satoriConvert complex HTML/CSS layouts into editable Figma vector nodes using Satori, for UI components like flexbox cards and multi-column designs.
Instructions
Render HTML/CSS layout as editable Figma vector nodes using Satori (Vercel's HTML-to-SVG engine).
Use ONLY when you need complex CSS layouts that are hard to express as SVG — flexbox cards, multi-column layouts, UI components. For data viz, prefer render_d3 instead.
LIMITATIONS:
Text is rendered as vector PATHS, not editable text nodes. Users cannot edit text in Figma.
No CSS gradients (use solid colors instead)
No rgba() (use hex colors)
Requires fetching a font file (adds latency)
Uses JSX-object syntax, not HTML strings
The script runs in the iframe. Use the satori() function with JSX-like objects. Must fetch a font first: fetch Inter WOFF, pass as fonts array.
Available: satori (the render function), scratch div.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | No | ||
| y | No | ||
| width | No | Satori render width | |
| height | No | Satori render height | |
| script | Yes | JavaScript that calls satori(element, options). Must fetch font first. Return the SVG string (async/Promise). | |
| parentId | Yes | Parent node (typically slide ID) |