Design without the lock‑in.
An open-source design editor that opens your Figma files, runs on your machine, and lets you or your AI agent drive every layer.
Open what you already have
OpenPencil reads .fig files directly: pages, components, instances, variables, and auto layout arrive as editable layers, and you can save back to .fig. Paste SVG or open HTML and CSS, and they become layers too, laid out as a browser lays them out.
This is the app’s own tour, a real .fig file. Open a chapter in the layers and click around.
Design with real tools
Auto layout, constraints, fills, strokes, effects, and typography, with the controls where you expect them. Components take slots, so an instance keeps the design and brings its own content. Everything is undoable, and nothing waits on a server.
Hover the selected cover and drag a corner to round it. The other players bring their own covers through the Artwork slot.
Components that work
Give a component a behaviour, such as a switch, checkbox, slider, tabs, or text field, and preview runs it as a real Reka UI control. Variants become its states, and the same components export to Storybook with controls you can click.
This canvas is in preview: press play, drag the progress bar, toggle shuffle. Leave preview to edit.
Variables are design tokens
Colours, spacing, and type live in collections with modes and are edited as tokens. Exported code writes bound values as CSS custom properties, so the code uses the same names as the design.
Each player reads the Theme collection in its own mode. Change a token’s value and both follow.
Fills that move
A shader is a fill like any other: pick one in the fill picker, stack effects, tune their sliders, or paste a preset from shaders.com. Files keep a still of it, so they open anywhere, and preview plays it.
This canvas is in preview, so the shaders move. Leave preview, select a square, and open its fill.
Linting
OpenPencil checks the design as you work: contrast, text too small to read, default names, hidden and empty layers, stray groups. Problems are marked on the canvas, many come with a fix you apply in one click, and the same rules run in the CLI and for agents.
Click a marker on the canvas, or apply a fix from the list.
Design with AI, on your keys
Ask in plain language and the agent edits the document with the same tools you use, previewing its work on the canvas as it streams. Connect any provider with your own key, or bring the coding agent you already use.
A recorded turn plays through the real agent loop. Watch the canvas build as it streams.
Works with
- Claude Code
- Cursor
- Windsurf
- Codex
- Gemini CLI
- and any MCP client
Work together, with people and agents
Share a link and everyone edits the same document, peer to peer, with live cursors, follow mode, comments pinned to layers, and voice calls. AI agents join the same way: everyone in the room watches them build as they stream.
Both screens are yours to use. Drag a layer on one and watch it move on the other, then ask the agent.
From design to code
Every selection is a Vue or React component, with variants as props and Reka UI or Radix behind the interactive ones, or HTML, Tailwind, and design JSX with variables written as tokens. Components export as Storybook stories, and design JSX stays linked to the canvas: edit it and the canvas follows.
Switch to React, HTML, or design JSX, or select another layer.
Script everything
The openpencil CLI works on a file with no app running, or drives the app you have open. Inspect a document, query it with XPath, lint it, export it, or run Figma plugin code against it with eval. The MCP server gives agents the same reach over stdio or HTTP.
Run a command and watch the canvas.
24 commands
- analyze
- convert
- diff
- documents
- eval
- export
- find
- fonts
- formats
- import
- info
- libraries
- lint
- node
- pages
- query
- redo
- selection
- settings
- tokens
- tool
- tree
- undo
- variables
122 MCP tools
Create, style, lay out, inspect, and export, each one also available to the built-in agent.
Build it into your own product
OpenPencil is a toolkit as much as an app: a framework-neutral engine, a headless Vue SDK, and separate packages for the scene graph and file formats. Embed a canvas in your product, render and check designs in CI, or build a different editor on the same engine. Every canvas on this page is that SDK running inside a documentation site.
The code beside the canvas is all it takes to mount one.
Your files stay yours
- Local first
- Documents are files on your disk. No account, no server, no internet required.
- Your storage
- Sync through your own S3-compatible bucket when you want it.
- Open formats
- Export to .fig, PDF, PPTX, SVG, HTML, and JSX. Leaving is always possible.
- MIT licensed
- The editor, the rendering engine, the .fig codec, and the CLI.
OpenPencil Cloud
Your team's design workspace, hosted for you. Everyone edits the same files live, shares them with a link, and designs with AI, with nothing to install or run. Your files stay open: export them as .fig whenever you like.
OpenPencil Cloud is paid in $OPENPENCIL — seats, live sync, shared libraries and AI all draw on one token balance. Checkout opens with the contract address in the $OPENPENCIL band.
- Real-time team sync
- Every change reaches every teammate as it happens, on any device.
- Share links and comments
- Send a link to review a design and discuss it right on the canvas.
- Team libraries
- Publish components, styles, and tokens once and use them in every file.
- Hosted AI
- Agents that design with you, with no API keys to manage.
- SSO and admin controls
- Single sign-on, roles, and control over who sees what.
Roadmap
- Shipped
Interactive components and preview
Variables as design tokens
Linting with one-click fixes
AI agents as collaborators, with follow mode
Revert, regenerate, and edit AI turns
Code linked to canvas layers
Visual diff and patch
Comments and voice calls in shared rooms
Vue and React components in the Code tab
SVG and HTML import as editable layers
Shader fills
W3C design tokens
A guided tour of the editor
Lists and styles for any range of text
- Now
Storybook from real components
Stories that render Reka UI for Vue and Radix UI for React.
Component authoring
Faster variant editing and canvas selection inside components.
- Next
Self-hosted OpenPencil
The whole workspace inside your own network: sync, sharing, comments, and team libraries without sending a file to anyone else.
- Your storage
- Documents stay in your bucket, in your region.
- Your identity
- Sign-in through your OIDC or SSO provider, with roles.
- Your network
- A collaboration relay that works behind your firewall.
- Your operations
- Guided deployment, upgrades, backups, and retention.
OpenPencil Cloud
The hosted workspace for teams: live sync, sharing, libraries, and AI, with nothing to run.
OpenPencil Cloud is paid in $OPENPENCIL — seats, live sync, shared libraries and AI all draw on one token balance. Checkout opens with the contract address in the $OPENPENCIL band.
Version history
Automatic snapshots, named checkpoints, and restore.
- Later
Governed design systems
Propose, review, publish, and migrate.
Embeddable editor
Put the editor on this page into your own product.
The $OPENPENCIL token
OpenPencil is open source; the network that runs it is not free. AI turns, cloud renders and the plugin registry are paid rails — and $OPENPENCIL is the only way to buy them. Launching on Solana.
Coming soon — launching on Solana- AI turns and cloud renders
- Every metered job on OpenPencil Cloud — AI turns, headless renders, export jobs — is priced and paid in $OPENPENCIL. No fiat checkout, no seat licences.
- Plugin and template market
- Plugins, icon sets and document templates settle in $OPENPENCIL: the buyer pays the token, the author is paid in it, on chain.
- Stake for governed libraries
- Stake $OPENPENCIL to unlock governed design systems: review and publish flows, audit trails and shared team libraries.
- Fees buy the token back
- Every fee the network collects routes to an on-chain buyback of $OPENPENCIL, so usage of the editor points back at the token that pays for it.
Solana · SPL token. Launching soon — nothing here is an offer or a security; $OPENPENCIL pays for network usage. The contract address drops into the band above on launch day.