@adecore/drawing
Hand-drawn shapes, arrows, freehand strokes, text and sticky notes as plain JSON, with hit tests and resizing for an editor, paths for a painter, an SVG export and a reading of a drawing as lines of text. It needs no DOM, so a backend exports a stored drawing the same way a page draws it.
Install
bun add @adecore/drawing
Use
import { DEFAULT_PALETTE, readingOrder, toSvg } from '@adecore/drawing';
import { duplicateElementIdIn, migrateDrawing } from '@adecore/drawing/protocol';
const drawing = migrateDrawing(JSON.parse(file));
if (drawing === null || duplicateElementIdIn(drawing.elements) !== null) {
throw new Error('Not a drawing');
}
const svg = toSvg(drawing.elements, { palette: DEFAULT_PALETTE });
const lines = readingOrder(drawing.elements);
Entry points
| Import | What it holds |
|---|---|
@adecore/drawing | Geometry, paths, SVG export, text and reading order |
@adecore/drawing/protocol | The Zod schemas and types of a drawing; loads nothing else |
Documentation
| Page | What it covers |
|---|---|
| Documents | The document, the seven element kinds and reading a file |
| Geometry | Bounds, hit tests, selection and resizing |
| Paths and SVG | toSvg and the paths of one element for a painter of your own |
| Text and reading order | Wrapping, measuring and readingOrder |
License
FSL-1.1-MIT, see LICENSE. Rough.js and perfect-freehand keep their own licenses.