Exporting

Export designs from the terminal — raster images, vectors, .fig subsets, JSX code, or HTML.

Image Export

openpencil export design.fig                           # PNG (default)
openpencil export design.fig -f jpg -s 2 -q 90        # JPG at 2×, quality 90
openpencil export design.fig -f webp -s 3             # WEBP at 3×
openpencil export design.fig -f svg                   # SVG vector
openpencil export design.fig -f fig --page "Page 1"   # export one page as .fig
openpencil export design.fig -f fig --node 1:23        # export one node as .fig
openpencil export design.fig -f html --css tailwind    # export an HTML fragment with Tailwind classes

Options:

• -f — format: png, jpg, webp, svg, jsx, html, fig
• -s — scale: 1–4
• -q — quality: 0–100 (JPG/WEBP only)
• -o — output path
• --page — page name
• --node — specific node ID

JSX Export

Export as JSX with Tailwind utility classes:

openpencil export design.fig -f jsx --style tailwind

Output:

<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p className="text-sm text-[#49454F]">Description text</p>
</div>

Also supports --style openpencil for the native JSX format (see JSX Renderer).

HTML Export

Export as an HTML fragment with inline styles by default, or Tailwind utility classes:

openpencil export design.fig -f html
openpencil export design.fig -f html --css tailwind

Use --html standalone for a browser-openable HTML document with reset styles and a page wrapper. Standalone HTML is intended as a useful visual/code handoff, not a pixel-perfect renderer replacement:

openpencil export design.fig -f html --html standalone --css inline
openpencil export design.fig -f html --html standalone --css tailwind
openpencil export design.fig -f html --html standalone --css tailwind --assets external

Standalone Tailwind output is compiled during export; it does not depend on the Tailwind browser runtime. Use --assets external to write CSS and extracted image assets next to the HTML file. Use --fonts assets with external assets to resolve detected SceneGraph text fonts through OpenPencil's configured web-font providers and emit local @font-face files.

HTML export is available in file mode.

Thumbnails

openpencil export design.fig --thumbnail --width 1920 --height 1080

Live App Mode

Omit the file to export from the running app:

openpencil export -f png    # screenshot the current canvas