[opensourcedex]

joint is a free, open source automation project written in JavaScript and released under MPL-2.0. It has 5,385 GitHub stars, 893 forks and 49 open issues, and was last pushed 13 hours ago. On this registry it ranks #28 of 54 tracked projects in Automation, with 5 head-to-head comparisons available. It gained 5 stars over the last 3 tracked days.

What is joint?

JointJS is an MPL-2.0-licensed, SVG-based JavaScript and TypeScript diagramming library for teams building production-scale diagramming UIs such as AI workflow builders, BPMN modelers, SCADA/HMI dashboards, and data modeling tools.

What it is

JointJS is an open-source JavaScript and TypeScript library that renders interactive diagrams as SVG in the browser. It is framework-agnostic and ships first-class native support for React through JointJS for React components and hooks, with integration guides for Angular, Vue, Svelte, and Salesforce Lightning. The library follows an MVC architecture and is highly event driven, so any event raised inside a diagram can be observed and answered. The repository has 5,382 stars, 893 forks, 49 open issues, and its last push was 2026-09-16.

The concrete problem it solves is the diagram plumbing that teams otherwise write themselves: an SVG drawing layer, a graph model, link routing, port positioning, automatic layouts, and interaction handling. JointJS supplies those pieces — a graph API, link shapes with anchors, connection points, vertices, routers and connectors, plus JSON import and export — so a diagram editor is assembled rather than invented. The README frames this as the library "you don't replace at scale."

Key capabilities

  • Essential diagram elements: rect, circle, ellipse, text, image, path.
  • Ready-to-use elements for known notations including ERD, Org chart, FSA, UML, PN and DEVS, plus custom elements based on SVG or rendered programmatically.
  • Link support for element-to-element and link-to-link connections, with customizable arrowheads, labels, anchors, connection points, vertices, routers and connectors.
  • Customizable element ports, covering look and position, distributed around shapes or positioned manually.
  • Rich graph API: traversal, dfs, bfs, find neighbors, predecessors, elements at point.
  • Import and export from and to JSON format.
  • Element and link tools (buttons, status icons, link reshaping tools), highlighters, automatic layouts, zoom in and out, and touch support.
  • MCP server at https://mcp.jointjs.com/mcp for AI coding agents such as Claude Code and Cursor.

Who uses it and how

  • Workflow and process teams build flowchart editors, process automation tools, and activity or sequence diagrams.
  • AI product teams build node-based AI pipeline and agent builders, and marketing automation studios.
  • BPMN work, including business process modelers, swimlanes, and Visio BPMN import and export.
  • Industrial and engineering teams build P&ID diagrams, monitoring and control dashboards, power and telecom network diagrams, DWDM circuits, logic circuits, wiring and cable diagrams.
  • Data, software and org modeling: ER diagrams, database schema designers, data mapping tools, UML class, sequence, statechart and use-case diagrams, org charts, and Gantt or PERT timelines.
  • Frontend teams pick the stack they already run: React gets native components and hooks, while Angular, Vue, Svelte and Salesforce Lightning follow integration guides and examples.

Getting started

The README points to the getting started guide at https://docs.jointjs.com and to 180+ demo apps at https://www.jointjs.com/demos that serve as boilerplates. An MCP server is available at https://mcp.jointjs.com/mcp for AI-assisted development.

How it compares

No comparable diagramming libraries are named in the facts provided, so this page cannot place JointJS against alternatives on licence, self-hosting, data ownership or cost model. Within this registry it stands alone as the SVG-based JavaScript diagramming entry.

When to use it — and when not to

Choose JointJS when a diagram editor is a core product surface and the team wants graph, link, port, layout and interaction primitives rather than bespoke SVG code. Be aware that the factual record here documents features and use cases but provides no package name, install command, or deployment procedure, so installation and hosting must be confirmed from the project documentation before committing. The repository is MPL-2.0 while documentation, demos and React support live on jointjs.com, so teams should verify licensing terms and support expectations for their own use case.

project readme (upstream, from github) — read inline

JointJS — The JavaScript diagramming library you don't replace at scale

JointJS is a proven JavaScript/TypeScript diagramming library for building complex, production-scale diagramming applications.

Teams use it to build AI workflow builders, flowchart and process editors, BPMN modelers, SCADA/HMI and monitoring dashboards, data modeling tools, energy network diagrams, electronic design tools, and org chart builders.

JointJS is framework-agnostic, with first-class support for React.

Use Cases

Further information, examples and documentation can be found at jointjs.com.

Use cases

JointJS is used to build production diagramming applications across many domains:

