vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-05-31 19:04:29 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
8 commits 3 branches 23 tags 44 MiB
TypeScript 99.3%
JavaScript 0.5%
Shell 0.1%
Find a file
Kayshen-X 515801ce26 docs: update CLAUDE.md with UI component design tokens and Git commit guidelines 
Add section on using shadcn/ui design tokens for UI components and establish guidelines for Git commit messages following the Conventional Commits format. Include details on commit types, scopes, and rules for writing clear commit messages.
2026-02-18 22:35:17 +08:00
.vscode Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
public Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
server/api/ai feat(ai): integrate AI chat and design generation 2026-02-18 21:49:41 +08:00
src refactor: rename PascalCase files to kebab-case 2026-02-18 22:35:17 +08:00
.cta.json Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
.gitignore Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
bun.lock feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
CLAUDE.md docs: update CLAUDE.md with UI component design tokens and Git commit guidelines 2026-02-18 22:35:17 +08:00
components.json feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
package.json feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
README.md feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
tsconfig.json Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
vite.config.ts feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00

README.md

OpenPencil

Open-source vector design tool with a Design-as-Code philosophy. An alternative to Pencil.dev.

Features

  • Canvas: Infinite canvas with pan (Space+drag / middle mouse / Hand tool) and zoom (scroll wheel), smart guides & snapping
  • Drawing tools: Rectangle, Ellipse, Line, Frame, Text
  • Property editing: Position, size, rotation, fill (solid + gradient), stroke, corner radius, opacity, effects (shadow, blur)
  • Layer panel: Tree view, drag reorder, visibility toggle, lock, context menu, selection sync, rename
  • Undo/Redo: Full history with batched drag operations (Cmd+Z / Cmd+Shift+Z)
  • Clipboard: Copy, cut, paste, duplicate (Cmd+C/X/V/D)
  • Grouping: Group / ungroup selected elements (Cmd+G / Cmd+Shift+G)
  • File operations: Save/open .pen files (JSON-based, Git-friendly), auto-save support
  • Export: PNG and SVG export with scale options (Cmd+Shift+E)
  • Code generation: Generate React+Tailwind or HTML+CSS code from designs (Cmd+Shift+C)
  • AI assistant: Built-in AI chat panel for design assistance (Cmd+J)
  • Keyboard shortcuts: Tool keys (V/R/O/L/T/F/H), Delete, arrow nudge, bracket keys for z-order, Cmd+A select all

Tech Stack

Getting Started

bun install
bun --bun run dev

Open http://localhost:3000 and click "New Design" to enter the editor.

Scripts

Command Description
bun --bun run dev Start dev server on port 3000
bun --bun run build Production build
bun --bun run preview Preview production build
bun --bun run test Run tests (Vitest)

Project Structure

src/
  canvas/          # Fabric.js canvas engine, drawing, sync, guides
  components/
    editor/        # Editor layout, toolbar
    panels/        # Layer panel, property panel, AI chat, code panel
    shared/        # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
  hooks/           # Keyboard shortcuts
  services/
    ai/            # AI chat service, prompts, design generation
    codegen/       # React and HTML code generators
  stores/          # Zustand stores (canvas, document, history, AI)
  types/           # PenDocument/PenNode types, style types
  utils/           # File operations, export, node clone, syntax highlight
  routes/          # TanStack Router pages (/, /editor)
server/
  api/             # Server-side API endpoints

Roadmap

  • Component system (reusable components with instances & overrides)
  • Design variables/tokens with CSS sync
  • Path / pen tool
  • Boolean operations (union, subtract, intersect)
  • Multi-page support
  • Collaborative editing

License

MIT