VectorLab

A powerful React-based vector graphics editor component built with Paper.js. Create, edit, and manipulate vector shapes with an intuitive interface.

!VectorLab
!License

Features

- 🎨 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

Installation

``bash
npm install vectorlab-editor


or

yarn add vectorlab-editor

or

pnpm add vectorlab-editor
`

Quick Start

`tsx
import { VectorLab } from "vectorlab-editor";
import "vectorlab-editor/styles.css";

function App() {
return ;
}

export default App;
`

Requirements

- React 18.0.0 or higher
- Tailwind CSS 4.0 or higher (for styling)

$3

VectorLab uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project:

`bash
npm install tailwindcss @tailwindcss/vite
`

Exports

$3

`tsx
import { VectorLab } from "@kundan/vectorlab";
`

$3

`tsx
import { useEditorStore } from "@kundan/vectorlab";

function MyComponent() {
const { selectedTool, setSelectedTool, elements, zoom, setZoom } =
useEditorStore();

// Control the editor programmatically
}
`

$3

For advanced customization, you can import individual components:

`tsx
import {
Canvas,
ToolsSidebar,
BooleanToolbar,
PropertiesPanel,
TopBar,
} from "@kundan/vectorlab";
`

$3

`tsx
import type { ShapeType, EditorElement } from "@kundan/vectorlab";
`

Keyboard Shortcuts

| 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 |

Styling

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);
/ ... /
}
`

Development

`bash


Install dependencies

npm install

Start development server

npm run dev

Build library

npm run build:lib

Build for production (app mode)

npm run build
`

Publishing

`bash


Patch release (0.0.x)

npm run release:patch

Minor release (0.x.0)

npm run release:minor

Major release (x.0.0)

npm run release:major
``

License

MIT © Kundan

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.