JointJS: an SVG diagramming library for production editors

Who JointJS is for and what it replaces

JointJS describes itself as a proven SVG-based JavaScript diagramming library. The examples directory shows the kind of diagrams it is used for, from activity diagrams (examples/activity-diagram-js/) and animated process flow diagrams (examples/animated-process-flow-diagram-js/) to custom shapes, containers, callouts and an electric generator demo.

The releases include a separate @joint/react package (4.3.7), and the examples include an Angular element view (examples/angular-element-view-ts/).

The MVC split behind JointJS diagrams

JointJS renders diagrams as SVG. Links are the part with the most machinery, and the examples directory covers it piece by piece: anchors (anchors-ts), connection points (connection-points-ts), connectors (curve-connector-js, connector-arrows-js, bezier-js) and ports (absolute-port-layout-dynamic-port-sizes-js). The repository publishes a separate @joint/router-avoid package, and the examples directory contains an avoid-router-ts example, so obstacle-avoiding routing is a distinct concern rather than something baked into the core.

Installing @joint/core and drawing a first diagram

The repository is a Yarn workspace monorepo, and the packages published from it include @joint/core, @joint/layout-directed-graph, @joint/layout-msagl and @joint/router-avoid. For application code you consume the published packages rather than cloning the repository.

If you do want to work on the library itself, the root package.json pins Node 22.14.0 and Yarn 4.18.0 through its volta field. The setup sequence is clone, install, build the distribution files:

git clone https://github.com/clientIO/joint.git
cd joint
yarn install
yarn run dist

After that, you can browse the example applications in the examples directory.

The repository also documents the test and lint entry points, all run through Yarn workspaces:

yarn run test
yarn run test-server
yarn run test-client
yarn run test-ts
yarn run lint

The test script fans out to every workspace, and package.json defines separate commands for server-side, client-side and TypeScript tests.

What the open source package does not include

The repository is not archived and the last push was on 2026-10-29, so the project is not dormant. Releases are managed with changesets, and the recent releases include @joint/vitest-plugin-mock-svg 0.4.0, @joint/react 4.3.7 and @joint/layout-elk 4.3.4, all dated 2026-10-27. Note that the root package.json carries version 4.3.1 while the published packages carry their own versions, such as @joint/react 4.3.7; the root is a private workspace manifest, not the published artifact, so pin the package version rather than the repository version.

JointJS compared with a general-purpose canvas library

A canvas-based library such as one that draws to an HTML canvas element takes the opposite approach. It gives you a fast drawing surface and a scene graph, and you implement hit testing, connection semantics, serialization and layout yourself. For a large number of simple shapes, that can be the better trade: SVG creates a DOM node per element, and very large graphs put pressure on the browser's layout and paint work.

JointJS chooses SVG and accepts that cost in exchange for things that are hard to retrofit. Elements are DOM nodes, so CSS applies, text is real text, and accessibility tooling has something to attach to. The library also ships automatic layouts and a directed-graph layout package in the same workspace, which a raw canvas library leaves entirely to you.

The practical dividing line is what your users do with the diagram. If they look at it, a canvas renderer is often sufficient. If they edit it, connect it, embed nodes inside nodes, and expect links to route around obstacles, the model and routing work that JointJS already contains is the reason to pick it.

Maintenance, upgrades and licence implications

Upgrades are managed through changesets, which is visible from the .changeset directory in the repository root and the @changesets/cli dependency in package.json. That tooling produces per-release changelogs, so you can read what changed between versions of @joint/core rather than diffing the source. The packages version independently: @joint/core, @joint/react and @joint/router-avoid each carry their own release number, so an upgrade plan has to track them separately.

Contributing has its own cost. The root package.json pins Node 22.14.0 and Yarn 4.18.0 through its volta field. A team building an application never touches these constraints, but a team forking the library inherits them.

On licensing, the repository is MPL-2.0 and the root package.json declares the same. MPL-2.0 is a file-level copyleft licence: modifications to covered files carry obligations when distributed, while larger works that combine the library with your own code are treated separately. This is a description of what the repository states, not legal advice; if you plan to modify the library and distribute it, read the licence text and get your own counsel.

Editorial conclusion

Adopt JointJS if you are building a diagram editor inside a web application and you need ports, link routing and automatic layouts rather than a drawing surface. Before committing, verify that @joint/core on npm matches the version you intend to pin.

Frequently asked questions

Official sources

1. clientIO/joint on GitHub
2. License: MPL-2.0
3. Project website
4. README
5. Releases