vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14: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.
12 commits 3 branches 23 tags 45 MiB
TypeScript 99.3%
JavaScript 0.5%
Shell 0.1%
Find a file
Kayshen-X f85bbe69dc feat(panels): enhance UI components with SectionHeader and improve layout 
Introduce a new SectionHeader component for consistent section titles and action buttons across panels. Refactor existing sections (Appearance, Effects, Fill, Stroke, Text) to utilize SectionHeader, improving visual hierarchy and user experience. Update styles for better alignment and spacing in various input components, ensuring a cohesive design throughout the property panel.
2026-02-18 23:34:23 +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): add model selection and fetching capabilities 2026-02-18 22:35:17 +08:00
src feat(panels): enhance UI components with SectionHeader and improve layout 2026-02-18 23:34:23 +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 chore: update documentation and add MIT License 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
LICENSE chore: update documentation and add MIT License 2026-02-18 22:35:17 +08:00
package.json feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
README.md chore: update documentation and add MIT License 2026-02-18 22:35:17 +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), supports Anthropic API or local Claude Code
  • 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.

AI Configuration

The AI assistant works in two modes:

  • Anthropic API: Set ANTHROPIC_API_KEY in .env
  • Local Claude Code: No config needed — uses Claude Agent SDK with OAuth login as fallback

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, status bar
    panels/          # Layer panel, property panel, AI chat, code panel
    shared/          # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
    ui/              # shadcn/ui primitives (Button, Select, Slider, etc.)
  hooks/             # Keyboard shortcuts
  lib/               # Utility functions (cn class merging)
  services/
    ai/              # AI chat service, prompts, design generation
    codegen/         # React+Tailwind and HTML+CSS code generators
  stores/            # Zustand stores (canvas, document, history, AI)
  types/             # PenDocument/PenNode types, style types, variables
  utils/             # File operations, export, node clone, syntax highlight
  routes/            # TanStack Router pages (/, /editor)
server/
  api/ai/            # Nitro API: streaming chat, AI generation

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