Overview
What ScribbleSVG is and how the packages fit together
ScribbleSVG is a lightweight, low-dependency SVG 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.
Size
Measured client entry points (esbuild minify, React / ReactDOM external, CSS not counted):
| Entry | Minified | Gzip |
|---|---|---|
@scribblesvg/react-utils/editor | ~72 KB | ~24 KB |
@scribblesvg/react-utils/renderer | ~33 KB | ~11 KB |
@scribblesvg/core | ~33 KB | ~11 KB |
Import the editor and renderer from those subpaths so hosts only pull what they use. React is a peer dependency (not included above). Runtime hard deps are intentionally small: roughjs in core for the scribble look; react-utils depends only on core.
Packages
| Package | Description |
|---|---|
| @scribblesvg/core | Types, geometry, validation, and rendering primitives |
| @scribblesvg/react-utils | React 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.