openpencil/README.id.md

OpenPencil

Alat desain vektor open-source berbasis AI pertama di dunia.
_{Tim Agen Konkuren • Design-as-Code • Server MCP Bawaan • Kecerdasan Multi-model}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Klik gambar untuk menonton video demo}

_{The trend above is rendered with HyperWeave — an experimental SVG artifact layer for agents.  Explore →}

Mengapa OpenPencil

🎨 Prompt → Kanvas Deskripsikan UI apa pun dalam bahasa alami. Saksikan hasilnya muncul di kanvas tak terbatas secara real-time dengan animasi streaming. Modifikasi desain yang ada dengan memilih elemen dan berdialog.	🤖 Tim Agen Konkuren Orkestrator menguraikan halaman kompleks menjadi sub-tugas spasial. Beberapa agen AI bekerja pada bagian yang berbeda secara bersamaan — hero, fitur, footer — semuanya streaming secara paralel.
🧠 Kecerdasan Multi-Model Secara otomatis menyesuaikan dengan kemampuan setiap model. Claude mendapat prompt lengkap dengan thinking; GPT-4o/Gemini menonaktifkan thinking; model yang lebih kecil (MiniMax, Qwen, Llama) mendapat prompt yang disederhanakan untuk keluaran yang andal.	🔌 Server MCP Instal satu klik ke Claude Code, Codex, OpenCode, Kiro, atau Copilot CLI. Desain dari terminal Anda — baca, buat, dan modifikasi file .op melalui agen yang kompatibel dengan MCP.
📦 Design-as-Code File .op adalah JSON — mudah dibaca manusia, ramah Git, mudah dibandingkan. Variabel desain menghasilkan CSS custom properties. Ekspor kode ke React + Tailwind atau HTML + CSS.	🖥️ Berjalan di Mana Saja Aplikasi web + desktop native di macOS, Windows, dan Linux — satu inti Rust, satu binary mandiri, tanpa engine browser. Asosiasi file .op — klik dua kali untuk membuka.
⌨️ CLI — op Kontrol alat desain dari terminal Anda. op design, op insert — batch design DSL, manipulasi node. Pipe dari file atau stdin. Bekerja dengan aplikasi desktop atau web server.	🎯 Ekspor Kode Multi-Platform Ekspor dari satu file .op ke React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native. Variabel desain menjadi CSS custom properties.

Instalasi

macOS (Homebrew):

brew tap zseven-w/openpencil
brew install --cask openpencil

Windows (Scoop):

scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil
scoop install openpencil

Unduh langsung untuk Linux / Windows: GitHub Releases — .exe (Windows), .AppImage / .deb (Linux)

Nix (Linux x86_64):

nix develop
nix run .                         # jalankan aplikasi desktop
nix build .#openpencil            # web host native + bundle web CanvasKit
nix build .#op-cli                # CLI `op`
nix build .#prebuilt              # gunakan arsip desktop upstream yang sesuai
nix build .#prebuilt-cli          # gunakan arsip CLI upstream yang sesuai
nix build .#web-server            # web server native tanpa GL + bundle web
nix build .#runtime-prebuilt      # runtime desktop prebuilt + CLI `op`
nix build .#web-sdk-packages      # tarball npm untuk web SDK
nix build .#appimage              # AppImage desktop portabel

Flake menggunakan toolchain Rust yang dipatok di rust-toolchain.toml dan saat ini diterbitkan untuk x86_64-linux. Flake belum menghasilkan paket Debian; gunakan artefak rilis upstream bila memerlukan .deb. Output prebuilt menggunakan versi rilis dan hash yang dipatok di nix/release-manifest.json, terpisah dari versi source workspace. Setelah rilis diterbitkan, workflow rilis membuka PR untuk memperbarui manifest tersebut. Hingga PR digabungkan, output prebuilt tetap menggunakan rilis terdahulu; output yang dibangun dari source selalu menggunakan source yang sedang di-checkout.

CLI (op):

brew install zseven-w/openpencil/op

