Introduction
What is JointJS for React?
JointJS for React is a first-class React integration for JointJS. It provides React components and hooks for building complex diagramming apps, with full control over the data model, rendering, and interactions. It builds on the proven JointJS core, so you get a mature diagramming UI library and an idiomatic React layer in one.
JointJS for React is made for production-scale diagramming: applications where the diagram is a core part of the product and has to handle real complexity, such as a rich data model, large graphs, domain-specific shapes, and deep control over interactions and rendering. It's designed to be the layer you build on as your requirements grow, from the first prototype through to a mature, scaling application.
What is the difference between JointJS for React and JointJS+ for React?
JointJS for React is an open-source React integration for JointJS that lets you create fully interactive diagramming tools for all modern browsers, relying only on React and SVG.
Learn more...
JointJS for React provides:
- A real data model. A serializable graph you can query, transform, and persist. It is the backbone for complex, stateful diagram applications, not just a set of visual nodes.
- Full control. You decide how diagrams render and behave: shapes, ports, links, routing, and custom interactions.
- Production-grade UX. The interaction details end users expect come built in: connection snapping, link routing that avoids obstacles, element and link tools, highlighters for hover and selection states. Good UX is designed into every feature, not left for you to assemble.
- Performance at scale. Smooth interaction on large graphs with thousands of nodes.
- Idiomatic React. Real components and hooks that fit naturally into your existing React app and tooling.
JointJS+ for React is a commercial extension to JointJS for React that adds pre-made plugins on top of the community edition's functionality.
Learn more...
JointJS+ for React includes everything from JointJS for React, and adds:
- Production-ready plugins. Including stencils, toolbars, snaplines, keyboard shortcuts, undo/redo, advanced layouts, import/export, and more.
- Professional demo apps (including source code). Across many domains: Workflow & Process, AI workflow builders, BPMN, Data Modeling, UML & Software modeling, Industrial / SCADA & HMI, Energy networks, Electronics design, Org charts, Timelines.
- Direct support. From the team that builds the library.
See the full list of features of both, and reach out to us for a free 30-day trial.
Explore JointJS for React
Quickstart
Want to dive right in? This guide is just for you!
JointJS features
Looking for more detailed information? We have it:
API reference
Need to get to the nitty-gritty technical stuff? You will find it in our API reference, which includes: