← Back to archive

Repo of the Day

clientIO/joint: A proven SVG-based JavaScript diagramming library powering exceptional UIs

Published: Sep 23, 2026

Open repository ↗

A proven SVG-based JavaScript diagramming library powering exceptional UIs - clientIO/joint

Summary

JointJS is an open-source JavaScript/TypeScript library for building interactive, SVG-based diagrams in the browser. It targets production-scale visual applications such as flowchart editors, BPMN modelers, ER diagram tools, SCADA/HMI dashboards, energy network views, and org chart builders, and is released under the Mozilla Public License 2.0.

What it is useful for

JointJS is useful when an application needs a canvas where users can place shapes, connect them with routed links, and inspect or edit the underlying graph. According to the README, it ships essential shape primitives (rect, circle, ellipse, text, image, path), ready-made elements for ERD, Org chart, FSA, UML, and PN diagrams, custom SVG-based elements, configurable links with arrowheads and labels, ports, hierarchical containers, automatic layouts, zoom, and touch input. The graph API includes traversal, depth-first and breadth-first search, and neighbor queries, and graphs can be serialized to and from JSON. JointJS is framework-agnostic, with first-class React support and documented integration guides for Angular, Vue, Svelte, and Salesforce Lightning. It also exposes an MCP server endpoint so AI coding agents such as Claude Code or Cursor can search official docs and demos while generating code.

How engineers can use it

The README does not include a one-line install command for consuming the library, so production usage is documented at jointjs.com. For working on JointJS itself, the documented local setup is:

  1. Install Node.js 22.14.0, grunt-cli, git, and Yarn ≥ 2.0.0.
  2. Clone the repository, then run yarn install and yarn run dist.
  3. Browse demos under examples/ or packages/joint-core/demo, opening index.html in a supported browser (latest Chrome, Firefox, Safari, Edge, or Opera).
  4. Validate changes with yarn run test, yarn run lint, or yarn run test-coverage.

A documented limitation is scope: the open-source core covers diagramming primitives, while production-ready plugins such as stencils, inspectors, toolbars, advanced layouts, and import/export are part of the separate commercial JointJS+ product, not the MIT/MPL-licensed repo.