Atau gunakan skrip instalasi (macOS / Linux):

curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash

Untuk mengizinkan pre-release terbaru:

curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash

Windows PowerShell:

irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex

Untuk mengizinkan pre-release terbaru:

$env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex

Clone (dengan submodule)

git clone --recurse-submodules https://github.com/ZSeven-W/openpencil.git
# Sudah di-clone? Sinkronkan dahulu agar URL submodule lama mengikuti perubahan .gitmodules:
git submodule sync --recursive && git submodule update --init --recursive

Tiga submodule berada di bawah vendor/; semuanya publik dan diambil melalui HTTPS (tanpa kunci SSH): jian (framework UI GPU-Skia — widget/render/event), casement (fork winit), dan agent (agent-rs — runtime agen Rust lintas produk yang digunakan bersama oleh OP dan Zode). vendor/anthropic-agent-sdk dilacak langsung di repository dan bukan submodule.

Mulai Cepat

# Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)
bash scripts/start-web-rust.sh

Atau jalankan sebagai aplikasi desktop:

cargo run -p op-host-desktop

Prasyarat: Rust (stable) untuk membangun produk. Bun >= 1.0 dan Node.js >= 18 hanya diperlukan untuk web SDK di packages/.

Docker

Rilis Rust bertag menerbitkan satu image web host. Image TypeScript lama yang menyertakan AI CLI tidak lagi diterbitkan.

Image	Termasuk
ghcr.io/zseven-w/openpencil-web:vX.Y.Z	Rust web host, wasm bundle, dan aset CanvasKit

Web UI hanya menampilkan built-in agent profiles; alat Claude/Codex/OpenCode/Copilot CLI tidak dibundel ke dalam image Docker.

Jalankan:

VERSION="$(scripts/workspace-version.sh)"
docker run -d -p 3100:3100 "ghcr.io/zseven-w/openpencil-web:v${VERSION}"

Lalu buka http://localhost:3100/.

Build secara lokal:

docker build -f Dockerfile.web-rust -t openpencil-web-rust .
docker run -p 3100:3100 openpencil-web-rust

Desain Berbasis AI

Dari Prompt ke UI

• Teks ke desain — deskripsikan halaman, dan hasilkan di kanvas secara real-time dengan animasi streaming
• Orkestrator — menguraikan halaman kompleks menjadi sub-tugas spasial untuk pembuatan secara paralel
• Modifikasi desain — pilih elemen, lalu deskripsikan perubahan dalam bahasa alami
• Masukan visual — lampirkan tangkapan layar atau mockup sebagai referensi desain

Dukungan Multi-Agen

Agen	Pengaturan
Bawaan (9+ penyedia)	Pilih dari preset penyedia dengan pemilih wilayah — Anthropic, OpenAI, Google, DeepSeek dan lainnya
Claude Code	Tanpa konfigurasi — menggunakan Claude Agent SDK dengan OAuth lokal
Codex CLI	Hubungkan di Pengaturan Agen (Cmd+,)
OpenCode	Hubungkan di Pengaturan Agen (Cmd+,)
GitHub Copilot	copilot login lalu hubungkan di Pengaturan Agen (Cmd+,)

Profil Kemampuan Model — secara otomatis menyesuaikan prompt, mode thinking, dan timeout per tingkatan model. Model tingkat penuh (Claude) mendapat prompt lengkap; tingkat standar (GPT-4o, Gemini, DeepSeek) menonaktifkan thinking; tingkat dasar (MiniMax, Qwen, Llama, Mistral) mendapat prompt JSON bertingkat yang disederhanakan untuk keandalan maksimum.

i18n — Lokalisasi antarmuka lengkap dalam 15 bahasa: English, 简体中文, 繁體中文, 日本語, 한국어, Français, Español, Deutsch, Português, Русский, हिन्दी, Türkçe, ไทย, Tiếng Việt, Bahasa Indonesia.

Server MCP

