JointJS features

Explore the features of our powerful library

After more than a decade and millions of lines of code written, we're introducing a set of ready-to-use features to help you create fully interactive diagramming tools such as IVR systems, workflow automation software, and much more.
JointJS+ features
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
JointJS+ demo applicationsJointJS+ demo applications
Explore all demos
Customizibility

Easily customizable

Every part of the UI can be easily customized to suit your style. Plus, it can be embedded in any page and communicate via AJAX and JSON with any back-end.

JointJS documentation

Well documented with superior support

We simplify the complexity of 2D graphics, document every part of our library, and provide cutting-edge support to bring your vision to life faster.

comparison

Features

JointJS logoJointJS+ logo
Shapes
JointJS logoJointJS+ logo
Feature icon
Essential Shapes
Arrow icon

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

Check icon
Cross icon
Check icon
Feature icon
Custom Shapes
Arrow icon

Customizable shapes to create any JointJS diagram you can imagine.

Check icon
Cross icon
Check icon
Feature icon
Featured Shapes
Arrow icon

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

Check icon
Cross icon
Check icon
Diagram Essentials
JointJS logoJointJS+ logo
Routers, Connectors & Anchors
Arrow icon

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

Check icon
Cross icon
Check icon
Element & Link Tools
Arrow icon

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

Check icon
Cross icon
Check icon
Events
Arrow icon

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

Check icon
Cross icon
Check icon
Highlighters
Arrow icon

Provide additional visual emphasis to elements and links.

Check icon
Cross icon
Check icon
Automatic Layouts
JointJS logoJointJS+ logo
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.

Check icon
Cross icon
Check icon
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.

Check icon
Cross icon
Check icon
Additional Layouts
Arrow icon

Grid, Tree, Stack & Force Directed layouts.

Check icon
Cross icon
Check icon
Additional Layouts
Arrow icon

Grid, Tree, Stack & Force Directed layouts.

Check icon
Cross icon
Check icon
Graph & Data
JointJS logoJointJS+ logo
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
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.

Check icon
Cross icon
Check icon
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.

Check icon
Cross icon
Check icon
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.

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.

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.

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.

Check icon
Cross icon
Check icon
Integration
JointJS logoJointJS+ logo
Geometry & Vectorizer Libraries
Arrow icon

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

Check icon
Cross icon
Check icon
Dagre & Graphlib Libraries
Arrow icon

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

Check icon
Cross icon
Check icon
JavaScript Frameworks
Arrow icon

Seamless integration with your favourite JavaScript frameworks.

Check icon
Cross icon
Check icon
Export / Import
JointJS logoJointJS+ logo
JSON
Arrow icon

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

Check icon
Cross icon
Check icon
Image
Arrow icon

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

Check icon
Cross icon
Check icon
SVG
Arrow icon

Export your diagrams as a vector based graphic.

Check icon
Cross icon
Check icon
Canvas
Arrow icon

Export your diagrams to 2D HTMLCanvas / Bitmap.

Check icon
Cross icon
Check icon
Visio
Arrow icon

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

Check icon
Cross icon
Check icon
Print
Arrow icon

Prepare your JointJS diagrams for printing.

Check icon
Cross icon
Check icon
Components
JointJS logoJointJS+ logo
Property Editor and Viewer
Arrow icon

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

Check icon
Cross icon
Check icon
Element Palette
Arrow icon

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

Check icon
Cross icon
Check icon
Inline Text Editing
Arrow icon

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

Check icon
Cross icon
Check icon
Zoom & Scroll
Arrow icon

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

Check icon
Cross icon
Check icon
Minimap
Arrow icon

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

Check icon
Cross icon
Check icon
Copy & Paste
Arrow icon

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

Check icon
Cross icon
Check icon
Keyboard
Arrow icon

Create keyboard shortcuts for your JointJS+ applications.

Check icon
Cross icon
Check icon
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.

Check icon
Cross icon
Check icon
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+.

Check icon
Cross icon
Check icon
Toolbar
Arrow icon

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

Check icon
Cross icon
Check icon
Tooltips
Arrow icon

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

Check icon
Cross icon
Check icon
Path & Transformation
Arrow icon

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

Check icon
Cross icon
Check icon
Drag & Drop
Arrow icon

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

Check icon
Cross icon
Check icon
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.

Check icon
Cross icon
Check icon

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.