clientIO/joint

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.

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

• 🚀 Getting started guide
• 💡 Ask a question or share feedback in our GitHub discussions
• 🖊️ 180+ demo apps to kickstart your development
• 🤖 MCP server integration for AI coding agents
• ⚛️ New: JointJS for React — build diagramming UIs in your React app

Use cases

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

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:

• React — native components and hooks (JointJS for React)
• Angular
• Vue
• Svelte
• Salesforce Lightning

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:

• Node.js
• grunt-cli
• git
• yarn

The installation requires Node version >= 20.19.3, 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