• Server MCP bawaan (crate op-mcp) — instal satu klik ke Claude Code / Codex / OpenCode / Kiro / Copilot CLI
• Tidak memerlukan Node.js — transport stdio melalui binary desktop (--mcp <path>), ditambah endpoint HTTP langsung (127.0.0.1:<port>/mcp) dari aplikasi yang berjalan
• Otomasi desain dari terminal: baca, buat, dan modifikasi file .op melalui agen yang kompatibel dengan MCP
• Alur kerja desain berlapis — design_skeleton → design_content → design_refine untuk desain multi-bagian dengan fidelitas lebih tinggi
• Pengambilan prompt tersegmentasi — muat hanya pengetahuan desain yang Anda butuhkan (schema, layout, roles, icons, planning, dll.)
• Dukungan multi-halaman — buat, ganti nama, urutkan ulang, dan duplikasi halaman melalui alat MCP

Pembuatan Kode

• React + Tailwind CSS, HTML + CSS, CSS Variables
• Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native

CLI — op

Instal secara global dan kontrol alat desain dari terminal Anda:

brew install zseven-w/openpencil/op

op start                     # Jalankan aplikasi desktop
op start --headless --file design.op # Jalankan server headless
op design @landing.txt       # Desain batch dari file
op design @ui.js             # JavaScript sandbox dengan loop
op insert '{"type":"rectangle"}' # Sisipkan sebuah node
op import:figma design.fig   # Impor file Figma
cat design.dsl | op design - # Pipe dari stdin

Mendukung string inline, @filepath, dan stdin (-). Bekerja dengan aplikasi desktop, server web, atau server headless berbasis file. Lihat referensi perintah CLI.

LLM Skill — instal plugin OpenPencil Skill untuk mengajarkan agen AI mendesain dengan op. Jalankan op install untuk agen yang terdeteksi atau op install --target codex untuk target tertentu.

Fitur

Kanvas & Menggambar

• Kanvas tak terbatas dengan pan, zoom, panduan perataan cerdas, dan snapping
• Persegi panjang, Elips, Garis, Poligon, Pen (Bezier), Frame, Teks
• Operasi Boolean — gabungan, kurangi, irisan dengan toolbar kontekstual
• Pemilih ikon (Iconify) dan impor gambar (PNG/JPEG/SVG/WebP/GIF)
• Auto-layout — vertikal/horizontal dengan gap, padding, justify, align
• Dokumen multi-halaman dengan navigasi tab

Sistem Desain

• Variabel desain — token warna, angka, string dengan referensi $variable
• Dukungan multi-tema — beberapa sumbu, masing-masing dengan varian (Terang/Gelap, Ringkas/Nyaman)
• Sistem komponen — komponen yang dapat digunakan ulang dengan instans dan penggantian
• Sinkronisasi CSS — properti kustom yang dibuat otomatis, var(--name) dalam keluaran kode
• UIKit yang dapat digunakan ulang — impor/ekspor kit komponen dari file .pen

AI & Agen

• Prompt-ke-kanvas dengan pembuatan streaming dan dekomposisi spasial yang digerakkan orkestrator
• Tim Agen Bersamaan — beberapa desainer mengerjakan bagian yang berbeda secara paralel dengan indikator kanvas per anggota
• Alur kerja berlapis — design_skeleton → design_content → design_refine dengan prompt yang terfokus per fase
• Panduan Gaya — 50+ gaya bawaan (glassmorphism, brutalist, retro, dll.) dengan pencocokan fuzzy berbasis tag, terintegrasi ke perencanaan dan pembuatan
• Profil kemampuan multi-model — secara otomatis menyesuaikan mode berpikir, upaya, dan bentuk prompt berdasarkan tingkat model
• Runtime agen bawaan (Rust) + penyedia Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, dan Google Gemini API
• Passthrough format Anthropic untuk penyedia LLM Tiongkok — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans

Kolaborasi

