3 reasons to choose

JointJS over GoJS

Better rendering engine

SVG outperforms Canvas in many aspects. Don't choose a black box, choose a solution that renders perfectly and natively supports accessibility.

Easier development

All diagram elements are automatically added to the web page DOM which results in quicker debugging, more meaningful testing and easy application of CSS.

Flexible licensing

JointJS does not charge extra for additional deployments of your app and gives you access to unminified source code to allow auditing and modification.

Trusted by over 50 000 developers worldwide

Build a professional visual application with ease

Start a 30-day trial and get access to all JointJS+ features and demo applications.

start free trial

comparison

Feature comparison

Integration with all major JavaScript frameworks

Demonstrated integration with React, Angular and Vue.

Unminified source code

Access to unminified source code of the library at no extra cost.

No restrictions on use of the standard license

Perpetual unlimited commercial use of the license at no extra cost (e.g. based on number of deployed apps, end-users, and/or machines).

Dedicated support available

Private support channel with guaranteed SLAs offered at extra cost.

Easy-to-implement accessibility

All diagram components are natively part of the web page DOM, enabling basic support for screen reader technology.

Ease of development

Frontend developers can leverage their usual tools for quick debugging, meaningful testing and easy application of custom CSS.

Virtualization functionality

Ability to handle large number of objects efficiently by rendering only the visible area of the diagram.

Extensive set of UI components

Provides a large collection of reusable diagram components (e.g. element palette, minimap, context menu, tooltip).

Advanced diagram functionality

Advanced tools for working with diagram nodes and edges (e.g. custom buttons, automatic edge routing).

Advanced control interactions

Support for touch events and custom keyboard shortcuts.

Wealth of graph layout algorithms

Support for orgchart, flowchart and force-directed automatic graph layouts.

Variety of export tools

Provides various export options such as PNG, JPEG, SVG or PDF.

BPMN shapes

Offers a collection of pre-made reusable BPMN shape definitions.

Detailed API documentation

API documentation provides sufficient technical detail for custom development.

Numerous demos

Offers a rich collection of pre-built demo applications that can be used as templates for your project.

Comprehensive tutorial

Helps with kickstarting your development with a thorough training path.

Unlock all JointJS+ features for free

Start a no-obligation 30-day trial and get access to all premium features and plugins.

start free trial

Code examples

JointJS excels in code cleanliness and structure, which makes life easier for developers. In this snippet, see a code comparison of a simple definition of two linked elements and make an educated choice when selecting a technology for your next project.

 
const graph = new joint.dia.Graph();
const paper = new joint.dia.Paper({
 el: document.getElementById('my-diagram-div'),
    model: graph
});
const rect1 = new joint.shapes.standard.Rectangle({
    size: { width: 100, height: 50 },
    position: { x: 100, y: 50 },
    attrs: {
        body: { fill: 'blue', stroke: 'black' },
        label: { text: 'Hello', fill: 'white' }
    }
});
const rect2 = new joint.shapes.standard.Rectangle({
    size: { width: 100, height: 50 },
    position: { x: 400, y: 200 },
    attrs: {
        body: { fill: 'yellow', stroke: 'red' },
        label: { text: 'World!', fill: 'black' }
    }
});
const link = new joint.shapes.standard.Link({
    source: { id: rect1.id },
    target: { id: rect2.id }
});
graph.addCells([rect1, rect2, link]);

 
const paper = new go.Diagram("my-diagram-div");
paper.nodeTemplate =
 $(go.Node, "Auto",
        new go.Binding("location", "loc"),
        $(go.Shape,
            { figure: "Rectangle" },
            new go.Binding("fill", "fill"),
            new go.Binding("stroke", "stroke")),
        $(go.TextBlock,
            { width: 100, height: 50,
                alignment: go.Spot.Center,
                verticalAlignment: go.Spot.Center },
            new go.Binding("text"),
            new go.Binding("stroke", "textStroke"))
        );
paper.linkTemplate =
    $(go.Link,
        $(go.Shape),
        $(go.Shape,
            { toArrow: "Triangle" })
    );
const nodeData = [
    {
        key: "rect1", loc: new go.Point(100, 50),
        fill: "blue", stroke: "black",
        text: "Hello", textStroke: "white"
    },
    {
        key: "rect2", loc: new go.Point(400, 200)
        fill: "yellow", stroke: "red"
        text: "World!", textStroke: "black"
    }
];
const linkData = [
    { from: "rect1", to: "rect2" }
];
paper.model = new go.GraphLinksModel(nodeData, linkData);

Honest testimonial from

those who considered GoJS

Learn directly from our customers the main reasons why they prefer JointJS.

I had evaluated GoJS and Syncfusion for my new startup business product and whilst these had their own strengths, I found JointJS+ to be the strongest in terms of its advanced and highly customisable diagramming capabilities. The areas that I needed to evaluate were extensibility and customisation, performance (ability to handle 100's of objects on a screen), easy to understand with good tutorials, examples and support and able to integrate well into Angular.

JointJS+ I found to be extremely customisable. It feels like I've only touched the surface with the flexibility it provides. One of the main advantages over the others is its SVG based and so can interact well with other HTML elements. This is great for building out complex inspectors, view/model visualisations, context menus and commands. GoJS proved to be more difficult or not possible for extensive customisation and styling. I expect this is because it is canvas based and so does not have extensibility hooks in CSS or HTML elements.

Mark Harrison

Founder, Vrceti

read customer stories

Feature highlights

Complete diagramming toolkit

Don't reinvent the wheel. Let us take care of all the math, interactivity and graphics for you. Use a set of pre-built diagramming tools to build an outstanding app while saving months of complex development and avoiding headaches from never-ending code maintenance.