Quickly compare the included features of the free JointJS library and the paid commercial extension, JointJS+, to decide which is right for you.
JointJS
FREE
JointJS Core is the free, open source library which natively supports visualization and interaction with diagrams, graphs and more.
JointJS+
PAID
JointJS+ is the paid commercial extension to JointJS Core and extends functionality with widgets, interaction components, additional shapes and more, to build advanced HTML5 applications.
Feature and Description
JointJS
JointJS+
Custom Shapes Define custom - and interactive - shapes using a combination of SVG and JointJS/JointJS+ APIs that ease creation of these shapes (elements or links with optional labels).
✔
✔
Graph Data Model Strong underlying graph data model with rich API for programmatic graph manipulation.
✔
✔
JSON Import / Export Export your diagrams to JSON for easy back-end front-end transfer and DB storage. Import them back from JSON to recover the diagram state as it was.
✔
✔
Custom Properties Hook your own custom data to any shape, link or the entire diagram. Custom properties are handled as first-class citizens (export/import to/from JSON, event handling works for them as with any other property.
✔
✔
Interactive Diagrams Interactive shapes and links (moving, rotation, linking, ...).
✔
✔
Read-Only View Set your diagrams to a non-interactive mode at any time for read-only view.
✔
✔
Built-In Shapes Ready-to-use set of built-in shapes for most popular diagrams (rectangles, ovals, lines, ERD, State machines, Logic, ORG, ...). Use them as-is or customize to suit your need.
✔
✔
Rich Set of Events React on anything that happens in your diagrams (movement, property changes, structural changes, ....) and run custom code.
✔
✔
Smart Link Routing Smart routing of links to avoid other shapes or obstacles.
✔
✔
Support for Ports Easy API for adding, removing, updating and connecting ports. Ports can be added to any shape.
✔
✔
Fast Graph Traversal Algorithms Fast algorithms for graph traversal, including (but not limited to) retrieving successors, predecessors, sources, sinks, neighbors, BFS & DFS search, subgraphs, common ancestors, ...
✔
✔
Geometry Math API Geometry API providing a rich set of functions that deal with math in 2D space (rectangles, lines, curves, ovals, points, ...).
✔
✔
SVG Mini Library A low-level helper SVG library with API that eases working with SVG. Optional in normal circumstances but very useful for heavy customizations.
✔
✔
Control Panels A configurable and skinnable control panel above diagram shapes to keep important tools close at hand.
✘
✔
Element Palettes Element palette with accordion like grouping for drag&drop of shapes onto the diagram.
✘
✔
Export Export your diagrams to other useful formats such as JSON, PNG, JPEG or SVG.
✘
✔
Free Transform Resize and rotate your shapes on all sides and in any direction, including when rotated.
✘
✔
Undo / Redo Undo and redo actions down to an arbitrary level and as often as needed.
✘
✔
Automatic Layouts Automatically layout your diagrams in a tree, grid or any directed or undirected graph.
✘
✔
Inline Text Editor Add powerful (rich-text) inline text editing to any textual label of your shapes.
✘
✔
Validator Make sure your diagrams are always in the state you need them to be by automatically cancelling invalid actions.
✘
✔
Snaplines Snaplines (a.k.a Guidelines) are great for guiding the user in aligning shapes in your diagrams.
✘
✔
Selection Selection provides shapes multi-selection, moving the selection in one go and manipulating the selection in terms of selecting/deselecting individual elements (cherry-picking).
✘
✔
Navigator Displays a smaller interactive view into a larger diagram for quick navigation.
✘
✔
Inspector Easilly configurable properties editor and viewer for your diagram model and shapes.
✘
✔
Lightbox Display images in a ligthbox widget.
✘
✔
Keyboard A high-level and cross-browser API for handling single keystrokes or key combinations in your diagramming applications.
✘
✔
Path Drawer An interactive widget for drawing vector shapes (both primitive and curves).
✘
✔
Path Editor An interactive widget for editing vector shapes (both primitive and curves).
✘
✔
Zoom & Pan Zoom, scroll and pan your diagrams (optionally) using animation transitions.
✘
✔
Popups Configurable and skinnable popups for images, text or other diagrams.
✘
✔
Tooltips Configurable and skinnable tooltips for images, text or other diagrams.
✘
✔
Toolbar Configurable and skinnable toolbar panel with custom buttons, inputs, selected boxes, ranges and other widgets.
✘
✔
Flash Message Display "flash" messages in your applications (possibly animated and with automatic handling of stacking multiple messages).
✘
✔
Dialogs Display both modal and non-modal dialogs in your applications.
✘
✔
Context Toolbars Contextual menus that can be hook on any element or shape in your apps.
✘
✔
Clipboard Enable copy-pasting of diagrams or their parts either within one diagram or even between browser tabs or page refreshes.
✘
✔
Color Palette UI widget for displaying dropdowns with color palette.
✘
✔
Print Enable printing diagrams or their parts using the browser print dialog. Includes a UI for interactive diagram area selection and header/footer definition.
✘
✔
Graph Shortest Path algorithm Find the shortest path between any two nodes in a diagram.
✘
✔
BPMNs BPMN set of shapes.
✘
✔
Charts Plots, Bars, Area, Pie & Donuts, Matrix and Knobs. Interactive charts are just like any other shapes so that you can embed them in your diagrams to display e.g. real-time data.