• Sesi peer-to-peer terautentikasi dengan relay publik sebagai cadangan dan hub kolaborasi regional bawaan
• Bergabung dengan kode pemasangan 10 karakter bertag wilayah — tanpa akun untuk sesi LAN
• Kursor jarak jauh langsung, kolaborasi lintas akun, dan panel konflik dengan detail per suntingan serta pemutaran ulang suntingan yang dibuang
• Mode multi-tenant online untuk daemon --serve-web, terautentikasi terhadap op-hub dengan berbagi tenant lintas akun
• Login perangkat — masuk dari browser melalui daemon serve-web, dengan avatar profil dan nama pengguna di editor

Dek Presentasi

• Enam templat dek 16:9 dengan pemilih templat, ditambah perencanaan dek AI pada ukuran proyektor — satu slide per layar
• Presentasikan dek sebagai slideshow dengan kontrol presenter
• Ekspor dek sebagai PDF (satu halaman per slide), file HTML slideshow mandiri, PowerPoint yang dapat diedit (.pptx), atau komposisi video hyperframes
• Navigator rail slide; agen memvalidasi geometri board dek (aspek, luapan, pemusatan) sekaligus prompt

Templat & Web Capture

• Pusat templat scene — katalog yang dapat dijelajahi berisi 58 templat di enam scene, dibuka dari File ▸ New from template
• Pusat prompt dengan entri web, dashboard, component, dan modify serta pratinjau prompt visual
• Pusat aset — galeri responsif satu jendela penuh dengan templat aksi ganda dan impor gaya DESIGN.md
• Ekstensi web-capture Chrome — snapshot halaman web apa pun ke OpenPencil dengan penangkapan HTML / layout yang setia; snapshot dikirim ke kotak masuk akun Anda di hub, atau diunduh sebagai file .op yang siap dibuka secara offline

Integrasi Git

• Wizard clone dengan autentikasi SSH / HTTPS dan manajemen kunci SSH
• Pemilih branch — buat, beralih, hapus, merge, semua dari panel Git
• Kaskade pull / push dengan percobaan ulang autentikasi dan penanganan non-fast-forward
• Merge tiga arah mode folder dengan pelacakan status MERGE_HEAD di disk
• Panel konflik dengan kartu tiga arah per node / field, editor JSON inline, aksi massal, dan blok diff inline
• UI pengaturan remote dan kunci SSH; i18n 15 bahasa di seluruh permukaan Git

Ekspor

• Ekspor kanvas — PNG, JPEG, WEBP, PDF (Cmd+Shift+P)
• Ekspor kode — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
• Pipeline codegen MCP inkremental — codegen_plan, codegen_submit_chunk, codegen_assemble, codegen_clean

Impor Figma

• Impor file .fig dengan tata letak, fill, stroke, efek, teks, gambar, dan vektor tetap terjaga

Aplikasi Desktop

• macOS, Windows, dan Linux native — satu binary mandiri (winit + GPU Skia, tanpa Electron)
• Asosiasi file .op — klik dua kali untuk membuka, kunci instans tunggal
• Pemeriksaan pembaruan latar belakang terhadap GitHub Releases
• Menu aplikasi native dengan Simpan sebagai, Buka Terbaru, dan dialog perubahan belum tersimpan saat ditutup
• Persistensi file terbaru

Tumpukan Teknologi

Inti	Workspace Rust (crates/) — state editor, widget, host, MCP, AI, codegen
Rendering	GPU Skia di mana saja — skia-safe (GL) pada native, CanvasKit (WASM/WebGL2) di browser
Framework UI	jian — framework UI GPU-Skia murni-Rust yang di-vendor: widget, layout, event, hot reload (vendor/jian)
Windowing	winit (fork casement yang di-vendor)
Desktop	Binary native openpencil-desktop — tanpa engine browser
Web SDK	op-web-sdk + adapter React 19 / Vue 3 — viewer .op baca-saja (TypeScript)
CLI	op — kontrol terminal, batch design DSL
AI	Runtime agen Rust bawaan · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK
Lint	clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK)
Format file	.op — berbasis JSON, mudah dibaca manusia, ramah Git

