The JavaScript diagram library — no framework required
One custom element: JSON attributes in, a fully interactive canvas out — drag, connect, undo, export. No build step required, works in any page, any stack, or no stack. The same MIT engine that powers the React, Angular and Vue bindings.
<script type="module"> import '@grafloria/element'; </script> <grafloria-flow theme="light" fit-view nodes='[{"id":"a","position":{"x":0,"y":0},"label":"Extract"}, {"id":"b","position":{"x":220,"y":0},"label":"Load"}]' edges='[{"source":"a","target":"b"}]'> </grafloria-flow> <script> // rich data goes in as properties; events come out as DOM events const el = document.querySelector('grafloria-flow'); el.addEventListener('grafloria-connect', (e) => console.log(e.detail.link)); </script>
Why teams pick it
The standard custom-element contract
Simple data on attributes, rich data as properties, DOM events out, <template data-node-type> for custom nodes — the contract every framework’s template binding already targets, and every future framework will.
Kits speak JSON too
Hand the same element an erDiagram, umlDiagram or dashboard spec and it renders interactive table cards, class cards or a drag-and-pack grid — plus Mermaid and .drawio text import.
Headless when you need it
The engine underneath runs in plain Node — server-side SVG/PNG/PDF export, byte-identical to the browser render. Same model, no DOM, no headless-browser gymnastics.
Coming from Drawflow or JointJS core?
Drawflow is wonderfully small and JointJS’s MPL core is genuinely capable — both leave layout, undo and export to you, and JointJS keeps the editor chrome for its commercial tier. Grafloria’s element ships the whole editor surface MIT. The sourced table is on the comparison page.
npm’s “unpacked size” is not what ships
npm’s unpacked size is uncompressed ESM source plus full TypeScript declarations. What your users download, measured worst-case — the entire public surface of @grafloria/element, esbuild minify + splitting: 451 KB gzipped eager, with the ELK layout engine in a lazy chunk that downloads only if you invoke it. That covers the renderer, undo, export, Mermaid import and validation — about the cost of one charting library. Every package README carries a two-minute reproduction script.
Every demo, in your framework
The gallery is the documentation: every demo is a real, clickable page, and our CI drives each one with real pointer events so the examples can't rot — and each one available in this framework’s own idiom, source shown. Open the demo gallery — view-source is the tutorial →
Grafloria is MIT — every feature, no commercial tier. React, Next.js, Angular, Vue, React Flow, Vue Flow, ngx-vflow, JointJS and Drawflow are trademarks of their respective owners; comparative references only, no affiliation implied. Corrections welcome via GitHub issues.