DEV Community: JointJS

How to embed a visual Mermaid editor in your React app

Zoran Jambor — Wed, 04 Nov 2026 12:50:26 +0000

Mermaid has effectively become the standard for diagrams as code. You write a flowchart like A --> B in Markdown, GitHub renders it, and it lives in version control next to your code. Mermaid diagrams are in READMEs, docs sites, and wikis, and increasingly the output across almost all major AI platforms for generating text-based diagrams. All of this makes Mermaid the obvious format for any product that displays diagrams, and the next step for those products is a visual Mermaid editor that lets users change a diagram by clicking on it instead of learning the syntax.

But Mermaid diagrams integrated into products can quickly show their limits. The output is a static SVG; users can’t click a node to rename it or restyle an arrow without learning the syntax. Just as well, a typical visual editor built on top keeps its own copy of the diagram, separate from the Mermaid text. When you edit the diagram, the text becomes out of date. If you edit the text, the diagram is no longer accurate. Teams building docs platforms, wikis, low-code tools, and AI assistants often realize that Mermaid is great, but the editing experience isn't.

To close that gap, we built the Mermaid Editor app template with JointJS, a diagramming library for building visual editors in JavaScript and React. It reads Mermaid with Mermaid’s own parser, renders it as a live, editable diagram, and writes every canvas change back into the text.

In this article, you’ll see what the JointJS Mermaid Editor does, the patterns behind it, and how to embed it in your own React app.

About the JointJS Mermaid Editor demo

The Mermaid Editor is a split-screen editor for Mermaid flowcharts. You write Mermaid on the left, and on the right you get a real, interactive diagram rendered by JointJS+ for React. As you type, the source is reparsed, and the diagram is laid out as you go. When you edit the diagram, the text changes.

Here’s what that looks like in practice:

It works with standard Mermaid syntax. All classic delimiter shapes ([ ], ( ), { }, [( )], and the rest), the extended v11 @{ shape: … } catalog, @{ img: … } image nodes, nested subgraph blocks, style, classDef, click links, linkStyle, edge labels, curves, and even @{ animate: true } dash-animated links.
Every node is a real SVG shape that sizes itself to its label. No fixed-width boxes with overflowing text.
The source and the canvas point at each other. Click a node, and every mention of it lights up in the source. Move the caret in the editor, and the diagram selects and scrolls to the node you're on.
The canvas is an editor, not a viewer. Double-click to rename a node in place. Select a node to see a toolbar with shape, fill, text color, bold and italic, border, hyperlink, image, and an "add a step" action. Select a link to change its line pattern, arrowheads, color, curve, and animation. Shift-click to select two nodes, and the editor offers to connect them.
Every edit is written into the Mermaid text. The source stays the single source of truth, so what you export is still a plain .mmd file that works in GitHub, GitLab, Notion, or anywhere else Mermaid does.
It's a proper canvas. Pan and zoom on an infinite PaperScroller, switch layout direction and link routing (curved or orthogonal), toggle light and dark themes, and export the diagram to SVG.

The source editor is Monaco, the same editor that powers VS Code, with Mermaid syntax highlighting, autocompletion, find and replace, multiple cursors, and full undo history.

You can find the full source code on GitHub: clientIO/joint-demos/mermaid-editor.

How the editor keeps the Mermaid text and the diagram in sync

The key aspect of the Mermaid Editor, precisely as in our Data Modeling App Template, is that there is a single source of truth, the Mermaid text.

The visual diagram is never edited directly, but rather always a rendering of the current source. When you type, the source changes and the diagram is rendered from it. When you change something on the canvas, the app doesn’t touch the diagram, but computes the new Mermaid text and derives the visual from that.

Everything flows clockwise. The text will be parsed by Mermaid, mapped to JointJS cells, and rendered. Canvas actions become text edits, which start the loop again. There’s no second model to keep in sync, so the diagram and the text can't fall out of sync.

An automatic layout engine calculates node positions on every render, just as Mermaid does. The editor supports the two layout engines Mermaid offers for flowcharts. Dagre, a layered layout with smooth, curved links, which is the default, and ELK, which routes links at right angles and is used when the source sets layout: elk. You can easily switch between them by editing Mermaid text.

From Mermaid to JointJS cells

Mermaid’s syntax is large, evolving, and full of edge cases, so the demo uses Mermaid’s own parser and reads the result from its diagram database:

// src/mermaid/parse.ts

const mermaid = await loadMermaid();

let diagram;
try {
  diagram = await mermaid.mermaidAPI.getDiagramFromText(text);
} catch (error) {
  throw new MermaidParseError(toMessage(error));
}

