🚀 Introducing JointJS for React

[marekhozak10]

Today we're releasing JointJS for React: a native React integration of the JointJS diagramming library. An idiomatic React API where the diagram behaves like regular React state: you read it with hooks, and your UI re-renders when it changes.

The powerful JointJS core, rendered the React way

For a long time, React developers could use JointJS only through a wrapper, and we knew from your feedback that it wasn't good enough. So we solved it properly: JointJS for React builds directly on the JointJS core and its model architecture — the serializable data structure that describes your diagram, with everything JointJS can do with it — is unchanged. What's new is the view layer: diagram nodes rendering is now handled by React, the way React developers expect.

• holds the nodes and edges data and exposes it through React context
• renders each of them as a React component — your JSX, your styling, your event handlers
• Behavior is managed through hooks, the same way you manage everything else in your app

And the UI around the canvas is React all the way: your stencil, your inspector, your shapes are all React components you build however you want.

What you're building on:

JointJS for React brings the full JointJS core to React:

• A real data model. The graph is a serializable data structure independent of rendering. You can query it, transform it, validate it, persist it, and run business logic against it — the diagram isn't only visual, it's a model your application logic can work with.
• Exceptional UX, built in. Connection snapping, obstacle-avoiding link routing, hover and selection feedback — the interaction details that make a diagram editor feel finished.
• Performance at scale. Rendering and interaction hold up on graphs with thousands of nodes.
• Feature depth. Undo/redo, clipboard, multi-select, snaplines — the editing capabilities users expect from a diagram editor, without building them from scratch (these ship in JointJS+ for React, see below).

This is what teams use JointJS for: AI workflow builders, BPMN editors, SCADA/HMI dashboards, data modeling tools, energy network diagrams — applications where the diagram is the product, not a feature.

Open source and commercial

JointJS for React, the core diagramming library, is open source. Advanced editing features — undo/redo, clipboard, multi-select, snaplines — and UI components like the stencil and halo ship in JointJS+ for React, the commercial extension.

See it running

We built an AI Workflow Builder demo with polished UX and full source code on GitHub:

• Live demo: https://www.jointjs.com/demos/ai-workflow-builder
• Source code: https://github.com/clientIO/joint-demos/tree/main/ai-workflow-builder
• Announcement post with the full walkthrough: https://www.jointjs.com/blog/introducing-jointjs-for-react
• Docs: https://docs.jointjs.com/react

Questions and feedback welcome in the comments! :)

[wynhnzz]

This looks fantastic! Having a native React integration instead of relying on wrappers is a huge improvement. Keeping the JointJS data model while letting React handle rendering feels like the right architectural choice. Excited to try it out on workflow builders and node-based editors.

[marekhozak10]

Thanks – let us know what you think once you try it out! 😊