A React-based vector graphics editor component built with Paper.js
npm install vectorlab-editorA powerful React-based vector graphics editor component built with Paper.js. Create, edit, and manipulate vector shapes with an intuitive interface.
- đ¨ Shape Tools - Rectangle, Circle, Ellipse, Triangle, Polygon, Star, Line, Arc
- âī¸ Path Drawing - Create custom paths with bezier curve support
- đ§ Node Editing - Fine-tune paths by manipulating individual nodes and handles
- ⥠Boolean Operations - Union, Subtract, Intersect, Exclude shapes
- đąī¸ Selection Tools - Single and multi-select with intuitive controls
- đ Properties Panel - Customize fill, stroke, dimensions, and more
- â¨ī¸ Keyboard Shortcuts - Efficient workflow with common shortcuts
- đ Zoom & Pan - Navigate large canvases with ease
- âŠī¸ Undo/Redo - Full history support
- đ Themes - Dark and Light theme support
``bash`
npm install vectorlab-editoror
yarn add vectorlab-editoror
pnpm add vectorlab-editor
`tsx
import { VectorLab } from "vectorlab-editor";
import "vectorlab-editor/styles.css";
function App() {
return
}
export default App;
`
- React 18.0.0 or higher
- Tailwind CSS 4.0 or higher (for styling)
VectorLab uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project:
`bash`
npm install tailwindcss @tailwindcss/vite
`tsx`
import { VectorLab } from "@kundan/vectorlab";
`tsx
import { useEditorStore } from "@kundan/vectorlab";
function MyComponent() {
const { selectedTool, setSelectedTool, elements, zoom, setZoom } =
useEditorStore();
// Control the editor programmatically
}
`
For advanced customization, you can import individual components:
`tsx`
import {
Canvas,
ToolsSidebar,
BooleanToolbar,
PropertiesPanel,
TopBar,
} from "@kundan/vectorlab";
`tsx`
import type { ShapeType, EditorElement } from "@kundan/vectorlab";
| Shortcut | Action |
| ---------------------- | --------------------- |
| V | Select tool |A
| | Node select tool |R
| | Rectangle tool |O
| | Circle tool |L
| | Line tool |P
| | Path tool |Delete
| / Backspace | Delete selected |Escape
| | Deselect / Cancel |Ctrl/Cmd + Z
| | Undo |Ctrl/Cmd + Shift + Z
| | Redo |Ctrl/Cmd + A
| | Select all |Ctrl/Cmd + D
| | Duplicate |Ctrl/Cmd + G
| | Group |Ctrl/Cmd + Shift + G
| | Ungroup |+
| / = | Zoom in |-
| | Zoom out |0
| | Reset zoom |Shift + Click
| | Add to selection |Alt + Drag
| | Duplicate while drag |Shift + Drag
| | Constrain proportions |
VectorLab comes with built-in dark and light themes. The component uses CSS custom properties that you can override:
`css
.vectorlab-root {
--background: oklch(0.13 0.005 270);
--foreground: oklch(0.95 0 0);
--primary: oklch(0.65 0.2 270);
/ ... more variables /
}
/ Light theme /
.vectorlab-root.light {
--background: oklch(0.98 0 0);
--foreground: oklch(0.15 0 0);
/ ... /
}
`
`bashInstall dependencies
npm install
Publishing
`bash
Patch release (0.0.x)
npm run release:patchMinor release (0.x.0)
npm run release:minorMajor release (x.0.0)
npm run release:major
``MIT Š Kundan
Contributions are welcome! Please feel free to submit a Pull Request.