// … (rejects diagram types other than flowchart)

const db = diagram.db as unknown as FlowDbLike;
const { nodes, edges } = db.getData();

When Mermaid is parsed, it figures out what each shape should be, breaks two-way arrows into separate one-way arrows, and keeps track of which nodes are inside each subgraph.

The parsed graph is then mapped onto declarative JointJS cell records with a single pure function:

// src/mermaid/to-cells.ts

export function toCells(flow: FlowGraph): MermaidCell[]

That’s the same pattern the Data Modeling app uses with schemaToCells.

Nodes grow to fit their labels

Each node on the diagram is a React component that renders its Mermaid shape as SVG, and useMeasureElement measures the label and provides its exact sizing:

// src/components/render-node.tsx

const { width, height } = useMeasureElement(textRef, options);

That’s why a diamond with a long label grows bigger instead of clipping its text, and why a label can span as many lines as it needs to. Shapes are defined once in shapes.ts, and the same geometry draws both the node on the canvas and its icon in the toolbar’s shape picker, so the two can never drift apart.

Subgraphs become real containers

A Mermaid subgraph turns into a JointJS container element. Its nodes are embedded inside it, and after layout, the container is resized to fit perfectly. Because the nodes really belong to the container, rather than sitting on a box drawn behind them, subgraphs can be nested too.

Links keep their Mermaid styling

Each Mermaid link (the parser returns them as edges) becomes a JointJS link that carries everything Mermaid knows about it, from solid, dotted, or thick lines, to point, circle, or cross arrowheads at either end, labels, linkStyle colors and widths, curved routing for Mermaid’s curve families, and a CSS marching-dash animation for animate: true links.

Layout runs when every node is measured

Once every node is measured, DirectedGraph.layout from @joint/layout-directed-graph arranges the graph in whatever direction the source declares (TB, BT, LR, or RL). The DirectedGraph.layout is the default, the same dagre-style layout Mermaid uses, with curved links. When you set layout: elk option, the editor switches to @joint/layout-elk with orthogonal links.

useOnElementsMeasured(({ graph: measuredGraph }) => {
    settle(measuredGraph, onLayoutSettled);
});

The useOnElementsMeasured hook repaints the paper right after the callback, so there’s never a frame where diagram nodes are visible at their pre-layout position.

From the diagram canvas back to Mermaid

Rendering Mermaid is the easier half. The hard part, and the reason so many Mermaid tools stop at a preview, is writing visual edits back into Mermaid format without breaking it.

The obvious approach is to regenerate the whole source from the parsed graph after every edit. It’s also the wrong one. Mermaid’s parsed output is a normalization, not a faithful syntax tree, so it has no comments, no formatting, no classDef names, and shapes come back as IDs rather than the delimiters the author typed. With this approach, every click on the canvas would reformat the author’s entire document, delete their comments, and produce a massive diff.

In this app, the source is never fully recreated. Every canvas action is a targeted edit that finds the exact span of text responsible for the change made and splices in the new value.

For example, here’s how renaming a node works:

// src/mermaid/edit-source.ts

export function setNodeLabel(source: string, id: CellId, label: string): string | null {
   // … (a v11 `id@{ label: … }` block is edited in place first)

   const parsed = parse(source);
   const declaration = findDeclaration(parsed, id);
   if (!declaration) return null;
   const text = quoteLabel(encodeBreaks(label.trim()));

   if (declaration.labelFrom !== undefined && declaration.labelTo !== undefined) {
       return splice(source, declaration.labelFrom, declaration.labelTo, text);
   }
   // A bare `a --> b` has no shape to hold a label; give it the default one.
   if (declaration.shapeFrom !== undefined && declaration.shapeTo !== undefined) {
       return splice(source, declaration.shapeFrom, declaration.shapeTo, `[${text}]`);
   }
   return splice(source, declaration.idTo, declaration.idTo, `[${text}]`);
}

Ideally, Mermaid's own parser would say where each piece of the diagram sits in the text. Mermaid's newer diagram types are parsed with Langium, which returns a typed syntax tree whose nodes record their exact offset and length in the source. Flowcharts, though, haven't been migrated yet. They still use Mermaid's older Jison grammar, which Mermaid now marks as deprecated, and Jison hands back the finished diagram data with no record of where anything came from in the text. To edit the source precisely, you need a second parser that keeps positions.

So each edit parses the current source using a separate Lezer grammar for Mermaid from the codemirror-lang-mermaid package, but it doesn’t interpret the diagram. It only records where each node ID, shape bracket, and label sits in the text. The edit then replaces just that piece, so the rest of the source, including comments and formatting, stays exactly as the author wrote it.

