프레임워크 중립적인 웹 컴포넌트 기반 캔버스 라이브러리로 필수적인 편집 기능을 제공합니다.
Canvas-Kit의 모든 기능을 확인해보세요: https://iyulab.github.io/canvas-kit
- 🎨 Essential Elements - Rectangle, Circle, Text, Image, Drawing
- 🔄 History Management - Undo/Redo system (Designer only)
- 🎯 Multi-Selection - Select and manipulate multiple elements
- 🖱️ Interactive Controls - Drag, resize, rotate with visual handles
- 📱 Touch Support - Mobile and tablet optimized
- 🌐 Framework Agnostic - Works with any framework or vanilla JS
- 🔧 TypeScript Ready - Full type safety
- ⚡ High Performance - Powered by Konva.js and HTML rendering
| Package | Purpose | Bundle Size | Use Cases |
|---|---|---|---|
| @canvas-kit/core | Data processing engine | ~50KB | Server-side, data conversion, custom renderers |
| @canvas-kit/designer | Complete editor UI | ~200KB | Design tools, graphic editors |
| @canvas-kit/viewer | Lightweight HTML viewer | ~80KB | Website embeds, mobile viewers |
npm install @canvas-kit/designer<canvas-designer width="800" height="600"></canvas-designer>npm install @canvas-kit/viewer<canvas-viewer src="./design.json" width="800" height="600"></canvas-viewer>npm install @canvas-kit/core- Design Tools - Online graphics editors and creative apps
- Diagramming - Flowcharts, wireframes, technical diagrams
- Educational Apps - Interactive learning tools
- Content Creation - Social media graphics, marketing materials
- Prototyping - Quick mockups and design validation
- Presentations - Interactive slide content
3-Package System:
- Core - UI-independent data engine
- Designer - Full editing environment with Konva.js
- Viewer - Lightweight HTML renderer
Built on Modern Standards:
- Web Components for maximum compatibility
- TypeScript for development safety
- Event-driven architecture for clean communication
Works seamlessly with any framework:
<!-- Vanilla JS -->
<canvas-designer></canvas-designer>
<!-- React -->
<canvas-designer ref={canvasRef} />
<!-- Vue -->
<canvas-designer ref="canvas" />
<!-- Angular -->
<canvas-designer #canvas></canvas-designer>- Architecture Guide - System design and principles
- API Reference - Complete API documentation
- Examples - Usage examples and demos
# Install dependencies
npm install
# Start development
npm run dev
# Run tests
npm test
# Build packages
npm run build- Bundle Sizes: Optimized for tree-shaking
- Rendering: Hardware-accelerated canvas and CSS
- Memory: Efficient element management
- Mobile: Touch-optimized interactions
- Simplicity - Easy to learn and integrate
- Performance - Smooth interactions at scale
- Flexibility - Extensible for custom needs
- Standards - Built on web standards for longevity