SoftwareOSS

ScribbleSVG

Hand-drawn diagramming toolkit

What

A featherlight diagramming toolkit that renders hand-drawn-style SVGs — a TypeScript core plus React utilities for an infinite canvas and a drop-in renderer.

Why

I plan and reason systems by drawing. I wanted something with fewer dependencies than the usual options, and a lighter base for a diagram editor built on existing browser SVG primitives.

Where

GitHubcorereact-utilsPlaygroundDocs

Gallery

Export JSONExport SVG
100%

Start drawing on the lightweight canvas.

Site shell
Drawing app chrome: scribble wordmark header, export actions, empty-canvas hero.
100%
Editor workspace
Primary editor surface with toolbar, history, zoom, and a selected shape.

Technicals

Layered SVG on a simple state-driven canvas — undo/redo, multi-select, and custom SVG icon imports. Core ships with a single runtime dependency; the React layer peers on React and depends on the core.

Upcoming

  • Bring-your-own fonts
  • Opt-in AI text-to-diagram agent on the playground
  • Custom themes and canvas styles
  • SVG pack imports and image-to-SVG tracing