Update README and docs for new formats and SDK
This commit is contained in:
Danila Poyarkov
parent
7d1e7cb86e
commit
890fb4f6d5
28
README.md
28
README.md
|
|
@ -1,8 +1,10 @@
|
|||
# OpenPencil
|
||||
|
||||
Open-source design editor. Opens Figma files, built-in AI, fully programmable, and designed as a toolkit for building custom editors.
|
||||
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. Not ready for production use.
|
||||
>
|
||||
> There is another open-source project with the same name — [OpenPencil by ZSeven-W](https://github.com/ZSeven-W/openpencil), focused on AI-native design-to-code workflows. This project focuses on Figma-compatible visual design with real-time collaboration.
|
||||
|
||||
**[Try it online →](https://app.openpencil.dev/demo)** · [Download](https://github.com/open-pencil/open-pencil/releases/latest) · [Documentation](https://openpencil.dev)
|
||||
|
||||
|
|
@ -20,10 +22,10 @@ Or download from the [releases page](https://github.com/open-pencil/open-pencil/
|
|||
|
||||
## What it does
|
||||
|
||||
- **Opens .fig files** — read and write native Figma files, copy & paste nodes between apps
|
||||
- **AI builds designs** — describe what you want in chat, 90+ tools create and modify nodes. Connect Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint
|
||||
- **Opens `.fig` and `.pen` files** — read and write native Figma files, open Pencil documents, 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, Figma Plugin API via `eval`, MCP server for AI agents
|
||||
- **Toolkit for custom editors** — Vue SDK primitives and composables for embedding OpenPencil into other apps or building workflow-specific editing surfaces
|
||||
- **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 →](https://openpencil.dev/programmable/sdk/)
|
||||
- **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
|
||||
- **Tailwind CSS export** — export any selection as HTML with Tailwind v4 utility classes
|
||||
|
|
@ -35,13 +37,13 @@ Or download from the [releases page](https://github.com/open-pencil/open-pencil/
|
|||
bun add -g @open-pencil/cli
|
||||
```
|
||||
|
||||
### Inspect .fig files
|
||||
### Inspect design files
|
||||
|
||||
Browse node trees, search by name or type, dig into properties — all without opening the editor:
|
||||
|
||||
```sh
|
||||
open-pencil tree design.fig
|
||||
open-pencil find design.fig --type TEXT
|
||||
open-pencil find design.pen --type TEXT
|
||||
open-pencil node design.fig --id 1:23
|
||||
open-pencil info design.fig
|
||||
```
|
||||
|
|
@ -69,12 +71,14 @@ open-pencil query design.fig "//SECTION//TEXT" # Text insi
|
|||
|
||||
### Export
|
||||
|
||||
Render to PNG, JPG, WEBP, SVG — or export as JSX with Tailwind utility classes:
|
||||
Render to PNG, JPG, WEBP, SVG, `.fig`, or JSX — or export selections/pages as `.fig` and convert whole documents between supported formats:
|
||||
|
||||
```sh
|
||||
open-pencil export design.fig # PNG
|
||||
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2x, quality 90
|
||||
open-pencil export design.fig -f jsx --style tailwind # Tailwind JSX
|
||||
open-pencil export design.fig # PNG
|
||||
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2x, quality 90
|
||||
open-pencil export design.fig -f fig --page "Page 1" # Export a page as .fig
|
||||
open-pencil export design.fig -f jsx --style tailwind # Tailwind JSX
|
||||
open-pencil convert design.pen output.fig # Convert between document formats
|
||||
```
|
||||
|
||||
```html
|
||||
|
|
@ -133,7 +137,7 @@ All commands support `--json` for machine-readable output.
|
|||
|
||||
### Built-in chat
|
||||
|
||||
Press <kbd>⌘</kbd><kbd>J</kbd> to open the AI assistant. It has 87 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 OpenRouter API key — no backend, no account.
|
||||
Press <kbd>⌘</kbd><kbd>J</kbd> to open the AI assistant. It has 90+ 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.
|
||||
|
||||
### Coding agents (desktop)
|
||||
|
||||
|
|
@ -154,7 +158,7 @@ Use Claude Code, Codex, or Gemini CLI directly in the chat panel. The agent conn
|
|||
|
||||
### MCP server
|
||||
|
||||
Connect Claude Code, Cursor, Windsurf, or any MCP client to read and write `.fig` files headlessly. 90 tools (87 core + 3 file management). [Full docs →](https://openpencil.dev/reference/mcp-tools)
|
||||
Connect Claude Code, Cursor, Windsurf, or any MCP client to inspect, modify, and export design documents headlessly. 90 tools (87 core + 3 file management). [Full docs →](https://openpencil.dev/reference/mcp-tools)
|
||||
|
||||
**Stdio** (Claude Code, Cursor, Windsurf):
|
||||
|
||||
|
|
|
|||
|
|
@ -18,10 +18,12 @@ Press <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>) to open the AI
|
|||
|
||||
| Provider | Models | Setup |
|
||||
|----------|--------|-------|
|
||||
| **OpenRouter** | Claude, GPT-4, Gemini, DeepSeek, and others | API key from [openrouter.ai](https://openrouter.ai) |
|
||||
| **Anthropic** | Claude 3.5 Sonnet, Claude 3 Opus, etc. | API key from [console.anthropic.com](https://console.anthropic.com) |
|
||||
| **OpenAI** | GPT-4o, GPT-4, etc. | API key from [platform.openai.com](https://platform.openai.com) |
|
||||
| **Google AI** | Gemini 2.0, Gemini 1.5, etc. | API key from [aistudio.google.dev](https://aistudio.google.dev) |
|
||||
| **OpenRouter** | Claude, GPT, Gemini, DeepSeek, Qwen, and others | API key from [openrouter.ai](https://openrouter.ai) |
|
||||
| **Anthropic** | Claude Sonnet 4.6, Claude Opus 4.6 | API key from [console.anthropic.com](https://console.anthropic.com) |
|
||||
| **OpenAI** | GPT-5.3 Codex, GPT-4.1, o3, o4-mini | API key from [platform.openai.com](https://platform.openai.com) |
|
||||
| **Google AI** | Gemini 3.1 Pro, Gemini 3 Flash | API key from [aistudio.google.dev](https://aistudio.google.dev) |
|
||||
| **Z.ai** | GLM-5.1, GLM-5, GLM-4.7, GLM-4.5 family | API key from [docs.z.ai](https://docs.z.ai/devpack/quick-start) |
|
||||
| **MiniMax** | MiniMax M2.7, M2.7-highspeed, M2.5, M2.1 | API key from [platform.minimax.io](https://platform.minimax.io/user-center/basic-information/interface-key) |
|
||||
| **OpenAI-compatible** | Any endpoint with OpenAI API format | Custom base URL + key. Supports Completions and Responses API toggle. |
|
||||
| **Anthropic-compatible** | Any endpoint with Anthropic API format | Custom base URL + key |
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
---
|
||||
title: Exporting
|
||||
description: Render .fig files to PNG, JPG, WEBP, SVG, or JSX with Tailwind classes.
|
||||
description: Export document content to PNG, JPG, WEBP, SVG, `.fig`, or JSX, and convert between document formats.
|
||||
---
|
||||
|
||||
# Exporting
|
||||
|
||||
Export designs from the terminal — raster images, vectors, or JSX code.
|
||||
Export designs from the terminal — raster images, vectors, `.fig` subsets, or JSX code.
|
||||
|
||||
## Image Export
|
||||
|
||||
```sh
|
||||
open-pencil export design.fig # PNG (default)
|
||||
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2×, quality 90
|
||||
open-pencil export design.fig # PNG (default)
|
||||
open-pencil export design.fig -f jpg -s 2 -q 90 # JPG at 2×, quality 90
|
||||
open-pencil export design.fig -f webp -s 3 # WEBP at 3×
|
||||
open-pencil export design.fig -f svg # SVG vector
|
||||
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
|
||||
```
|
||||
|
||||
Options:
|
||||
|
|
|
|||
|
|
@ -55,12 +55,15 @@ Figma's schema uses non-contiguous field IDs (e.g. 1, 2, 5, 10 with gaps). The k
|
|||
|
||||
## Supported Formats
|
||||
|
||||
| Format | Import | Export |
|
||||
|--------|--------|--------|
|
||||
| `.fig` (Figma) | ✅ | ✅ |
|
||||
| `.svg` | Planned | Planned |
|
||||
| `.png` | Planned | Planned |
|
||||
| `.pdf` | — | Planned |
|
||||
| Format | Open / Read | Save / Write | Export |
|
||||
|--------|-------------|--------------|--------|
|
||||
| `.fig` (Figma) | ✅ | ✅ | ✅ |
|
||||
| `.pen` (Pencil) | ✅ | — | — |
|
||||
| `.png` | — | — | ✅ |
|
||||
| `.jpg` | — | — | ✅ |
|
||||
| `.webp` | — | — | ✅ |
|
||||
| `.svg` | — | — | ✅ |
|
||||
| `.jsx` | — | — | ✅ |
|
||||
|
||||
## Clipboard Format
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
---
|
||||
title: Exporting
|
||||
description: Exporting images (PNG, JPG, WEBP) and saving/opening .fig files in OpenPencil.
|
||||
description: Export images, SVG, and .fig subsets, and open .fig or .pen documents in OpenPencil.
|
||||
---
|
||||
|
||||
# Exporting
|
||||
|
||||
Export individual nodes as images, or save and open entire documents as .fig files.
|
||||
Export individual nodes as images or `.fig` subsets, and open full `.fig` or `.pen` documents.
|
||||
|
||||
## Image Export
|
||||
|
||||
Select a node and use the Export section in the properties panel.
|
||||
|
|
@ -13,7 +14,7 @@ Select a node and use the Export section in the properties panel.
|
|||
### Export Settings
|
||||
|
||||
- **Scale** — 0.5×, 0.75×, 1×, 1.5×, 2×, 3×, or 4× (hidden for SVG — vectors are resolution-independent)
|
||||
- **Format** — PNG (transparent background), JPG (white background), WEBP (transparent background), SVG (vector)
|
||||
- **Format** — PNG (transparent background), JPG (white background), WEBP (transparent background), SVG (vector), `.fig` (native document subset)
|
||||
|
||||
You can add multiple export settings to export the same node at different scales or formats in one go. A live preview with a checkerboard background shows what will be exported.
|
||||
|
||||
|
|
@ -53,7 +54,7 @@ OpenPencil uses the .fig format for full documents — the same binary format as
|
|||
|--------|-----|-----------------|
|
||||
| Open file | <kbd>⌘</kbd><kbd>O</kbd> | <kbd>Ctrl</kbd> + <kbd>O</kbd> |
|
||||
|
||||
A file picker dialog opens, filtered for .fig files. On the desktop app, this uses the native OS dialog.
|
||||
A file picker dialog opens, filtered for `.fig` and `.pen` files. On the desktop app, this uses the native OS dialog.
|
||||
|
||||
### Saving Files
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue