React

If you want to integrate JointJS+ with React, you're in the right place! This tutorial will help you create a project, and after a few minutes, have a working JointJS+ React application.

The source code for this tutorial can be found on GitHub. Looking for a different version of your favourite framework? Be sure to checkout the different branches of the repository to see if you find what you need.

info

This tutorial adds JointJS+ via a joint-plus.tgz installable archive. Sign up to receive yours! If using the open-source JointJS library, you can still adapt the following integration steps to React and the @joint/core package. Just follow the JointJS code in our Quickstart guide instead.

Create a React project

In order to create our React project, we will follow the recommended setup in the React documentation.

npm create vite@latest joint-plus-tutorial-react -- --template react-ts

After the setup is complete, we can change to the correct directory.

cd joint-plus-tutorial-react

Add JointJS+ to the React project

We can add JointJS+ to the project by placing the installable archive joint-plus.tgz in the root directory of the React application, and installing @joint/plus via our preferred package manager. All project dependencies will be installed alongside @joint/plus too.

npm

npm add joint-plus.tgz

pnpm

pnpm add ./joint-plus.tgz

yarn

yarn add @joint/plus@file:joint-plus.tgz

Build the React application

Before we get started, let's clean up the existing project a little bit.

• Remove all CSS rules in src/index.css and src/App.css
• Open src/App.tsx
  • Remove the named import useState from the curly brackets, and both logo import declarations
  • In the App() component, remove the useState line, and all the markup inside return

The current state of App.tsx should be as follows:

import {} from 'react';
import './App.css';

function App() {
    return ();
}

export default App;

Let's add some global styles by placing the following CSS rules in src/App.css.

@import "@joint/plus/joint-plus.css";

body {
    margin: 0;
}

#root {
    height: 100vh;
    width: 100vw;
}

.canvas {
    width: 100%;
    height: 100%;
}

.joint-paper {
    border: 1px solid #A0A0A0;
}

Now that the basic setup is completed, we are ready to create our JointJS+ React application. We will take advantage of 2 React features in our App.tsx component. useEffect allows us to run code after the component is first rendered in the DOM, and useRef allows us to interact with our component programmtically via a reference to a rendered element.

The relevant JointJS+ code is also imported.

import { useEffect, useRef } from 'react';
import { dia, ui, shapes } from '@joint/plus';
import './App.css';

function App() {

    const canvas = useRef<Element | null>(null);

    useEffect(() => {

    }, []);

    return (
        <div className="canvas" ref={canvas}/>
    );
}

export default App;

Inside the useEffect hook, we can add the Graph, Paper, and PaperScroller.

const graph = new dia.Graph({}, { cellNamespace: shapes });

const paper = new dia.Paper({
    model: graph,
    background: {
        color: '#F8F9FA',
    },
    frozen: true,
    async: true,
    cellViewNamespace: shapes
});

const scroller = new ui.PaperScroller({
    paper,
    autoResizePaper: true,
    cursor: 'grab'
});

We'll also append the PaperScroller to our ref that we created earlier. Afterwards, we can render our PaperScroller component, and position the Paper in the center of the PaperScroller viewport.

canvas.current?.appendChild(scroller.el);
scroller.render().center();

Next, we can create a simple Rectangle shape, add it to our Graph, and unfreeze the Paper.

const rect = new shapes.standard.Rectangle({
    position: { x: 100, y: 100 },
    size: { width: 100, height: 50 },
    attrs: {
        label: {
            text: 'Hello World'
        }
    }
});

graph.addCell(rect);

paper.unfreeze();

Lastly, we want to perform a little clean up, so we don't introduce a memory leak in our application. Once again, this code is added in useEffect.

return () => {
    scroller.remove();
    paper.remove();
};

That's all it takes to create a simple JointJS+ React application. The final application code is as follows:

import { useEffect, useRef } from 'react';
import { dia, ui, shapes } from '@joint/plus';
import './App.css';