There's one of these functions per action, and each one deals with corner cases of Mermaid syntax so the UI doesn't have to.

The React side is equally small. Every handler on the node toolbar runs one of these functions on the current source and hands the result back to the same state the editor writes to:

// src/app.tsx

onLabelChange: (id, label) => apply(setNodeLabel(sourceRef.current, id, label)),
onShapeChange: (id, shape) => apply(setNodeShape(sourceRef.current, id, shape)),
onFillChange: (id, fill) => apply(setNodeFill(sourceRef.current, id, fill)),

Any change, whether typed or made on the canvas, is handled in the same way. There are no separate processes for canvas and editor edits, so they always stay in sync. Since every edit only updates the text, it’s easy to test these changes, and the repo includes unit tests for edits like removing elements or updating labels and links.

Details that make it feel like an editor

A two-way binding is easy to describe and surprisingly easy to get subtly wrong. Most of the remaining code in the demo is about making it feel instant and predictable.

Selection without feedback loops

The text and diagram don’t directly control each other. Instead, the app manages selection in one central place. Whenever you interact with either side, that action is reported up, so the app then knows what to display in both the text and the diagram.

// src/app.tsx

interface Selection {
   readonly ids: readonly CellId[];
   readonly origin: 'canvas' | 'editor';
}

For example:

Clicking a node in the diagram highlights all its matches in the text and scrolls the first one into view, which is helpful when you want to find the code for a shape you see.
Moving the caret in the text editor selects and centers the matching node in the diagram.

By letting the app handle selection, changes don’t bounce back and forth between the text and the diagram. This keeps everything in sync without causing endless update loops.

Optimized for production-grade use cases

The demo, as it’s always the case with JointJS application templates, is optimized for performance, from the big picture to the smallest details.

Typing is debounced by 300 ms, so the editor is not parsing text on every keystroke. But actions like picking a shape, loading an example, or hitting undo happen right away without any delay. This avoids lag and keeps the app feeling quick and responsive.

Two heavy dependencies, Mermaid and Monaco, are loaded with dynamic imports, so each comes in its own chunk instead of the app’s main bundle. And since JointJS for React works with declarative cell records, an edit that only changes a label or a color updates the existing graph instead of rebuilding it.

Accessible by default

As with any JointJS app template, we paid special consideration to accessibility.

The app works with screen readers, everything is accessible with keyboard, text not only has sufficient contrast but also looks great in both themes, and reduced-motion preferences are respected, enabling users to disable unnecessary animations (@media (prefers-reduced-motion: reduce) {}).

Embedding the Mermaid editor in your React app

The demo is a complete app, built from two pieces you can embed into your own product. The Mermaid logic is in src/mermaid/ and the React components in src/components/. The app shell in app.tsx holds the raw text as state and connects the two:

// src/app.tsx (simplified)

<EditorPanel
   source={source}
   onSourceChange={handleSourceChange}
   onCursorNodeChange={selectFromEditor}
   highlightedIds={selection.origin === 'canvas' ? selection.ids : NO_IDS}
/>

<MermaidDiagram
   direction={rendered.direction}
   layout={rendered.layout}
   cells={rendered.cells}
   selectedIds={selection.ids}
   onSelect={selectFromCanvas}
   edit={edit}
   linkEdit={linkEdit}
/>

Notice that the diagram component, MermaidDiagram, never sees the Mermaid text. It receives a list of shapes and links to draw, and when the user changes something, it reports the change. The app shell turns that info into updated Mermaid text and passes the new shapes back down. Because the component only draws and reports, you can plug it into any app that stores Mermaid text:

The source can live anywhere. Load your own Mermaid text from anywhere, such as a Markdown file, a database field, or an LLM response, and let your users edit it visually, then save the Mermaid text back. There's no extra diagram format to store.
The code editor is optional. EditorPanel and MermaidDiagram are completely separate components. Developers probably want both side by side, but for non-technical users, you can show only the canvas and its toolbars, and keep Mermaid behind the scenes.
The Mermaid logic is plain TypeScript. Parsing Mermaid flowchart source is done in parse.ts, which contains no React or canvas code, so you can easily extend it for the parts of Mermaid your users rely on.
Theming is done with CSS Custom Properties. Color themes (both light and dark) are set entirely in CSS variables (index.css), so you can easily tweak them to match your own brand and product style.

Use the Mermaid Editor in your projects, from docs platforms to AI assistants

If you read our Data Modeling App Template walkthrough, the shape of this app will look familiar. In Data Modeling Demo, SQL DDL serves as the text format, and the graph carries the schema. In Mermaid Editor Demo, Mermaid functions as the text format, and the source carries the diagram. In both cases:

One thing is the source of truth, and everything else is derived from it.
The domain logic (SQL generation and parsing in Data Modeling, and Mermaid parsing and source edits here) doesn’t depend on the canvas, so it’s testable on its own.
A single function maps the domain model to cells, and JointJS for React renders those cells declaratively.
Nodes are React components, and the interaction layer (selection, scrolling, zooming, layout, export) comes from the library instead of being rebuilt by hand.

That makes the demo a useful starting point well beyond flowcharts. A few places it fits naturally:

Docs and knowledge-base platforms that already store Mermaid in Markdown, so you can easily give non-technical users a visual way to edit it, without changing the storage format.
AI assistants and agents that generate flowcharts as Mermaid. LLMs are good at writing Mermaid and not great at getting a diagram exactly right on the first try. A visual editor on top lets users fix the last 10% by clicking instead of re-prompting.
Internal tools and wikis where diagrams live in Git and need to stay reviewable as text diffs.
Other text-based diagram formats. Swap parse.ts and edit-source.ts for another grammar (another Mermaid diagram type, PlantUML, D2, Graphviz DOT, or your own DSL), and most of the rendering and interaction layer stays as it is.

The current demo covers Mermaid flowcharts. Other Mermaid types like sequence or state diagrams would need their own mapping in toCells and their own source edits, but the architecture doesn’t change.

Getting started

The quickest way to see what this does is to open the live Mermaid Editor demo and paste in a flowchart of your own. Pick something from a real README, or ask your favorite LLM to generate one. Then click around, rename a node, change an arrow, switch the layout direction, and watch the source follow along.

When you’re ready to embed it in your own app, download the app template locally:

npx @joint/cli download mermaid-editor/react

You’ll need access to the JointJS+ for React package, through a license or a free trial. The full source is on GitHub: clientIO/joint-demos/mermaid-editor.

Like our other demos, the codebase is heavily commented with the reasoning behind each decision, which makes it a good fit for an AI coding agent. Point your agent at it, describe your use case, and let it adapt the demo. For best results, set up the JointJS MCP Server, which gives your agent direct access to up-to-date JointJS docs and demo code.

Happy diagramming!

FAQ

What is the JointJS Mermaid Editor?

It’s an app template built with JointJS+ for React that turns Mermaid flowchart source into an interactive, editable diagram. Changes made on the canvas are written back into the Mermaid text, so the source always stays the single source of truth.

How is this different from the Mermaid Live Editor?

The Mermaid Live Editor renders a static preview of your text. The JointJS Mermaid Editor renders a live JointJS graph you can edit directly, from renaming nodes and changing shapes and styles to adding and connecting steps, restyling links, and switching the layout direction, with every change synced back to the source.

How is this different from Mermaid’s Advanced Editor?

The Advanced Editor is the editor in mermaid.ai, Mermaid’s subscription-based platform. It bundles AI generation, saved diagrams and collaboration with a Visual Editor for canvas editing. The JointJS editor offers the same kind of two-way editing for flowcharts, but as a template you embed in your own React app.

Can I easily embed the Mermaid Editor in an existing React app?

Yes. The editor uses React components to handle diagram updates, while your app manages the Mermaid text. You can keep the source anywhere you like, from a Markdown file, to a database, or from an LLM response, and add the code editor panel only if your users want to see or edit the text.

Does it use a custom Mermaid parser?

No. It uses Mermaid’s own parser to read the diagram, so syntax support follows Mermaid itself. A separate Lezer grammar locates exact text spans so canvas edits can be applied without reformatting the rest of the source.

Which Mermaid features are supported?

Flowcharts, including all classic node shapes, the extended v11 @{ shape: … } catalog, image nodes, nested subgraphs, style, classDef, click, linkStyle, link labels, arrow types, curves, animated links and Mermaid's layout: elk option.

Can I export the result?

Yes. You can export the diagram as SVG or download the Mermaid source as a .mmd file that works anywhere Mermaid is supported.

Can I adapt it for other diagram formats?

Yes. Parsing and source editing are separated from rendering, so you can use different formats, such as another Mermaid diagram type or your own DSL, and keep most of the canvas and interaction code.

How to get started with JointJS for React

Zoran Jambor — Thu, 22 Oct 2026 14:31:28 +0000

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:

How to start from a ready-made demo (AI Workflow Builder) and customize it for your project
Guidance on building your first app step-by-step using the documentation and quickstart guide
How to use AI Coding Agents to accelerate development, along with quick installation instructions to get you up and running
A conclusion with tips, next steps, and further resources