Ekosistem

OpenPencil adalah bagian dari keluarga alat murni-Rust, berbasis AI dari ZSeven-W. Mereka saling melengkapi: jian merender OpenPencil, agent-rs menjalankan agennya, noema mengingat, dan zode mendesain dari terminal.

Proyek	Apa itu
Zode	Asisten koding open-source berbasis AI untuk terminal Anda — TUI Rust yang cepat (ratatui) yang membaca kode Anda, menjalankan perintah, mencari file, dan mengelola git. Menggerakkan OpenPencil melalui MCP.
agent-rs	Runtime async murni-Rust untuk merilis agen LLM — multi-penyedia, mampu memakai alat secara ujung-ke-ujung, izin terstruktur, MCP asli, tanpa unsafe. Menggerakkan runtime agen bawaan OpenPencil (vendor/agent) dan Zode.
jian	Framework UI GPU-Skia murni-Rust — widget, layout, event, dan hot reload dalam satu stack. Mengubah dokumen .op deklaratif menjadi aplikasi native yang dapat dikendalikan AI tanpa runtime JS, tanpa DOM, tanpa Electron. Framework UI OpenPencil (vendor/jian).
noema	Sistem memori local-first, non-vektor untuk agen koding. Memori tahan lama sebagai file yang dapat diperiksa, antrean tinjauan untuk entri baru, dan pengambilan leksikal (tanpa embedding) — bekerja di seluruh Zode, Codex, Claude Code, dan runtime MCP.

Mengapa Rust