function App() {

    const canvas = useRef<Element | null>(null);

    useEffect(() => {
        const graph = new dia.Graph();

        const paper = new dia.Paper({
            model: graph,
            background: {
                color: '#F8F9FA',
            },
            frozen: true,
            async: true,
            cellViewNamespace: shapes
        });

        const scroller = new ui.PaperScroller({
            paper,
            autoResizePaper: true,
            cursor: 'grab'
        });

        canvas.current?.appendChild(scroller.el);
        scroller.render().center();

        const rect = new shapes.standard.Rectangle({
            position: { x: 100, y: 100 },
            size: { width: 100, height: 50 },
            attrs: {
                label: {
                    text: 'Hello World'
                }
            }
        });

        graph.addCell(rect);
        paper.unfreeze();

        return () => {
            scroller.remove();
            paper.remove();
        };

    }, []);

    return (
        <div className="canvas" ref={canvas}/>
    );
}

export default App;

To serve our JointJS+ React application, we can use npm run dev. Lastly, let's visit the url suggested by our terminal in the browser, and we should see our JointJS+ React application!

See it in action

Here is the example of a React application with integrated JointJS+:

Open Sandbox

Frequently asked questions

How can I integrate JointJS with React?

Use the React tutorial to get started - see above.

Learn more...

The key to understand with the React tutorial is that it serves as a template to which the code from other JointJS examples can be added - see below.

tip

Your JointJS+ package contains two boilerplate JointJS + React applications out-of-the-box:

• Chatbot (online demo) - source code can be found in the unzipped JointJS+ package in the folder apps/Chatbot/ReactTs. An equivalent version using Redux can be found in the unzipped JointJS+ package in the folder apps/Chatbot/ReactReduxTs.

• KitchenSink (online demo) - source code can be found in the unzipped JointJS+ package in the folder apps/KitchenSink/ReactTs. An equivalent version written in JavaScript can be found in the unzipped JointJS+ package in the folder apps/KitchenSink/ReactJs.

You should inspect their source code to identify some of the best practices for writing a full-featured JointJS+ app inside a React environment.

We also provide additional example content written specifically in React - see below.

Do you have demo X available in React?

We have a few demos written specifically in React, but not all of them. However, the modular nature of JointJS makes it possible to adapt any JointJS example to React - see below.

Learn more...

React examples in your trial package:

In the JointJS+ trial package, you can find React versions of our Chatbot and KitchenSink applications:

• Chatbot (online demo) - source code can be found in the unzipped JointJS+ package in the folder apps/Chatbot/ReactTs. An equivalent version using Redux can be found in the unzipped JointJS+ package in the folder apps/Chatbot/ReactReduxTs.

• KitchenSink (online demo) - source code can be found in the unzipped JointJS+ package in the folder apps/KitchenSink/ReactTs. An equivalent version written in JavaScript can be found in the unzipped JointJS+ package in the folder apps/KitchenSink/ReactJs.

React examples in our React tutorial GitHub repository:

We also provide our Diagram Index and Tabs demos in React. The source code can be found on GitHub at the links below:

• Diagram Index (online demo) - source code can be found in a branch of our React tutorial GitHub repository.

• Tabs (online demo) - source code can be found in a branch of our React tutorial GitHub repository.

tip

Make sure to check out the other branches of the repository for additional React content.

Other React content:

The following GitHub repository demonstrates how to create the JointJS Paper as a React component - https://github.com/clientIO/joint-paper-react/tree/master.

We also have a React tutorial, which covers the basics of the integration - see above.

How can I add the code from a JointJS example to my React application?

Most of our demos / applications / CodePens aren't written specifically in React, but the modular nature of JointJS makes it possible to adapt any JointJS example to React.

Learn more...

Use the React tutorial to get started - see above.

The key to understand with the React tutorial is that it serves as a template to which the code from other examples can be added. If you get the demo from the tutorial working, then you are 90% of the way there to get any other JointJS example working in React.

Basically, the application created in the React tutorial acts as a shell, into which you can copy-paste any JointJS code. You just need to use the paper and graph variables from the tutorial's useEffect() function to orient yourself - all JointJS examples have these variables as well. Simply copy-paste paper + graph + all other JointJS code from the example into the useEffect() function in the tutorial application you got working, and almost all functionality will start working out-of-the-box.

Does JointJS work in React Native?

Yes, in a limited way - see below.

How can I use JointJS inside a React Native app?

You can only use JointJS inside a React Native app as an embedded WebView (in an iframe).

Learn more...

To learn more about using iframes in React Native, refer to this StackOverflow question.