VectorLab

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

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

npm install vectorlab-editor
# or
yarn add vectorlab-editor
# or
pnpm add vectorlab-editor

Quick Start

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

function App() {
  return <VectorLab />;
}

export default App;

Requirements

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

Tailwind CSS Setup

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

npm install tailwindcss @tailwindcss/vite

Exports

Main Component

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

Store Hook (for external control)

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

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

  // Control the editor programmatically
}

Individual Components

For advanced customization, you can import individual components:

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

Types

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:

.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

# 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

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