Start with the AI Workflow Builder demo

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/).

When 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 the 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.

Build your first app step by step by following our quickstart guide

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:

Install @joint/react: add the package, import the styles, and size the canvas.
Build your first diagram: render elements from plain data.
Add and update elements: read the graph and change it while the app runs.
Create custom elements: rich, data-driven nodes with ports, styled your way.
Connect elements with links: arrowheads, labels, and routing.
Make the canvas interactive: dragging, clicks, and selection.
Zoom and pan the canvas: an infinite, scrollable, zoomable viewport with JointJS+.
Add an element palette: drag from a palette onto the canvas.
Add a property editor: edit the selected node from a live inspector.
Add an element overlay: React UI anchored to an element, such as a badge, toolbar, or popover.
Add a minimap: a bird’s-eye view that tracks the canvas.

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.

Use AI Coding agents to set up your JointJS for React project from scratch

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.

Install JointJS for React through NPM

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.

Set up a basic JointJS canvas with your AI Coding agent

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.

Conclusion

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.

Ready to get started?

These resources will help you take your next steps and get the most out of JointJS for React and JointJS+ for React.

Happy diagramming!

FAQ

What is the recommended way to start building with JointJS for React?

The fastest way is to use the AI Workflow Builder demo as a starting point. Download or clone the demo, install dependencies (you’ll need a JointJS+ access token for the commercial version), and run it locally. This gives you a working proof of concept that you can customize to your needs.

How do I install JointJS for React in a new or existing project?

For open-source, run npm install @joint/react. For the commercial extension, run npm install @joint/react-plus (requires private npm access). Both can be integrated into any modern React setup like Vite, Next.js, or Remix.

What’s the difference between JointJS for React and JointJS+ for React?

JointJS for React is open-source and provides core diagramming tools. JointJS+ for React is a commercial extension with advanced features (selection, history, clipboard, minimap, spatial index, and more), and uses <Diagram /> instead of <GraphProvider />.

Can I use AI Coding Agents with JointJS for React?

Yes! JointJS for React is strongly typed and works well with AI Coding Agents (like Claude Code or GitHub Copilot). Agents can help you set up projects, tweak demos, and generate code. Using the JointJS MCP Server gives them direct access to the latest docs for even better results.

How can I learn the basics and key concepts of JointJS for React?

Follow the Quickstart Guide in the official docs. It covers installation, rendering diagrams, custom elements, interactivity, palettes, property editors, overlays, and minimaps—everything needed to build a production-grade workflow editor.

Do I need a commercial license to try JointJS for React?

No, the open-source version is free to use. To try advanced features in JointJS+, start a free trial for access to the commercial package and features.

Where can I find more resources?

Best ways to continue your journey with JointJS for React are:

Introducing JointJS for React: Production-grade diagramming for React applications

Zoran Jambor — Fri, 16 Oct 2026 12:46:58 +0000

Most diagramming libraries seem promising at first. You can spin up a demo in ten minutes, and it feels like you’ve found the perfect fit. But after a few months, you’re building undo/redo from scratch, fighting to keep the diagram state in sync with your backend, running into roadblocks when customizing UX to your needs, and noticing performance lags as your data grows.

Most diagramming libraries take you just far enough to be committed, but fall short when it comes to building a polished, production-ready product, especially on a tight timeline.

Behind the scenes, the hard part of building a diagramming application isn’t drawing boxes and lines, because every library already does that. The real challenge is supporting the sophisticated interactions users expect (UX/UI), from a modern, intuitive, accessible interface to scalability.

As your diagrams grow from a few nodes to hundreds or thousands, performance has to keep up. And if you’re working in React, you want an integration that feels like React, not a constant struggle with side effects and useRefs.

What JointJS for React actually is

JointJS has been powering diagramming applications used by millions of people for over a decade, from AI workflow builders and BPMN modelers to industrial automation dashboards, data modeling tools, and much more. Industry leaders worldwide trust it for diagrams that need to work reliably in production.

The JointJS engine solves hard problems, including smart routing algorithms that avoid node overlap, consistent hit testing at any zoom level, DOM management, exceptional UX, outstanding performance, and memory management in production environments.

JointJS for React brings that trusted engine directly to React. This isn’t just a wrapper or a clunky compatibility layer, but a truly idiomatic React API built on top of JointJS.

Diagram state is React state, with a core wrapper component (GraphProvider / Diagram) that manages and provides it to child components, directly connecting the JointJS engine with React’s lifecycle. There’s no hidden state, no imperative API calls, and no synchronization headaches between React’s render cycle and the canvas. What’s in your state is exactly what’s on the screen.

