OpenPencil

Open-source, AI-native design editor. Figma-compatible, AI-first, fully local.

Status: Active development. Not ready for production use.

Try it online → · Download · Documentation

What's next

• 100% .fig compatibility — full rendering parity with Figma
• Shader effects (SkSL), skewing, native OkHCL color support
• Component libraries — publish, share, and consume design systems
• Live reload when .fig file changes on disk (MCP server → desktop app workflow)
• More AI providers (Anthropic API, Claude Code subscription, Gemini, local models via Ollama)
• Code signing (Apple & Azure certificates for properly signed binaries)
• CI tools — design linting, code export, visual regression in pipelines

Why

Figma is a closed platform that actively fights programmatic access. Their MCP server, launched in June 2025, was read-only — you could pull design context but not create or modify anything. figma-use filled that gap in January 2026 with full read/write design automation via CDP. A month later, Figma 126.1.2 started stripping --remote-debugging-port on startup — killing CDP-based tools. Figma has since added UI-to-Figma capture via their MCP server, but it still can't programmatically create or modify design nodes.

This is a supply chain problem. Designers and developers build workflows on top of their design tool. When that tool is closed-source, the vendor controls what's possible. They can break your tooling overnight with a point release. Your design files are in a proprietary binary format that only their software can fully read.

Coding tools went through the same shift. VS Code opened the editor. LLMs opened code generation. Projects like pi opened the AI coding agent. Design tools are next.

OpenPencil is:

• Open source — MIT license, read and modify everything
• Figma-compatible — opens .fig files natively, copy & paste nodes between apps
• AI-native — built-in chat with tool use, bring your own API key, no vendor lock-in
• Free forever — no account, no subscription, no internet required, ~7 MB install
• Programmable — headless CLI, every operation is scriptable

Your design files are yours. Your tools should be too.

Features

• Figma .fig file import and export — read and write native Figma files
• Copy & paste with Figma — select nodes in Figma, paste into OpenPencil (and vice versa). Uses the same Kiwi binary format as .fig files
• Real-time collaboration — P2P via WebRTC, no server required. Cursors, presence, follow mode
• Drawing tools — shapes, pen tool with vector networks, rich text with system fonts, auto-layout, components with live sync, variables with modes and collections
• AI chat — describe what you want, the AI builds it. 75 tools wired to chat, CLI, and MCP
• MCP server — connect Claude Code, Cursor, or any MCP client to read/write .fig files headlessly
• Headless CLI — inspect, search, analyze, and render .fig files without a GUI
• ~7 MB desktop app — Tauri v2, macOS/Windows/Linux. Also runs in the browser

Tech Stack

Installation

Download the latest release from the releases page, or use the web app — no install needed.

Getting Started

bun install
bun run dev

Collaboration

Share a link to co-edit in real time. No server, no account — peers connect directly via WebRTC.

1. Click the share button in the top-right panel
2. Share the generated link (app.openpencil.dev/share/<room-id>)
3. Collaborators see your cursor, selection, and edits in real time
4. Click a peer's avatar to follow their viewport

All sync happens peer-to-peer via Trystero. Document state is persisted locally in IndexedDB — refreshing the page keeps your work.

CLI

Headless .fig file operations — no GUI needed:

bunx @open-pencil/cli info design.fig         # Document stats, node types, fonts
bunx @open-pencil/cli tree design.fig         # Visual node tree
bunx @open-pencil/cli find design.fig --type TEXT  # Search by name or type
bunx @open-pencil/cli export design.fig       # Render to PNG
bunx @open-pencil/cli export design.fig -f jpg -s 2 -q 90  # JPG at 2x

All commands support --json for machine-readable output.

MCP Server

Connect AI coding tools to read and modify .fig files headlessly. Full docs →

Stdio (Claude Code, Cursor, Windsurf) — add to your MCP config:

bun add -g @open-pencil/mcp

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

HTTP (scripts, browser extensions, CI):

openpencil-mcp-http   # http://localhost:3100/mcp

Security defaults for HTTP transport:

• Binds to 127.0.0.1 by default (HOST to override)
• eval tool is disabled
• File access is restricted to OPENPENCIL_MCP_ROOT (defaults to current working directory)
• Optional auth: set OPENPENCIL_MCP_AUTH_TOKEN and send Authorization: Bearer <token> (or x-mcp-token)
• CORS is disabled by default; set OPENPENCIL_MCP_CORS_ORIGIN to allow a specific origin

75 tools: create shapes, set fills/strokes/layout, variables, vectors, boolean ops, viewport, find nodes, open/save .fig files, render JSX to design nodes.

Scripts

Desktop App

Requires Rust, the Tauri CLI, and platform-specific prerequisites (Tauri v2 guide).

bun run tauri dev                      # Dev mode with hot reload
bun run tauri build                    # Production build
bun run tauri build --target universal-apple-darwin  # macOS universal

Cross-compilation to other platforms requires their respective toolchains or CI (e.g. GitHub Actions).

Platform Prerequisites

macOS

Install Xcode Command Line Tools:

xcode-select --install

Windows

1. Install Rust — make sure the default toolchain is stable-msvc:

   rustup default stable-msvc

2. Install Visual Studio Build Tools with the "Desktop development with C++" workload (MSVC compiler + Windows SDK)
3. WebView2 is pre-installed on Windows 10 (1803+) and Windows 11. If missing, download from Microsoft

Linux

Install system dependencies (Debian/Ubuntu):

sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \
  libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev

For other distros, see the Tauri v2 prerequisites.

Project Structure

packages/
  core/           @open-pencil/core — engine (scene graph, renderer, layout, codec)
  cli/            @open-pencil/cli — headless CLI (info, tree, find, export)
  mcp/            @open-pencil/mcp — MCP server (stdio + HTTP)
  docs/           VitePress documentation site
src/
  ai/             AI tool wiring
  components/     Vue SFCs (canvas, panels, collaboration, color picker)
  composables/    Canvas input, keyboard shortcuts, collaboration, rendering
  views/          Route views
  stores/         Editor state (Vue reactivity)
  engine/         Re-export shims from @open-pencil/core
desktop/          Tauri v2 (Rust + config)
tests/
  e2e/            Playwright visual regression
  engine/         Unit tests

Acknowledgments

Thanks to @sld0Ant (Anton Soldatov) for creating and maintaining the documentation site.

License

MIT