JointJS+

You may see the name Rappid in our documentation, code and other materials. Rappid has been replaced by a new brand, JointJS+. This change has no effect on functionality. To avoid confusion, please consider Rappid and JointJS+ as synonyms. Read more here.


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.
  • com - Communication with the server. It currently only contains a module for Real-time collaboration.
  • shapes - Different kinds of diagrams shapes including a wide range of charts.
  • format - Exports to vector and raster formats, imports and print.
  • storage - Storage.
  • alg - Algorithms and data structures.
  • layout - Automatic layouts.

Installation

Include rappid.min.css and rappid.min.js files to 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>
Rappid toolkit Rappid toolkit Rappid toolkit: Charts plugin Rappid toolkit: BPMN plugin Rappid toolkit: Pie charts Rappid toolkit: Donut charts Rappid toolkit: Knobs Rappid toolkit: BPMN Editor Rappid toolkit: Area charts