Here’s what a simple JointJS app in React looked like until now, and what it will look like going forward.

Before — JointJS 4.2

// DO NOT USE - Old way of integrating JointJS with React

import { useEffect, useRef } from 'react';
import { dia, shapes } from '@joint/plus';

function JointJs() {
  const canvas = useRef<Element | null>(null);

   useEffect(() => {
       const graph = new dia.Graph();

       const paper = new dia.Paper({
           model: graph,
           background: {
               color: '#F8F9FA',
           },
           frozen: true,
           async: true,
           cellViewNamespace: shapes
       });

       canvas.current?.appendChild(paper.el);

       const rect = new shapes.standard.Rectangle({
          type: 'standard.Rectangle',
          position: { x: 100, y: 100 },
          size: { width: 100, height: 50 },
          attrs: { label: { text: 'Hello World' } },
       });

       graph.addCell(rect);
       paper.unfreeze();

       return () => {
           paper.remove();
       };

   }, []);

   return (
       <div className="canvas" ref={canvas}/>
   );
}

export default JointJs;

The old approach isn’t wrong, but it’s at odds with React’s model. Setup happens inside a useEffect, you access Paper through useRef, and you’re stuck with manual cleanup.

After — JointJS for React

// New way — JointJS for React

  import { GraphProvider, Paper } from '@joint/react';

  const initialCells = [
    {
      type: 'element',
      position: { x: 100, y: 100 },
      data: { label 'Hello World' },
    },
  ];

  export default function App() {
    return (
      <GraphProvider initialCells={initialCells}>
        <Paper className="canvas" />
      </GraphProvider>
    );
  }

JointJS for React fits right in with the rest of your React codebase. You declare what you want, and the framework takes care of the rest. It’s not just more elegant, but actually simpler and more intuitive, too.

The difference between JointJS for React and JointJS+ for React

In this article, we’ll focus on JointJS+ for React, so it’s worth noting what the actual differences from the open-source version of the library are. Both versions are based on the JointJS diagramming engine.

JointJS for React is a free, community-driven diagramming library. It gives you the core SVG + HTML rendering engine, a solid API, and building blocks for flowcharts, UML, and other diagramming applications. (If you give the open-source version a try and find it helpful, consider leaving a star on GitHub. It’s a small thing, but it means a lot to the team – thanks!))

JointJS+ for React is a commercial extension built on the same core engine, adding numerous ready-to-use UI plugins for snapping, panning, zooming, tooltips, and context menus, plus advanced shapes/styling options on top of what's in the open-source version. It also adds production-focused components not in JointJS at all, like the CommandManager for unlimited undo/redo history tracking, multi-select, and Snaplines/measurement shapes for precision alignment.

JointJS+ includes everything in JointJS and builds on top of it, so it's really a question of whether you want to build the UI layer yourself or have the library do the heavy lifting for you.

Already a JointJS+ customer?
Download the latest package, including JointJS+ for React, using npm or from our customer portal. If your update subscription expired, reach out to us for re-activation.

New to JointJS+?
Start a 30-day no-commitment trial, which now includes JointJS+ for React.

AI Workflow Builder with JointJS+ for React

Workflow editors like pipeline designers, approval flows, and data-processing graphs are among the most common diagramming apps teams build, and they’re a great benchmark for any library. They let you quickly see whether a tool handles both the basics and the edge cases.

Rendering boxes and arrows is easy; what takes significant effort in development are the editing interactions users expect, connection rules that keep the graph semantically valid, configuration options, and performance that holds up as your diagram grows. This demo directly addresses those challenges.

Live demo: https://www.jointjs.com/demos/ai-workflow-builder

The same engine powering this AI Workflow Builder also drives BPMN editors, industrial automation (SCADA/HMI), energy network visualization, circuit design, data modeling tools, and more. The domain might change, but the engine’s strengths remain the same. A workflow editor puts most of these capabilities to the test, making it the perfect starting point.

1. Diagram basics done right

The diagram nodes in this demo (Input, AI Agent, Tool, Output) aren’t just rectangular boxes—they’re fully configurable UI components. Each node can render arbitrary HTML content, including headers, icons, text areas, select boxes, sliders, and other interactive controls. Combined with visual cues like colored icons and port legends, the graph remains easy to scan and understand at a glance.

// src/components/nodes/render-node.tsx

function NodeBody({ data }: { data: ConfigNodeData }) {
 switch (data.kind) {
   case 'input':  return <TextInputBody data={data} />;
   case 'skill':  return <SkillBody data={data} />;
   case 'agent':  return <AgentBody data={data} />;
   case 'tool':   return <ToolBody data={data} />;
   case 'output': return <OutputBody data={data} />;
 }
}