OpenPencil telah ditulis ulang dari awal dalam Rust (#129). Penulisan ulang ini telah selesai — editor TypeScript + Electron dipensiunkan pada v0.7.5, dan workspace Rust di repo ini adalah produknya: satu inti native yang jauh lebih kecil dan lebih cepat, serta berjalan di lebih banyak platform dari satu basis kode.

	TypeScript + Electron (dipensiunkan, v0.7.5)	Rust (saat ini)
Runtime desktop	Electron — menyertakan Chromium + Node.js	Jendela native (winit + GPU Skia), tanpa engine browser
Jejak desktop	Runtime Chromium penuh per instalasi	Satu binary mandiri — 55.5 MB
Payload web	Bundle JS + WASM	8.2 MB wasm / 2.18 MB gzip melalui jaringan
Rendering	CanvasKit/Skia di web	Satu backend Skia berakselerasi GPU di setiap target
Memori	Jeda JavaScript GC	Tanpa GC — kepemilikan Rust, latensi yang dapat diprediksi
Basis kode	Web stack + Electron	Satu workspace Rust: editor · CLI · MCP · AI · codegen · Figma · Git
Target	Web + desktop, dua stack terpisah	Desktop (macOS/Win/Linux) · mobile (iOS/Android) · browser — satu inti

Peningkatan terukur

• Jejak kecil — seluruh aplikasi desktop adalah satu binary native 55.5 MB alih-alih engine browser terbundel ditambah runtime Node. Build web berukuran 8.2 MB mentah / 2.18 MB gzip setelah pemisahan katalog ikon (−48% melalui jaringan).
• Skalabel untuk dokumen besar — kanvas live dengan 10,000 node (auto-layout bertingkat, empat level dalam) menulis, membaca, dan mengambil snapshot layout tanpa panik dan ~0% CPU idle; snapshot layout penuh dari semua 10k node dikembalikan dalam ~0.68 dtk.
• Interaksi cepat — pan/zoom tidak lagi menyerial ulang dokumen setiap frame (satu perbaikan hot-path memotong CPU wheel-zoom dari ~69% menjadi ~0%); seret menambal scene secara inkremental, pengukuran teks di-cache, dan repaint digabungkan menjadi satu per frame.
• Satu inti, setiap layar — state editor yang sama dan backend render yang sama dikompilasi ke desktop native, mobile, dan browser melalui WASM — tanpa reimplementasi paralel yang perlu disinkronkan.
• GPU Skia di mana saja — native merender melalui skia-safe pada konteks GL; browser merender melalui CanvasKit pada WebGL2 — kode gambar yang sama, keluaran yang sama.
• Aksesibilitas native — AccessKit di macOS, Windows, dan Linux, ditambah mirror DOM di web, alih-alih mengandalkan pohon a11y browser.
• Satu workspace bertipe — host MCP, CLI, penyedia AI, pembuatan kode, impor Figma, dan integrasi Git semuanya berada dalam satu workspace Rust, dengan penjagaan rantai pasokan cargo-deny di CI.

Status: editor TypeScript dipensiunkan pada v0.7.5 dan kini hanya ada dalam riwayat git; repositori ini adalah workspace Rust. Produk Rust sedang dalam pengembangan aktif (lihat Peta Jalan di bawah).

Struktur Proyek

openpencil/
├── crates/                   Workspace Rust — produknya
│   ├── op-editor-core/       State editor `.op` (PenDocument) kanonis + EditorCommand + variabel desain
│   ├── op-editor-ui/         Widget platform-independen + fasad RenderBackend (wasm32-clean)
│   ├── op-editor-host-core/  State machine host tanpa transport, digunakan bersama semua host
│   ├── op-host-native/       Lib host native — winit + skia-safe GL (desktop + mobile)
│   ├── op-host-web/          Bundle browser — wasm32 cdylib, renderer CanvasKit
│   ├── op-host-desktop/      Binary desktop `openpencil-desktop`; juga daemon `--serve-web`
│   ├── op-host-services/     Lib daemon serve-web / MCP headless
│   ├── op-host-web-server/   Binary web-server ringan tanpa GL
│   ├── op-cli/               Alat CLI — perintah `op`
│   ├── op-mcp/               Server MCP — alat, batch design, alur kerja berlapis
│   ├── op-ai/                Penyedia AI, runtime chat, streaming
│   ├── op-ai-skills/         Engine skill prompt AI (pemuatan prompt bertahap)
│   ├── op-orchestrator/      Orkestrasi tim agen konkuren
│   ├── op-codegen/           Generator kode (React, HTML, Vue, Flutter, ...)
│   ├── op-figma/             Parser dan konverter file Figma .fig
│   ├── op-git/               Integrasi Git — clone, branch, push/pull, merge
│   └── ...                   op-opmerge / op-pen-loader / op-design-lint / op-i18n /
│                             op-config-store / op-process-io / op-acp / op-smoke / ...
├── packages/                 Workspace Web SDK (Bun)
│   ├── op-web-sdk/           SDK viewer web `.op` baca-saja (membungkus bundle wasm)
│   ├── op-web-sdk-react/     Adapter React 19
│   └── op-web-sdk-vue/       Adapter Vue 3
├── vendor/                   Subsistem yang di-vendor (git submodules)
│   ├── jian/                 Framework UI GPU-Skia — widget/render/event
│   ├── casement/             Fork winit
│   └── agent/                Runtime agen Rust lintas produk (agent-rs)
└── .githooks/                Pemeriksaan drift versi pre-commit

Pintasan Keyboard

Tombol	Aksi		Tombol	Aksi
V	Pilih		Cmd+S	Simpan
R	Persegi panjang		Cmd+Z	Batalkan
O	Elips		Cmd+Shift+Z	Ulangi
L	Garis		Cmd+C/X/V/D	Salin/Potong/Tempel/Duplikat
T	Teks		Cmd+G	Grup
F	Frame		Cmd+Shift+G	Pisahkan grup
P	Alat pen		Cmd+Shift+P	Ekspor (PNG/JPG/WEBP/PDF)
H	Hand (pan)		Cmd+Shift+C	Panel kode
Del	Hapus		Cmd+Shift+V	Panel variabel
[ / ]	Ubah urutan		Cmd+J	Chat AI
Panah	Geser 1px		Cmd+,	Pengaturan agen
Cmd+Alt+U	Union Boolean		Cmd+Alt+S	Subtract Boolean
Cmd+Alt+I	Intersect Boolean		Cmd+Shift+S	Simpan sebagai

Skrip

# Product (Rust — run from the repo root)
cargo build --workspace              # Build all crates (add --release for prod)
cargo test --workspace               # Run all tests
cargo check --workspace              # Type check
cargo clippy --workspace --all-targets -- -D warnings   # Lint
cargo fmt --all                      # Format
bash scripts/start-web-rust.sh       # Web dev server (wasm bundle + headless host)
cargo run -p op-host-desktop         # Desktop app (binary: openpencil-desktop)
cargo run -p op-cli -- <args>        # CLI (binary: op)

# Web SDK / JS tooling (run from packages/)
cd packages && bun run lint          # Lint the web SDK (oxlint); also: bun run format
cd packages && bun run generate-iconify-catalog   # Regenerate the Rust icon catalog assets

# Sinkronisasi versi (jalankan dari root repositori)
scripts/sync-version.sh                            # Sync all managed versions from root Cargo.toml
tools/check-version-sync.sh                        # Verify all managed versions match root Cargo.toml

Berkontribusi

Kontribusi sangat disambut! Lihat CLAUDE.md untuk detail arsitektur dan gaya kode.

1. Fork dan clone
2. Aktifkan pemeriksaan drift versi: git config core.hooksPath .githooks
3. Buat cabang: git checkout -b feat/my-feature
4. Jalankan pemeriksaan: cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings
5. Commit dengan Conventional Commits: feat(canvas): add rotation snapping
6. Buka PR ke main

Peta Jalan

• Variabel & token desain dengan sinkronisasi CSS
• Sistem komponen (instans & penggantian)
• Pembuatan desain AI dengan orkestrator
• Integrasi server MCP dengan alur kerja desain berlapis
• Dukungan multi-halaman
• Impor Figma .fig
• Operasi boolean (gabung, kurangi, potong)
• Profil kemampuan multi-model
• Workspace Cargo dengan crate Rust dan paket SDK web yang dapat digunakan ulang
• Editor Rust untuk desktop dan web
• Alat CLI (op) kontrol terminal
• Runtime agen Rust bawaan dengan dukungan multi-penyedia
• i18n — 15 bahasa
• SDK viewer berbasis wasm untuk JavaScript, React, dan Vue
• Style Guides dengan pencocokan berbasis tag dan alat MCP
• Agent Teams serentak dengan delegasi dan indikator kanvas
• Integrasi Git (clone, branch, push/pull, merge tiga arah mode folder)
• Ekspor kanvas (SVG / PNG / JPEG / WEBP / PDF)
• Pengeditan kolaboratif — P2P terautentikasi, relay publik, dan hub regional
• Dek presentasi — templat, presenter slideshow, dan ekspor PDF/HTML/PPTX/video
• Login perangkat dan hosting web multi-tenant online
• Ekstensi web-capture Chrome dengan impor HTML / browser-snapshot
• Sistem plugin

Kontributor

Sponsor

OpenPencil gratis dan open source. Pengembangan didanai oleh orang-orang yang merasa terbantu — terima kasih telah menjaga kanvas tetap terbuka.

Terima kasih kepada MrQyun — ingin nama Anda muncul di sini? Jadi sponsor →

Komunitas

Bergabung dengan Discord kami — Ajukan pertanyaan, bagikan desain, sarankan fitur.

Komunitas yang diakui: LINUX DO

Library pihak ketiga hasil fork

Kami berterima kasih kepada para pengelola upstream yang karyanya menjadi fondasi OpenPencil. Salinan ini dipelihara hanya untuk kebutuhan integrasi khusus OpenPencil:

• casement — fork dari winit.
• anthropic-agent-sdk — di-vendor dari bartolli/anthropic-agent-sdk dan dipelihara sebagai fork lokal.

Setiap proyek tetap tunduk pada lisensi upstream masing-masing.

Penilaian

Lisensi

MIT — Copyright (c) 2026 ZSeven-W