Whether you’re experimenting, building a proof of concept, or ready for a production-grade app, this roadmap will help you find the right starting point.
We just released JointJS for React and shared a bit about who it is for, why it matters, and why you should start using it.
In this article, you’ll get a practical, hands-on guide on getting started with JointJS for React. We won’t go into nitty-gritty details here, but instead we’ll give you a clear outline of the best ways you can jump into it without much effort.
We’ll briefly cover:
Instead of building your app from scratch, the best way to start is to use one of the existing JointJS for React demos that’s close to your actual needs, such as AI Workflow Builder, to build your own proof of concept JointJS for React app.
First, we’ll set up an AI Workflow Builder demo project in a new folder. You can download it using the JointJS CLI tool:
npx @joint/cli download ai-workflow-editor/react
Alternatively, you can simply clone the AI Workflow Builder demo GitHub repository.
Once the demo is downloaded, run npm install to set up all project dependencies. Note that this demo is built in JointJS+ for React, the commercial extension of the open-source, community-driven library, which installs from the private JointJS npm registry, so you’ll need an access token in the .npmrc file to install it.
You can get the access token in our customer portal or by starting your free trial of JointJS+. You can find more info on setting up the access token in the docs.
Once you’ve successfully installed the dependencies, run the npm run start command to start the development server. By default, it will start on localhost, port 5173 (http://localhost:5173/).
Once you have the demo set up, you can either explore the codebase yourself or ask your AI Coding Agent to give you a detailed overview of the project:
Give me an overview of this JointJS+ for React codebase, focusing on JointJS and the key things I need to know about the app.
As expected, Claude Code, the AI Agent I’m using for this demo, examined the codebase in detail and provided a clear overview of key concepts and everything you need to dig into it yourself.
You can now start tweaking the demo yourself, or better yet, follow up with your AI Coding agent to precisely tweak it to suit your needs.
I recommend you use the JointJS MCP Server to get direct access to the latest, up-to-date JointJS docs. Even without the MCP server, your AI coding agent will be able to figure out precisely what it needs to do by analyzing JointJS code, but using the MCP server is more efficient and will get you better results in the end.
Also, if you’re using JointJS MCP Server, you don’t have to manually clone the demo; you can just ask AI to tweak the JointJS for React AI Workflow Builder demo, and AI will set up everything for you.
Using AI Coding agents to tweak one of our prebuilt demos is the simplest and most efficient way of starting if you’re building a proof of concept and plan to build a serious, production-grade app.
But if you want to learn more about JointJS for React, if you want to understand key concepts to be able to review AI agent’s changes and to be able to direct your AI coding agent better, it’s best to get your hands dirty by following our JointJS for React Quickstart Guide in the docs.
The guide is structured into multiple chapters, and each chapter focuses on one key concept, so it’s easy and straightforward to follow:
The quickstart guide is designed to be straightforward and approachable for everyone, clearly outlining all key concepts of the library as you encounter them.
By the end of the guide, you’ll build a complete workflow editor that includes all the key features you’ll find in flowcharts and diagrams, from palette, canvas, minimap, to a live properties panel, giving you insight into JointJS open-source and JointJS+ commercial features.
If you want to start completely from scratch, or add JointJS for React to your existing project, install the library directly from NPM. The open-source version of the library is available at @joint/react, and the commercial extension, JointJS+ for React, is available on NPM at @joint/react-plus.
For this demo, we’ll start from scratch and use the Vite build tool to set up a simple React project:
npm create vite@latest jointjs-for-react-demo -- --template react-ts
Next, we need to install JointJS for React, the open-source version of the library. The package is available at @joint/react:
npm install @joint/react
This will work with any modern React setup, so you can easily drop it into Vite, Next.js, Remix, and so on. Just as well, you can use JointJS+ for React instead of the open-source version.
npm install @joint/react-plus
For this guide, we’ll use the open-source version of the library, but JointJS+ for React includes everything from JointJS for React and works exactly the same (the only difference being that <GraphProvider /> in JointJS+ becomes <Diagram />. And of course, it also gives you access to selection, history, clipboard, spatial index, and more.), just with an expanded set of features.
Once our React project is up and running and the JointJS for React package is installed, we'll set up a simple JointJS canvas. The easiest way to start is to use an AI Coding agent to set up the boilerplate project.
Most developers these days use AI Coding Agents extensively in development, just as they should. And this is precisely where JointJS for React shines. JointJS for React is strongly typed, so your AI Coding agents can easily parse the library and understand exactly how it works and how it can give you the result you want.
You can feel confident using JointJS for React even if you don’t want to wait for the AI training sets to update and kick in with new JointJS for React docs. Better yet, you can install JointJS MCP Server, which provides direct access to up-to-date JointJS docs, including React, to achieve higher-quality code overall.
Replace the React demo and build a @joint/react app with a canvas graph, paper, and two rectangles I can drag. Add one input port on the left and one output port on the right to the rectangles, and draw a link from the output port of the first rectangle to the input port of the second rectangle.
Make the styling slick, modern, and clean with plenty of padding.Note that I’m explicitly mentioning the @joint/react package so the AI Coding Agent knows exactly what to use. I’m using Claude Code in this article, but this will work with any other setup as well.
AI Agent set up a simple JointJS for React canvas and configured the app precisely as it needs to:
import { GraphProvider, Paper, HTMLHost, linkRoutingSmooth, type ElementPort, type CellRecord } from '@joint/react';
import '@joint/react/styles.css';
import './App.css';
function App() {
return (
<div className="canvas-page">
<header className="canvas-header">
<h1>JointJS + React</h1>
<p>Drag the rectangles around the canvas</p>
</header>
<div className="canvas-frame">
<GraphProvider initialCells={initialCells}>
<Paper
renderElement={RectangleNode}
linkRouting={linkRoutingSmooth()}
defaultLink={{ style: { color: '#7c3aed', width: 2.5, targetMarker: 'arrow' } }}
gridSize={20}
drawGrid={{ name: 'dot', args: { color: '#d8d3e6', thickness: 1.5 } }}
background={{ color: '#faf9fc' }}
className="canvas"
/>
</GraphProvider>
</div>
</div>
);
}
export default App;
The RectangleNode function is responsible for turning the element’s data into React UI. It uses HTMLHost so the element can be plain HTML:
function RectangleNode({ label, hint }: NodeData) {
return (
<HTMLHost useModelGeometry className="node">
<span className="node__hint">{hint}</span>
<span className="node__label">{label}</span>
</HTMLHost>
)
}
And the initial elements, ports, and links are configured in their own constants:
type NodeData = {
label: string
hint: string
}
const ports: Record<string, ElementPort> = {
in: {
cx: 0,
cy: '50%',
width: 16,
height: 16,
color: '#ffffff',
outline: '#c4b5fd',
outlineWidth: 2,
passive: true,
},
out: {
cx: '100%',
cy: '50%',
width: 16,
height: 16,
color: '#7c3aed',
outline: '#ffffff',
outlineWidth: 2,
},
}
const initialCells: CellRecord<NodeData>[] = [
{
id: 'rect-a',
type: 'element',
position: { x: 120, y: 160 },
size: { width: 220, height: 120 },
portMap: ports,
data: { label: 'Rectangle A', hint: 'Output' },
},
{
id: 'rect-b',
type: 'element',
position: { x: 560, y: 160 },
size: { width: 220, height: 120 },
portMap: ports,
data: { label: 'Rectangle B', hint: 'Input' },
},
{
id: 'rect-a-rect-b',
type: 'link',
source: { id: 'rect-a', port: 'out' },
target: { id: 'rect-b', port: 'in' },
style: {
color: '#7c3aed',
width: 2.5,
targetMarker: 'arrow',
},
},
]
From here, you can use your AI Coding Agent to tweak and extend it according to your precise project needs. Follow up in your initial prompt to get the result you’re looking for.
If you want to quickly build a proof of concept for your own use case with JointJS for React, start with the AI Workflow Builder demo and use AI coding agents to tweak it to suit your needs.
If you want to understand a bit more about how JointJS for React works, follow our Getting Started Guide in the docs, and in the few short lessons, you’ll learn everything you need to get confident in building production-grade diagramming and flowchart apps.
These resources will help you take your next steps and get the most out of JointJS for React and JointJS+ for React.
Happy diagramming!
.png)
.jpg)