2. Editing interactions

Undo/redo, copy/paste, multi-select, keyboard shortcuts, snap-to-grid are all essential features users expect from serious apps. If you’ve ever tried building them from scratch, you know they’re far from easy to get right.

In this demo, history and clipboard are single props on the root component:

// src/app.tsx

<Diagram cells={cells} onCellsChange={setCells} history clipboard>

The real value isn’t just that these features exist, but that they work together seamlessly. Undo correctly reverses a paste, multi-select moves as a group and lands on the undo stack as a single action, while Snaplines (a JointJS feature for aligning elements) work no matter how a node was placed. Only a library that builds these features into the engine can guarantee they’ll play nicely together.

3. The data model

This is what matters in serious, production-grade applications, and in JointJS+ for React, the diagram state is plain React state. Just as you’re used to working with React, Diagram can take data in either uncontrolled or controlled state. This demo showcases the controlled state.

// src/app.tsx

const [cells, setCells] = useState<readonly WorkflowCell[]>(INITIAL_CELLS);

<Diagram cells={cells} onCellsChange={setCells} history clipboard />

The controlled cells array is the single source of truth. It’s rendered on the <Diagram />, while every user action fires onCellsChange with an updated array. Because the graph is just a serializable data structure, saving, loading, and processing are trivial.

Note that the state hooks in JointJS for React behave identically in JointJS and JointJS+, but in JointJS+, GraphProvider becomes Diagram, which also gives you access to selection, history, clipboard, spatial index, and more.

4. Layout and organization

Diagrams that developers create by hand often drift toward visual noise. The auto-arrange option resolves this in a single action, in which a layout algorithm runs over the graph and repositions every node cleanly.

At the canvas/paper level, there are two available modes: an infinite-scrollable canvas for open-ended building, and a fixed sheet mode that restricts the diagram's canvas to specific, page-like boundaries, which is ideal for exportable documents such as flowcharts, organization charts, or diagrams that must fit strict corporate reporting templates.

The minimap in the bottom-right corner becomes vital as soon as the diagram grows beyond the viewport size. In JointJS+ for React, this is just one of the components you can plug into your application with a few lines of code.

he purpose of AI Workflow Builder demo

This demo clearly demonstrates what a serious AI workflow editor looks like when it’s built on a complete diagramming engine.

Every feature shown here, from typed connections, undo/redo, clipboard, multi-select, auto-layout, export, to minimap, is available on day one as a core feature of the JointJS library.

JointJS handles the hard parts out of the box, so you can focus on building your application logic instead of spending months implementing core library features.

Key capabilities of JointJS+ for React — What you get out of the box

JointJS+ for React provides a valuable set of features for production-ready diagrams, not just demos. These capabilities make JointJS+ for React a true foundation for serious diagramming applications, eliminating the need to reinvent critical features and assuring your product is ready for actual real-world demands.

SVG-based rendering with full custom shape support

JointJS uses a combination of SVG and HTML as its rendering engine, which means your diagrams will remain crisp at any zoom level, while the added benefit of SVG being accessible means your applications will meet necessary accessibility standards more easily.

On top of that, in JointJS you’re never limited to built-in shapes. You can easily create any kinds of elements. Nodes can use SVG or HTML, with wrapped labels, interactive inputs, and live data. All JointJS elements work flawlessly with ports, links, and selection, so you’ll never have to resort to workarounds.

Built-in virtual rendering for large graph performance

JointJS comes with extensive options that let you configure it for scalability and performance, but it ships with conservative defaults, primarily for backward compatibility. JointJS+ for React, on the other hand, doesn’t come with this baggage, so all advanced JointJS performance options like async, autoFreeze, and viewManagement you’d want in a large-scale application are enabled by default.

All of this means that instead of thinking about what you need to do to make your large apps performant, you can just start building with confidence, knowing that everything is already set up for you, even if you plan to build diagrams with thousands of nodes.

Exceptional user experience (UX)

JointJS+ for React is built to deliver a frustration-free diagramming experience for both end users and developers. The library provides intuitive drag-and-drop interactions, smooth editing, instant feedback, and advanced features such as minimap, smooth zoom controls, different routers, and more.

Domain-specific shape libraries

Get fully featured, standards-compliant shapes for BPMN 2.0, value stream mapping, data modeling (records/tables), and charts.

These shapes aren’t just icons, but they include the correct ports, labels, and connection rules for each domain, allowing you to build real-life applications without starting from scratch.

Comprehensive layout algorithms

