Add Programmable docs section with CLI, JSX, MCP, AI, Collab
New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference
2026-03-08 10:22:36 +00:00
|
|
|
|
---
|
|
|
|
|
|
title: Exporting
|
2026-03-28 12:42:21 +00:00
|
|
|
|
description: Export document content to PNG, JPG, WEBP, SVG, `.fig`, or JSX, and convert between document formats.
|
Add Programmable docs section with CLI, JSX, MCP, AI, Collab
New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference
2026-03-08 10:22:36 +00:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# Exporting
|
|
|
|
|
|
|
2026-03-28 12:42:21 +00:00
|
|
|
|
Export designs from the terminal — raster images, vectors, `.fig` subsets, or JSX code.
|
Add Programmable docs section with CLI, JSX, MCP, AI, Collab
New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference
2026-03-08 10:22:36 +00:00
|
|
|
|
|
|
|
|
|
|
## Image Export
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
2026-03-28 12:42:21 +00:00
|
|
|
|
open-pencil export design.fig # PNG (default)
|
|
|
|
|
|
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2×, quality 90
|
Add Programmable docs section with CLI, JSX, MCP, AI, Collab
New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference
2026-03-08 10:22:36 +00:00
|
|
|
|
open-pencil export design.fig -f webp -s 3 # WEBP at 3×
|
|
|
|
|
|
open-pencil export design.fig -f svg # SVG vector
|
2026-03-28 12:42:21 +00:00
|
|
|
|
open-pencil export design.fig -f fig --page "Page 1" # export one page as .fig
|
|
|
|
|
|
open-pencil export design.fig -f fig --node 1:23 # export one node as .fig
|
Add Programmable docs section with CLI, JSX, MCP, AI, Collab
New top-level nav section documenting OpenPencil's programmability:
- CLI: inspecting, exporting, analyzing, scripting (eval)
- JSX Renderer: elements, style props, visual diffing
- MCP Server: moved from Reference (setup + tool list)
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
Restructured sidebar:
- Programmable added to nav bar (7 locales)
- Context Menu moved from User Guide to Reference
- MCP and eval-command removed from Reference
2026-03-08 10:22:36 +00:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Options:
|
|
|
|
|
|
|
|
|
|
|
|
- `-f` — format: `png`, `jpg`, `webp`, `svg`, `jsx`
|
|
|
|
|
|
- `-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:
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
|
open-pencil export design.fig -f jsx --style tailwind
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Output:
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<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](../jsx-renderer)).
|
|
|
|
|
|
|
|
|
|
|
|
## Thumbnails
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
|
open-pencil export design.fig --thumbnail --width 1920 --height 1080
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Live App Mode
|
|
|
|
|
|
|
|
|
|
|
|
Omit the file to export from the running app:
|
|
|
|
|
|
|
|
|
|
|
|
```sh
|
|
|
|
|
|
open-pencil export -f png # screenshot the current canvas
|
|
|
|
|
|
```
|