Domain Examples
Workflow & process Flowchart editors, process automation, activity and sequence diagrams
AI workflow builders Node-based AI pipeline and agent builders, marketing automation studios
BPMN Business process modelers, swimlanes, Visio BPMN import/export
Data modeling ER diagrams, database schema designers, data mapping tools
UML & software modeling Class, sequence, statechart and use-case diagrams
Industrial / SCADA & HMI P&ID diagrams, monitoring and control dashboards
Energy networks Power and telecom network diagrams, DWDM circuits
Electronic design Logic circuits, wiring and cable diagrams
Org charts Organizational charts, hierarchy and tree builders
Timelines Project and milestone timelines, Gantt and PERT charts

Explore all 180+ demo apps that serve as boilerplates for your project.

Framework integrations

JointJS is framework-agnostic and works with any frontend stack. React has first-class, native support; the others have integration guides and examples:

Features

  • essential diagram elements (rect, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...)
  • custom diagram elements based on SVG or programmatically rendered
  • connecting diagram elements with links or links with links
  • customizable links, their arrowheads and labels
  • configurable link shapes (anchors, connection points, vertices, routers, connectors)
  • custom element properties and data
  • import/export from/to JSON format
  • customizable element ports (look and position, distributed around shapes or manually positioned)
  • rich graph API (traversal, dfs, bfs, find neighbors, predecessors, elements at point, ...)
  • granular interactivity
  • hierarchical diagrams (containers, embedded elements, child-parent relationships)
  • element & link tools (buttons, status icons, tools to change the shape of links, ...)
  • highlighters (provide visual emphasis to your elements)
  • automatic layouts (arrange the elements and links automatically)
  • highly event driven (react on any event that happens inside the diagram)
  • zoom in/out
  • touch support
  • MVC architecture
  • SVG based
  • ... a lot more

Using JointJS with AI coding agents

JointJS is built to work well with AI-assisted development.

MCP server — connect your AI coding agent (Claude Code, Cursor, and other MCP-compatible tools) to the JointJS Model Context Protocol server so it can search the official docs and demos while you build.

https://mcp.jointjs.com/mcp

Exposes search_docs and search_demos so your agent writes correct JointJS code against the real API instead of guessing.

Supported browsers

  • Latest Google Chrome (including mobile)
  • Latest Firefox
  • Latest Safari (including mobile)
  • Latest Microsoft's Edge
  • Latest Opera

Commercial version

The open-source library covers core diagramming. JointJS+ adds production-ready plugins (stencils, inspectors, toolbars, advanced layouts, import/export, and more), professional demo apps (including source code), JointJS for React, and direct support from the team that builds the library. Start a free 30-day trial.

Development Environment

If you want to work on JointJS locally, use the following guidelines to get started.

Dependencies

Make sure you have the following dependencies installed on your system:

The installation requires Node version 22.14.0, to avoid syntax errors during installation.

Make sure that you are using Yarn version >= 2.0.0, so that you have access to Yarn workspace ranges functionality. If you are using Volta, it will automatically read this restriction from package.json.

Setup

Clone this git repository:

git clone https://github.com/clientIO/joint.git

Navigate to the joint directory:

cd joint

Install all dependencies:

yarn install

Generate distribution files from the source code:

yarn run dist

You are now ready to browse our example applications, which combine functionality from multiple JointJS packages:

cd examples

Refer to each application's README.md file for additional instructions.

You can also browse the demo applications of our JointJS Core package:

cd packages/joint-core/demo

Most demos can be run by simply opening the index.html file in your browser. Some demos have additional instructions, which you can find in their respective README.md files.

Tests

To run all tests:

yarn run test

To run only the server-side tests:

yarn run test-server

To run only the client-side tests:

yarn run test-client

To run only TypeScript tests:

yarn run test-ts

Lint

To check for linting errors in src and types directories:

yarn run lint

To auto fix errors, run eslint for src and types directories:

yarn run lint-fix

Code Coverage Reports

To output a code coverage report in HTML:

yarn run test-coverage

To output a code coverage report in lcov format:

yarn run test-coverage-lcov

The output for all unit tests will be saved in the packages/joint-core/coverage directory.

Contributors

License

The JointJS library is licensed under the Mozilla Public License 2.0.

Copyright © 2013-2026 client IO

Frequently asked questions

Is joint free to use?

joint is open source under the MPL-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does joint do?

A proven SVG-based JavaScript diagramming library powering exceptional UIs

What is joint written in?

joint is primarily written in JavaScript. Its source is publicly available at https://github.com/clientIO/joint, and it has 5,385 GitHub stars.