JointJS diagram

JointJS+, professional diagramming library for interactive UIs

A diagramming library for advanced visual applications that brings the best of HTML5 & SVG and provides everything for creating outstanding products.
JointJS+ diagram
demos

One library,
unlimited UI options

Enjoy interactive flowcharts, BPMN and other diagramming studios directly inside your app. Tap into our templated apps and cut development time to days.

Chatbot application built with JointJS+
Chatbot
Create an advanced Chatbot solution with an intuitive drag-and-drop editor.
MindMap application built with JointJS+
MindMap
Develop a diagramming solution that visually organises information into a hierarchy.
OrgChart application built with JointJS+
Organizational Chart
Experience the power of JointJS+ on one of the most widely used diagram types.
BPMN application built with JointJS+
BPMN
Build a visual application to model the steps of a business process from start to finish.
Arrow slider
Arrow slider
Ready-to-use applications built with JointJS+Ready-to-use applications built with JointJS+
Explore all demos
compatibility

It works everywhere

Our library is based on a strong HTML5 and SVG foundation that allows it to run seamlessly in all major JavaScript frameworks and modern browsers.

JointJS+ compatibilityJointJS+ compatibility
key features

Why developers love us

10+ years of work and experience has led to several areas where we excel today.

SVG

Scalable vector graphics

Vector graphics is the building block of our library. It renders perfectly, supports accessibility and makes interaction easier.
more infomration
Versatility

Versatility

Our library is used in a wide variety of industries and fields for all kinds of applications. Use one of our many demos as a boilerplate for your project and get results in no time.
more infomration
Customizibility

Customizability

Our library can serve everyone from novice programmers who benefit from a wide range of ready-to-implement features, to experienced developers who need as much customization as possible.
more infomration
Browser & framework friendliness

Browser & framework friendliness

Our library works on all devices and is compatible with all major JavaScript frameworks such as React, Angular, Vue and others.
more infomration
Exceptional support

Exceptional support

Our library is built by developers for developers. We know things can get complicated, and we're proud to provide top-notch support including conference calls, expert code reviews and other services to help you overcome any obstacle.
more infomration
Flexible pricing

Flexible pricing

JointJS+ is priced per developer, making it suitable for projects of any size. This means you can develop any number of products for any number of users on any number of machines without paying more.
more infomration
full list of features

Features of JointJS+

Focus on the underlying business logic and don't worry about the UI. Make use of ready-to-implement diagramming features and create your next visual application in days, not months.

comparison

Features

Shapes
Feature icon
Essential Shapes
Arrow icon

A set of standard, flexible shapes to get you started with diagramming.

Feature icon
Custom Shapes
Arrow icon

Customizable shapes to create any JointJS diagram you can imagine.

Feature icon
Featured Shapes
Arrow icon

Extra shapes such as BPMN, VSM, and table-like shapes and elements with scrollable content.

Diagram Essentials
Routers, Connectors & Anchors
Arrow icon

Built-in or custom routers, connectors and anchors to determine link behaviour.

Element & Link Tools
Arrow icon

Utilize built-in or custom control panels to manipulate shapes.

Events
Arrow icon

Enable user interaction by triggering events on the JointJS paper, or individual elements and links.

Highlighters
Arrow icon

Provide additional visual emphasis to elements and links.

Automatic Layouts
Default Layouts
Arrow icon

A wrapper for a 3rd party layout library to help layout directed graphs. JointJS also allows you to lay out ports and their labels with ease.

Additional Layouts
Arrow icon

Grid, Tree, Stack & Force Directed layouts.

Graph & Data
Fast Graph Traversal
Arrow icon

Fast algorithms for graph traversal, including (but not limited to) BFS & DFS search, and retrieving successors, predecessors & neighbors.

Fast Graph Traversal
Arrow icon

Fast algorithms for graph traversal, including (but not limited to) BFS & DFS search, and retrieving successors, predecessors & neighbors.

Check icon
Cross icon
Check icon
Custom Properties
Arrow icon

Easily hook your own custom data to any element, link, or diagram.

Custom Properties
Arrow icon

Easily hook your own custom data to any element, link, or diagram.

Check icon
Cross icon
Check icon
View & Model architecture
Arrow icon

Strong underlying graph data model with rich API for programmatic graph manipulation.

View & Model architecture
Arrow icon

Strong underlying graph data model with rich API for programmatic graph manipulation.

Check icon
Cross icon
Check icon
Undo / Redo
Arrow icon

