[opensourcedex]

OpenPencil is a free, open source design & prototyping project written in TypeScript and released under MIT. It has 8,357 GitHub stars, 815 forks and 46 open issues, and was last pushed 7 hours ago. On this registry it ranks #1 of 5 tracked projects in Design & Prototyping, with 5 head-to-head comparisons available. It gained 78 stars over the last 6 tracked days.

What is OpenPencil?

OpenPencil is an open-source, AI-native design editor that opens and writes native Figma .fig and Pencil .pen files, runs as a roughly 7 MB desktop app or in the browser, and is aimed at designers and developers who want a local, fully programmable alternative to Figma.

What it is

OpenPencil is a TypeScript design editor released under the MIT licence. It ships as a Tauri v2 desktop application for macOS, Windows, and Linux at roughly 7 MB, and also runs in the browser as a PWA. Under the hood it builds on Skia, WebGPU, and Vue, and its topic list places it firmly in the design-editor and figma-alternative space. Beyond the app itself, it is a programmable toolkit: a headless CLI, a Vue SDK with headless components and composables, an MCP server for AI agents, and desktop agent integrations let it be embedded into other products or driven from scripts. The project describes itself as in active development, usable today with some rough edges as features evolve.

The concrete problem it solves is the gap between native Figma documents and everything around them. OpenPencil reads and writes .fig files, opens supported Pencil documents from the app or the OS file browser, and lets nodes be copied and pasted between applications, so existing design files are not locked to one tool. It then extends those documents into workflows Figma does not cover locally: linting naming, layout, and accessibility; converting between supported formats; analyzing colors, typography, spacing, and clusters; extracting design tokens; and exporting selections as JSX or Tailwind. The headless CLI inspects and transforms design files without opening the editor at all, which is the specific gap it replaces for teams that want design data in a pipeline rather than in a canvas.

Key capabilities

  • Opens and writes native Figma .fig files and Pencil .pen files, with copy and paste of nodes between applications.
  • AI-assisted design through chat, driven by 90+ tools that create and modify nodes, connecting to OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints.
  • Headless CLI published as @open-pencil/cli, with openpencil tree, find, node, info, XPath query, export, convert, and import commands.
  • Export and conversion across PNG, JPG, WEBP, SVG, .fig, and JSX, including --style tailwind, HTML with --css tailwind, and .pen to .fig conversion.
  • Components and variants: reusable components, component sets, local assets inserted as instances, and variant switching from the inspector.
  • Real-time collaboration over P2P WebRTC with no server and no account, including cursors, presence, and follow mode.
  • Image vectorization from image layers into editable vector layers through Recraft or fal.ai, plus auto layout and CSS Grid via Yoga WASM.

Who uses it and how

  • Teams holding existing .fig libraries use it to open, edit, and export those documents without an account or a hosted service.
  • Developers building custom editing surfaces embed the headless Vue SDK and its composables into their own applications.
  • AI-agent workflows use the MCP server and desktop integrations for Claude Code, Codex, and Gemini CLI to act on design files programmatically.
  • Designers working in constrained or offline environments run the Tauri desktop build or the PWA, and collaborate peer to peer instead of through a server.
  • Pipeline work relies on the CLI for document inspection, linting, token extraction, and batch export or format conversion.

Getting started

Install with brew install openpencil on macOS, download a build from the releases page, use the web app at app.openpencil.dev, or install the CLI with npm install -g @open-pencil/cli.

How it compares

Figma is the product this project positions itself against, and the contrast is licence and hosting: OpenPencil is MIT-licensed and runs locally as a desktop app or PWA, while Figma is a proprietary hosted service. Collaboration here is peer to peer over WebRTC with no server and no account, and document data stays in native .fig and .pen files on the user's machine.

When to use it — and when not to