JointJS+ for React comes with built-in tree, force-directed, grid, and stack layouts, while also allowing seamless integration with advanced third-party layout engines such as ELK and Dagre. Easily auto-arrange and reorganize complex diagrams.

These algorithms make it easy to auto-arrange nodes, keep diagrams readable, and adapt to model changes, saving you weeks of custom development.

Rich interaction model

Undo/redo, copy/paste, multi-select, keyboard shortcuts, snap-to-grid, and alignment guides work together out of the box, intuitively.

None of these are bolted on separately and hoped to cooperate: undo correctly reverses a paste, a multi-select move lands on the undo stack as a single action, and snap-to-grid/alignment guides apply no matter how the node got there, be it by dragging, pasting, or dropping it from the stencil.

Rich interaction model

Undo/redo, copy/paste, multi-select, keyboard shortcuts, snap-to-grid, and alignment guides work together out of the box, intuitively.

Effortless export options

In JointJS+ for React, you can easily export diagrams as SVG, PNG, or PDF. What users see on screen is exactly what they get in exports, so you won’t need to implement separate rendering logic. Canvas (paper) options allow you to visualize fixed sheets and page breaks, which is key if you need specific dimensions of diagrams and flowcharts for your documents and presentations.

Who is JointJS+ for React built for

JointJS+ for React is designed for teams building workflow automation tools, BPMN modelers, data pipeline editors, network topology visualizers, circuit design tools, or any application where diagramming is a core product feature. It’s built for cases where users need robust editing, undo/redo, easy export, and all of this delivered with polished UX and production-grade scalability. When your requirements go beyond simple visuals, and you need a complete, production-ready foundation, JointJS+ for React delivers everything out of the box.

Simpler libraries are fine for simple needs, but as soon as requirements get serious, whether in performance, intuitive and accessible UX, scalability, or configuration options, you quickly hit a ceiling. At that point, you either have to build the missing pieces yourself or start with the right foundation from day one. Not anymore, because this is precisely the gap that JointJS+ for React fills.

Getting started with JointJS+ for React

The easiest way to get started with JointJS+ for React is to jump into our AI Workflow Builder demo. The source is fully available on GitHub, so you can clone the repo, run npm install, and you’re ready to tweak and customize it, either by hand, if you want to dig into the code yourself, or with your AI Coding Agent, be it Claude Code, Codex, Cursor, or any other model you might be using.

All the principles that apply to AI Coding Agents and JointJS also apply to JointJS+ for React. That means you can use your AI Coding Agent and the AI Workflow Builder demo as a great starting point for your own proof of concept, or even project. The documentation is already up to date, so our JointJS MCP Server will help you get started right away, without having to wait for new AI training sets to kick in.

Learn more about JointJS+ for React.

Happy diagramming! 👋

FAQ

What is JointJS for React?

JointJS for React is a production-grade diagramming library designed for React applications. It provides a truly idiomatic React API, connecting the trusted JointJS engine directly with React’s lifecycle without the need for wrappers or workarounds.

How is JointJS+ for React different from other diagramming libraries?

JointJS+ for React handles everything a serious diagramming library needs, from the essentials to advanced features like undo/redo, copy/paste, multi-select, snap-to-grid, and direct integration with React state.

Performance as well as scalability are built in from day one, even for large diagrams. On top of this, the library provides superior UX features that will help you create intuitive and usable apps.

What kinds of apps is JointJS+ for React best suited for?

JointJS+ for React is ideal for AI workflow editors, BPMN modelers, industrial automation dashboards, network visualizations, circuit design tools, and any application where diagramming is a core feature and enterprise-level reliability is required.

What are the key features included out of the box in JointJS+ for React?

JointJS+ for React includes a number of advanced features:

SVG-based rendering with full custom shape support
High performance for large diagrams (virtual rendering, async updates)
Comprehensive suite of out-of-the-box user experience (UX) and User Interface (UI) features
Built-in rich interactions (undo/redo, clipboard, snap-to-grid, keyboard shortcuts)
Comprehensive layout algorithms (tree, force-directed, grid, and stack layouts)
Domain-specific shapes (BPMN, value stream, data modeling, and more)
Effortless export (SVG, PNG, PDF)
TypeScript-first API

Is there a live demo or starter project?

Yes! There is an AI Workflow Builder application template with full source code available. You can explore, clone, and customize it as a starting point for your project.

How do I get started?

Check out the documentation or try the live demo. New to JointJS+? Start a 30-day no-commitment trial, which now includes JointJS+ for React. If you're already a JointJS+ customer, download the latest package using npm or from our customer portal. If your update subscription expired, reach out to us for re-activation.