SnapLine
Node graph interaction primitives for Vanilla JavaScript, Svelte, and React.
SnapLine is the node-graph layer built on SnapEngine. It supplies draggable and resizable nodes, typed connectors, SVG lines, rectangle selection, nested groups, and palette placement without prescribing your graph document or node design.
SnapLine is experimental in 0.3. APIs may change before 1.0 and breaking
changes will not be hidden behind legacy compatibility aliases.
Pick the responsibility boundary
SnapLine owns gestures, collision geometry, transforms, and line positioning. Your application owns node records, port types, validation, persistence, undo/redo, labels, and styling. Svelte and React remain responsible for structural DOM; SnapLine only writes transforms and state attributes on elements those frameworks rendered.
Packages
| Package | Use |
|---|---|
@snap-engine/snapline | Framework-neutral core objects and policies |
@snap-engine/snapline-svelte | Svelte 5 adapters |
@snap-engine/snapline-react | React 18/19 adapters |
Start with installation and setup, then read core concepts.
SnapLine manipulation is currently pointer-first. Applications must provide labels, focus behavior, keyboard alternatives, and ARIA relationships needed by their audience.
Machine-readable documentation is available from /docs/snapline/llms.txt. Add .md to any docs URL
for clean Markdown.