Bezziator

Bezziator is a local browser SVG path editor focused on cubic Bezier geometry and Blender-style Object/Edit workflows.

The current application is a working React/Vite prototype with an app-owned path model, Paper.js canvas rendering, modal transforms, topology editing, SVG import/export, and focused handle/node tools.

Getting Started

npm install
npm run dev

The dev server binds to 0.0.0.0 so it can be opened from the local machine or another host that can reach the development environment.

Commands

• npm run dev: start the Vite dev server.
• npm run test: run the Vitest suite once.
• npm run test:watch: run Vitest in watch mode.
• npm run typecheck: run TypeScript project checks.
• npm run build: typecheck and build the production bundle.
• npm run preview: preview the production build.

Current Capabilities

• Object Mode and Edit Mode with independent selection of paths, segments, nodes, incoming handles, and outgoing handles.
• Paper.js canvas rendering with pan, zoom, page bounds, reference-image display, selected segment highlighting, selection bounds, pivot lines, and a visible 2D cursor.
• Modal Move, Scale, and Rotate for paths, segments, nodes, and handles.
• Pivot modes: Median, Bounds, Active, Individual, Page Center, and 2D Cursor.
• Proportional Move for selected anchors using connected path distance and an adjustable radius.
• Segment sub-mode for discrete click-phase Bezier segment construction.
• Node type menu for Free, Vector, Smooth, Symmetrical, and Auto-smooth nodes.
• Endpoint extension, multi-node closed extrusion, disconnected-node line extrusion, closed-path and selected-segment inset/outset with optional crossing dissolve, delete/collapse, close path, fill/join endpoints, merge nodes, and break path.
• Alignment tools for Align X/Y, Space X/Y, and Random X/Y over selected items.
• Handle utilities for matching angle, matching length, and rotating selected handles.
• Direct curve segment reshaping in Edit Mode without moving endpoint nodes.
• Exact midpoint subdivision for selected segments.
• SVG path import and export, including conversion of lines, quadratics, smooth commands, and arcs into cubic path nodes.
• Reference image loading, opacity adjustment, background adjustment mode, and non-destructive Move/Scale/Rotate transforms.
• .bezvg working-document save/open with reference image data and undo/redo history.
• Undo/redo using document snapshots.
• Hints overlay showing mode, tool, operation, pivot, cursor, selected refs, bounds, active item, zoom, and status.
• Resizable settings panel with minimum panel and workspace widths.

Interaction Summary

• Tab toggles Object/Edit Mode; Object-to-Edit activates only selected paths, or no paths when nothing is selected.
• P enters Edit Mode if needed and activates Segment sub-mode.
• G, S, and R start Move, Scale, and Rotate.
• During handle Move, G toggles original-angle length editing and Shift+G toggles original-length angle editing.
• During node Move, G toggles curve sliding and Shift+G toggles local-normal movement.
• In background adjustment mode, G, S, and R transform the reference image instead of editable geometry.
• Ctrl+S saves a .bezvg working document. Opening also accepts older .bezziator files.
• Ctrl+R starts Subdivide preview; mouse wheel adjusts the new-node count and left click confirms.
• X and Y constrain an active modal transform by axis.
• V opens the node type menu when nodes are selected.
• Shift+S opens the 2D cursor placement menu.
• Drag a visible curve segment in Edit Mode to reshape it by adjusting its segment handles.
• N toggles the hints overlay.
• E, I, F, M, B, X, and Delete cover core path topology operations in edit workflows.

See docs/SHORTCUTS.md for the complete shortcut and mouse-modifier list.

Project Structure

• src/core: pure document model, geometry, selection, handles, transforms, topology, alignment, SVG import/export, and tests.
• src/editor: reducer state, history integration, modal operation state, and viewport conversion.
• src/canvas: Paper.js rendering and canvas pointer/keyboard adapter.
• src/components: toolbar, side panel, status bar, and hints overlay.
• docs: current architecture, geometry, interaction, roadmap, and shortcuts documentation.
• docs/DESIGN_SPEC.md: design reference material and future-operation notes.

Known Limitations

• Numeric modal input is not implemented yet.
• Proportional editing currently affects Move operations for anchors, not Scale or Rotate.
• Alignment and several side-panel utilities operate on selected refs but have minimal UI affordances.
• Browser-level interaction tests are not present; coverage is concentrated in pure core modules and reducer tests.

License

Bezziator is free software licensed under the GNU General Public License, version 3 or, at your option, any later version.

Copyright (C) 2026 Richard Perry.

See LICENSE for the complete license terms.