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.
1 commit 3 branches 23 tags 44 MiB
TypeScript 99.3%
JavaScript 0.5%
Shell 0.1%
Find a file
Kayshen-X c009ab7925 Initialize OpenPencil project with essential files and configurations 
- Added .cta.json for project settings including TypeScript, Tailwind, and Bun as package manager.
- Created .gitignore to exclude common build and environment files.
- Introduced bun.lock for dependency management.
- Added CLAUDE.md for guidance on using Claude Code with the project.
- Set up package.json with scripts for development, build, and testing.
- Created README.md outlining project features, tech stack, and getting started instructions.
- Configured TypeScript with tsconfig.json for strict type checking.
- Established Vite configuration in vite.config.ts for project bundling.
- Added VSCode settings to exclude generated files from linting.
- Included public assets such as favicon and logos.
- Implemented initial routing structure in src/router.tsx and generated route tree in src/routeTree.gen.ts.
- Developed canvas functionality with multiple files for object management and event handling in src/canvas.
- Styled the application using Tailwind CSS in src/styles.css.
2026-02-17 21:14:16 +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
src Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +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 Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
CLAUDE.md Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
package.json Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
README.md Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
tsconfig.json Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
vite.config.ts Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00

README.md

OpenPencil

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

Features

  • Infinite canvas with pan (Space+drag / middle mouse / Hand tool) and zoom (scroll wheel)
  • Drawing tools: Rectangle, Ellipse, Line, Frame, Text
  • Real-time property editing: position, size, rotation, fill, stroke, corner radius, opacity
  • Layer panel with tree view, selection sync, rename
  • Keyboard shortcuts (V/R/O/L/T/F/H, Delete, arrow keys, bracket keys for z-order)

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
  components/
    editor/        # Editor layout, toolbar
    panels/        # Layer panel, property panel sections
    shared/        # Reusable UI (ColorPicker, NumberInput, etc.)
  hooks/           # Keyboard shortcuts
  stores/          # Zustand stores (canvas-store, document-store)
  types/           # PenDocument/PenNode types, style types
  routes/          # TanStack Router pages (/, /editor)

Roadmap

  • .pen file save/load (JSON-based, Git-friendly)
  • Undo/redo
  • Component system (reusable components with instances & overrides)
  • Design variables/tokens with CSS sync
  • Code generation (React/HTML/Tailwind)

License

MIT