ScribbleSVG

Overview

What ScribbleSVG is and how the packages fit together

ScribbleSVG is a lightweight, SVG-based toolkit for basic diagrams and sketches with a hand-drawn scribble style. Diagrams are a serializable DiagramDocument — save as JSON, load later, and strokes stay consistent via per-shape seeds.

Packages

PackageDescription
@scribblesvg/coreTypes, geometry, validation, and rendering primitives
@scribblesvg/react-utilsReact editor (DiagramCanvas) and read-only view (DiagramRenderer)

Canvas & renderer

DiagramCanvas is the interactive editor: pan, zoom, draw shapes, connect arrows, and edit text.

DiagramRenderer is a read-only view that turns the same document into SVG — useful anywhere you need to display a diagram without the editor chrome.

Both work from the same document model. Each shape carries a seed so its hand-drawn strokes stay consistent across sessions and surfaces.

Where to go next

On this page