There is no server, database, or account system to operate, since collaboration is peer to peer, which lowers the hosting burden considerably. The trade-off is maturity: the project is in active development with acknowledged rough edges, 46 open issues, and no stability guarantee, so teams that need predictable behaviour on critical projects should not adopt it yet. It is also a poor fit for anyone who wants an account-based hosted service with cloud-side document storage rather than local files.

project readme (upstream, from github) — read inline

OpenPencil

Open-source design editor. Opens .fig and .pen design files, includes built-in AI, and ships as a programmable toolkit with a headless Vue SDK for building custom editors.

Status: Active development. Usable today, with some rough edges as features evolve.

Try it online → · Download · Documentation · Roadmap · llms.txt

OpenPencil

Installation

macOS (Homebrew):

brew install openpencil

Or download from the releases page, or use the web app — no install needed.

What it does

  • Opens .fig and .pen files — read and write native Figma files, open supported Pencil documents from the app or OS file browser, copy & paste nodes between apps
  • AI builds designs — describe what you want in chat, 90+ tools create and modify nodes. Connect OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints
  • Fully programmable — headless CLI, XPath queries, Figma Plugin API via eval, MCP server for AI agents, and desktop agent integrations for Claude Code, Codex, and Gemini CLI
  • Lint, convert, and extract tokens — inspect documents, lint naming/layout/accessibility, convert between supported formats, analyze colors/typography/spacing/clusters, and extract design tokens
  • Components and variants — create reusable components, group variants into component sets, insert local assets as instances, and switch variants from the inspector
  • Image vectorization — convert image layers into editable vector layers with Recraft or fal.ai
  • Design-to-code export — export selections as JSX/Tailwind, generate token outputs, and map designs into component-oriented code workflows
  • Vue SDK for custom editors — headless components and composables for embedding OpenPencil into other apps or building workflow-specific editing surfaces. Read the SDK docs →
  • Real-time collaboration — P2P via WebRTC, no server, no account. Cursors, presence, follow mode
  • Auto layout & CSS Grid — flex and grid layout via Yoga WASM, with gap, padding, alignment, track sizing
  • ~7 MB desktop app — Tauri v2 for macOS, Windows, Linux. Also runs in the browser as a PWA

CLI

npm install -g @open-pencil/cli
# or: bun add -g @open-pencil/cli

Inspect design files

Browse node trees, search by name or type, dig into properties — all without opening the editor:

openpencil tree design.fig
openpencil find design.pen --type TEXT
openpencil node design.fig --id 1:23
openpencil info design.fig

[0] [page] "Getting started" (0:46566)
  [0] [section] "" (0:46567)
    [0] [frame] "Body" (0:46568)
      [0] [frame] "Introduction" (0:46569)
        [0] [frame] "Introduction Card" (0:46570)
          [0] [frame] "Guidance" (0:46571)

Query with XPath

Use XPath selectors to find nodes by type, attributes, and structure:

openpencil query design.fig "//FRAME"                              # All frames
openpencil query design.fig "//FRAME[@width < 300]"                # Frames under 300px
openpencil query design.fig "//TEXT[contains(@name, 'Button')]"     # Text with 'Button' in name
openpencil query design.fig "//*[@cornerRadius > 0]"               # Rounded corners
openpencil query design.fig "//SECTION//TEXT"                       # Text inside sections

Export

Render to PNG, JPG, WEBP, SVG, .fig, or JSX — or export selections/pages as .fig and convert whole documents between supported formats:

openpencil export design.fig                           # PNG
openpencil export design.fig -f jpg -s 2 -q 90        # JPG at 2x, quality 90
openpencil export design.fig -f fig --page "Page 1"   # Export a page as .fig
openpencil export design.fig -f jsx --style tailwind   # Tailwind JSX
openpencil export design.fig -f html --css tailwind    # Tailwind HTML fragment
openpencil export design.fig -f html --html standalone --assets external # HTML + assets
openpencil convert design.pen output.fig               # Convert between document formats
openpencil import page.html --css styles.css -o page.fig # HTML/CSS → editable .fig

