JointJS+

JointJS+ is a powerful and modern toolkit for building visual tools of various kinds. This documentation gives you an overview and many examples on how you can use the plugins of the JointJS+ toolkit to build groundbreaking applications in a fraction of the time.

If you're looking for documentation on the core JointJS library, go to the JointJS API reference page.

For more information about the JointJS+ toolkit, licensing and online purchase, see the About JointJS+ page.

Browse through the menu on the left to see the documentation for the JointJS+ plugins.

The JointJS+ toolkit is split into modules. Every plugin has a module identifier in its name. This helps you in orientating around the framework. Here is the list of modules with a short description:

ui - User Interface Widgets. These widgets are user facing components that the user can interact with.
dia - Programmer's toolkit. This includes undo/redo, graph manipulation, validation and more.
shapes - Different kinds of diagram shapes including a wide range of charts, BPMN shapes, and Record shapes.
format - Exports to vector and raster formats, imports and print.
storage - Storage.
alg - Algorithms and data structures.
layout - Automatic layouts.
elementTools - Render a certain type of control element on top of an ElementView.
graphUtils - Utilities for algorithms and data structures.

Installation

Include rappid.min.css and rappid.min.js files in your HTML together with all the JointJS+ dependencies (jQuery, Lodash and Backbone).

<link rel="stylesheet" type="text/css" href="dist/rappid.min.css">
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/lodash/dist/lodash.min.js"></script>
<script src="lib/backbone/backbone-min.js"></script>
<script src="dist/rappid.min.js"></script>

It is highly recommended to use the exact same versions of all the dependencies as they are included in the package.

Note that each component documentation page has an Installation section. You do not need to follow the instructions from the section if you installed JointJS+ as described above (with rappid.min.js, rappid.min.css and all the dependencies). The Installation section of the components is only useful if you do not want to include the whole framework but only some of its components. In this case, you have to include all the dependencies, the JointJS Core library and then only the components you want to use:

<link rel="stylesheet" type="text/css" href="dist/joint.css">
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/lodash/dist/lodash.min.js"></script>
<script src="lib/backbone/backbone-min.js"></script>
<script src="dist/joint.js"></script>

// And now, for example, only the ui.Stencil component:
<link href="dist/joint.ui.stencil.css" rel="stylesheet" type="text/css">
<script src="dist/joint.ui.stencil.js"></script>