Travel the history of graph changes, and undo/redo as much as you need with the Command Manager Component.

Undo / Redo
Arrow icon

Travel the history of graph changes, and undo/redo as much as you need with the Command Manager Component.

Check icon
Cross icon
Check icon
Validation
Arrow icon

Make sure your diagrams are always in the state you need them by determining if a command is valid or not.

Validation
Arrow icon

Make sure your diagrams are always in the state you need them by determining if a command is valid or not.

Check icon
Cross icon
Check icon
Integration
Geometry & Vectorizer Libraries
Arrow icon

Additional libraries that provide useful math and SVG operations for working with JointJS.

Dagre & Graphlib Libraries
Arrow icon

Integration with 3rd party libraries for laying out graphs and working with data structures.

JavaScript Frameworks
Arrow icon

Seamless integration with your favourite JavaScript frameworks.

Export / Import
JSON
Arrow icon

Data serialization with JSON objects to help export or import diagram representations.

Image
Arrow icon

Export your diagrams in useful image formats such as PNG or JPEG.

SVG
Arrow icon

Export your diagrams as a vector based graphic.

Canvas
Arrow icon

Export your diagrams to 2D HTMLCanvas / Bitmap.

Visio
Arrow icon

Import and export microsoft Visio archives translating them into JointJS diagrams.

Print
Arrow icon

Prepare your JointJS diagrams for printing.

Components
Property Editor and Viewer
Arrow icon

Configure properties for your diagram model and shapes in this Inspector component.

Element Palette
Arrow icon

Organize your shapes in the Stencil component, then drag & drop the elements to the JointJS paper.

Inline Text Editing
Arrow icon

Powerful inline rich-text editing with the Text Editor component.

Zoom & Scroll
Arrow icon

Find your way around JointJS diagrams with ease utilizing zoom and scroll functionality provided by the Paper Scroller component.

Minimap
Arrow icon

Navigate your JointJS diagrams with a small pannable interactive view using the Navigator component.

Copy & Paste
Arrow icon

Take advantage of copy & paste functionality via the Clipboard component.

Keyboard
Arrow icon

Create keyboard shortcuts for your JointJS+ applications.

Selection
Arrow icon

Store selected JointJS cells in a collection via the selection plugin, or create a control panel above a selected element via the Halo component.

Popups & Menus
Arrow icon

Provide some extra contextual information to your shapes via a popup, context menu, or several other modal style components available in JointJS+.

Toolbar
Arrow icon

Enrich your JointJS+ application functionality with easy to reach tools via the Toolbar component.

Tooltips
Arrow icon

Display positioned messages or technical information anywhere in your diagram UI via the Tooltip component.

Path & Transformation
Arrow icon

Easily edit and transform SVG paths with multiple JointJS+ plugins such as PathEditor or FreeTransform.

Drag & Drop
Arrow icon

Provide Drag & Drop functionality to users working with complex layouts via the TreeLayoutView and StackLayoutView plugins.

Measurement
Arrow icon

Give users some extra precision with snaplines for element alignment, or a set of shapes for displaying dimensions of objects, the distances between them, and their relative angles.

our customers

JointJS+, the first choice of industry leaders

We empower industry giants, startups and solopreneurs to build visual and No-Code/Low-Code applications faster and with confidence.

honest testimonials from our customers

JointJS+ allowed CELUS to focus all our efforts on developing our core technology, while still providing our users with a great diagramming experience. The library is fast to integrate and comes with a wide set of advanced features out of the box that saved us countless development hours. A great partner to have!
Rui Calsaverini
Engineering Director, CELUS GmbH
JointJS+ was really a great find, as it gave us a great boost in the diagramming frontend of our application. These guys know their business and give you a great support on your development. One of our requirements was to have a BPMN diagram support in our app and they quickly supplied this as a plugin to JointJS+!
José Miguel Gonçalves
Project Manager, Nov Inesc Inovação
The JointJS+ toolkit is the best solution we found as a full fledged diagramming library for the web. The JointJS team has been extremely responsive to our needs and it’s been great to help contribute back to the product throughout our development process.
Kevin Mansel
Senior Software Engineer, Patent Navigation
JointJS+ was the perfect product for us. We have used JointJS+ as the foundation to create an illustration tool for Sales relationships within a target organization. The product has been reliable, flexible, straightforward to integrate, and very easy for end users to understand.
Phil Cederstrom
Chief Technology Officer, Polaris I/O

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.