Integrating JointJS with RequireJS

Some people ask how to integrate JointJS with the RequireJS module loader. This tutorial describes how to do just that. Starting from JointJS v0.9, it is actually pretty simple. JointJS is in the AMD format which makes it easy to use it with RequireJS. JointJS exports only one global variable joint.


Let's start with our index.html file. This file includes only the require.js library, our stylesheets and defines what is the starting point of our application (in our case, main.js file):

<!DOCTYPE html>
      <link rel="stylesheet" href="joint.css" />
      <div id="app"></div>
      <script data-main="main" src="require.js"></script>
For simplicity, we assume all the files are in the same folder as our index.html file.

RequireJS config, the main.js file

Now we can start with the more interesting part, our main.js file, containing the configuration of our modules needed by RequireJS. JointJS is dependent on jQuery, Backbone (which further depends on Underscore*).

The only thing we have to do is to define our module names and tell RequireJS where to find them (the paths object). Next, we have to trick Backbone to use Lodash instead of Underscore (this is because JointJS requires Lodash, not just Underscore). All the files can be downloaded from Download page.

    paths: {
        jquery: './jquery',        
        lodash: './lodash',
        backbone: './backbone'
    map: {
        '*': {
            // Backbone requires underscore. This forces requireJS to load lodash instead:
            'underscore': 'lodash'

// Now we're ready to require JointJS and write our application code.
require(['joint'], function(joint) {
    var graph = new joint.dia.Graph;
    var paper = new joint.dia.Paper({ width: 600, height: 400, model: graph });

    var elApp = document.getElementById('app');

    var rect = new joint.shapes.basic.Rect({
        position: { x: 50, y: 50 },
        size: { width: 100, height: 100 }

* Note we previously mentioned that Backbone is dependent on Underscore but we actually use the Lodash library instead. This is becausae Lodash library is a drop-in replacement for Underscore extending it with more features that JointJS uses.