‣ Need something fast? We offer professional custom development services.
JointJS and Rappid Comparison
Quickly compare the included features of the free JointJS library and the paid commercial extension, Rappid, 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.
Rappid
PAID
Rappid 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
Rappid
Custom Shapes Define custom - and interactive - shapes using a combination of SVG and JointJS/Rappid 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.