DOM/CSS input flows through @open-pencil/dom-css, so HTML, authored CSS, and Tailwind utility CSS can become editable OpenPencil layers:

openpencil import card.html --css card.css -o card.fig
openpencil import card.html --tailwind "flex flex-col gap-3 w-80 p-6 rounded-xl bg-white" -o card.fig

<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>

Lint design files

Catch naming, layout, structure, and accessibility issues from the terminal:

openpencil lint design.fig
openpencil lint design.pen --preset strict
openpencil lint design.fig --rule color-contrast
openpencil lint design.fig --list-rules

Analyze and extract design tokens

Audit an entire design system from the terminal — find inconsistencies, extract the real palette, and spot components waiting to be extracted:

openpencil analyze colors design.fig
openpencil analyze typography design.fig
openpencil analyze spacing design.fig
openpencil analyze clusters design.fig
openpencil analyze overlaps design.fig
openpencil variables design.fig

#1d1b20  ██████████████████████████████ 17155×
#49454f  ██████████████████████████████ 9814×
#ffffff  ██████████████████████████████ 8620×
#6750a4  ██████████████████████████████ 3967×

3771× frame "container" (100% match)
     size: 40×40, structure: Frame > [Frame]

2982× instance "Checkboxes" (100% match)
     size: 48×48, structure: Instance > [Frame]

Script with Figma Plugin API

eval gives you the full Figma Plugin API. Modify the file, write it back:

openpencil eval design.fig -c "figma.currentPage.children.length"
openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w

Control the running app

When the desktop app is running, omit the file argument — the CLI connects via RPC and operates on the live canvas. Useful for automation scripts, CI pipelines, or AI agents that need to interact with the editor:

openpencil tree                               # Inspect the live document
openpencil export -f png                      # Screenshot the current canvas
openpencil eval -c "figma.currentPage.name"   # Query the editor

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

AI & MCP

Built-in chat

Press ⌘J to open the AI assistant. It has 100+ tools that can create shapes, set fills and strokes, manage auto-layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. Bring your own API key for OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints. No backend, no account.

Not every provider works in the browser, and not every model streams tool calls correctly. See BYOK provider & model compatibility for measured results — contributions welcome.

Coding agents (desktop)

Use Claude Code, Codex, or Gemini CLI directly in the chat panel. The agent connects to the editor's MCP server and uses all 100+ design tools. Requires the desktop app and the agent CLI installed locally.

Pi is also available as an optional AI SDK Harness provider. Install its companion CLI with npm install -g @open-pencil/harness, then add a Pi model profile in Settings → AI & agents. The companion is installed separately so OpenPencil does not bundle a JavaScript runtime for users who do not enable Harness providers.

Setup (Claude Code):

  1. Install the ACP adapter: npm install -g @agentclientprotocol/claude-agent-acp
  2. Add MCP permission to ~/.claude/settings.json:
    {
  "permissions": {
    "allow": ["mcp__open-pencil__*"]
  }
}
  3. Open the desktop app → CtrlJ → select Claude Code from the provider dropdown

MCP server

Connect Claude Code, Cursor, Windsurf, or any MCP client to inspect, modify, and export design documents headlessly. 100+ tools. Full docs →

Stdio (Claude Code, Cursor, Windsurf):

npm install -g @open-pencil/mcp
claude mcp add --scope user open-pencil -- openpencil-mcp

For other MCP clients:

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

HTTP (scripts, CI):

openpencil-mcp-http   # Unix socket on macOS/L

readme truncated — read the full docs on github

Frequently asked questions

Is OpenPencil free to use?

OpenPencil is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does OpenPencil do?

Design editor that opens Figma files, runs AI, and stays local

What is OpenPencil written in?

OpenPencil is primarily written in TypeScript. Its source is publicly available at https://github.com/open-pencil/open-pencil, and it has 8,357 GitHub stars.