mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

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

2 KiB

Raw Blame History

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

Framework: TanStack Start (React 19, SSR, file-based routing)
Canvas: Fabric.js v7
State: Zustand v5
Styling: Tailwind CSS v4
Icons: Lucide React
Runtime: Bun
Build: Vite 7

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

2 KiB Raw Blame History