Sebastian Krüger
4b01e92b88
Complete canvas rendering infrastructure and state management: **Type System (types/)** - Layer interface with blend modes, opacity, visibility - Canvas state with zoom, pan, grid, rulers - Tool types and settings interfaces - Selection and pointer state types **State Management (store/)** - Layer store: CRUD operations, reordering, merging, flattening - Canvas store: zoom (0.1x-10x), pan, grid, rulers, coordinate conversion - Tool store: active tool, brush settings (size, opacity, hardness, flow) - Full Zustand integration with selectors **Utilities (lib/)** - Canvas utils: create, clone, resize, load images, draw grid/checkerboard - General utils: cn, clamp, lerp, distance, snap to grid, debounce, throttle - Image data handling with error safety **Components** - CanvasWrapper: Multi-layer rendering with transformations - Checkerboard transparency background - Layer compositing with blend modes and opacity - Grid overlay support - Selection visualization - Mouse wheel zoom (Ctrl+scroll) - Middle-click or Shift+click panning - LayersPanel: Interactive layer management - Visibility toggle with eye icon - Active layer selection - Opacity display - Delete with confirmation - Sorted by z-order - EditorLayout: Full editor interface - Top toolbar with zoom controls (±, fit to screen, percentage) - Canvas area with full viewport - Right sidebar for layers panel - "New Layer" button with auto-naming **Features Implemented** ✓ Multi-layer canvas with proper z-ordering ✓ Layer visibility, opacity, blend modes ✓ Zoom: 10%-1000% with Ctrl+wheel ✓ Pan: Middle-click or Shift+drag ✓ Grid overlay (toggleable) ✓ Selection rendering ✓ Background color support ✓ Create/delete/duplicate layers ✓ Layer merging and flattening **Performance** - Dev server: 451ms startup - Efficient canvas rendering with transformations - Debounced/throttled event handlers ready - Memory-safe image data operations Ready for Phase 3: History & Undo System 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Paint UI
A modern, browser-based image editor built with Next.js 16 and Tailwind CSS 4. Inspired by miniPaint, reimagined for the modern web.
Features (Planned)
- 🎨 Multi-layer Canvas - Professional layer system with blend modes
- 🖌️ Drawing Tools - Pencil, brush, eraser, fill, and selection tools
- ✨ Image Effects - 50+ filters and effects (blur, sharpen, color adjustments)
- 📝 Text Tool - Add text with web fonts
- 🔄 Undo/Redo - Full history system
- 💾 File Support - Open/save PNG, JPG, WEBP, GIF, and project files
- 🎭 Dark Mode - Beautiful dark and light themes
- ⌨️ Keyboard Shortcuts - Power user friendly
- 📱 Responsive - Works on desktop, tablet, and mobile
Tech Stack
- Framework: Next.js 16 (App Router)
- UI: React 19 + TypeScript
- Styling: Tailwind CSS 4
- Components: Radix UI / Shadcn
- State: Zustand
- Canvas: HTML5 Canvas API + Web Workers
Getting Started
Prerequisites
- Node.js 20+
- pnpm 9+
Installation
# Clone repository
git clone ssh://git@dev.pivoine.art:2222/valknar/paint-ui.git
cd paint-ui
# Install dependencies
pnpm install
# Run development server
pnpm dev
Open http://localhost:3000 in your browser.
Documentation
- Implementation Plan - Detailed roadmap and architecture
- Contributing Guide - How to contribute (coming soon)
- API Documentation - Plugin API reference (coming soon)
Inspiration
This project is inspired by miniPaint, an excellent open-source image editor. While paint-ui is a complete rewrite with modern technologies, we aim to preserve the powerful capabilities that make miniPaint great.
License
MIT
Author
valknar