JointJS demos hero image

Ready-to-use apps & features

JointJS and JointJS+ provide a wide range of pre-built demo applications and features to help you bring your idea to life in no time.

JointJS demo applications

Filter by:

Demo applications

Chatbot

Chatbot

Use this demo application to create an advanced Chatbot solution with an intuitive drag-and-drop editor.

Kitchen Sink App

Kitchen Sink App

This demo presents all the main features of JointJS+ and is a useful guide to understand its capabilities.

BPMN

BPMN

The BPMN demo demonstrates a standardized approach to modeling the steps of a business process from start to finish.

MindMap

MindMap

This demo shows a diagram used to visually organize information into a hierarchy.

Organizational Chart

Organizational Chart

This demo showcases the power of JointJS+ on one of the most widely used diagram types.

Data Mapping

Data Mapping

This demo allows you to map abstract data that is provided in a given format and experience the power of JointJS+.

Database

Database

This demo application serves as a valuable example of an advanced visual application created using JointJS+.

Kanban

Kanban

The Kanban demo shows how to visualize work, maximize efficiency and continuously improve.

Charts

Charts

This demo showcases how to create Line, Bar, Area, Combo charts, Pie & Donut charts in JointJS applications.

JavaScript AST Visualiser

JavaScript AST Visualiser

This demo offers an alternative to the AST Explorer and serves as a graphical representation of the source code.

Planogram

Planogram

This demo app aims to help retailers better organize their brick-and-mortar stores.

Yamazumi 3D

Yamazumi 3D

This demo app aims to eliminate waste or aid workload balancing by displaying time cycles via a stacked bar chart.

Sequence Diagram

Sequence Diagram

This demo shows a popular interaction diagram that helps companies visualize how operations are performed.

Finite State Machines

Finite State Machines

The Finite State Machine demo shows how we can use elements and links to create an abstract machine.

Fault Tree Analysis

Fault Tree Analysis

This demo demonstrates a technique to conduct a root cause analysis.

Corporate Organizational Chart

Corporate Organizational Chart

Define the organizational structure and fill it with people in a drag & drop fashion.

ER Diagrams

ER Diagrams

This demo application shows the entity-relationship model.

Discrete Event System Specification

Discrete Event System Specification

This demo shows how to use specific JointJS features for modeling dynamic systems using a discrete-event abstraction.

Marey Chart

Marey Chart

This demo shows a way to visually analyze transportation systems such as bus or train schedules.

Petri Nets

Petri Nets

This demo shows a mathematical modeling language describing distributed systems.

UML Class Diagrams

UML Class Diagrams

A UML Class diagram describes a system by visualizing the different types of objects within a system.

UML Statechart Diagrams

UML Statechart Diagrams

A statechart diagram is one of the five UML diagrams used to model the dynamic nature of a system.

Logic Circuits

Logic Circuits

A logic circuit is used in computers to perform a logical operation on its two or more input signals.

JSON Visualizer

JSON Visualizer

This demo shows how to write a simple JSON visualizer using JointJS+.

Specific features

Collapse / Expand

This demo utilizes the JointJS+ TreeLayout while providing the user with ability to collapse and expand branches.

Dialog Generator

The dialog generator demonstrates how to create a question and answer diagram.

Angles

See how to dynamically calculate the angle that is formed when two straight lines meet at a shared endpoint.

Distances

This demo allows you to dynamically calculate element measurements, and the distances between elements.

Dynamic Stencil

This demo provides the user with a palette of JointJS elements which can be dragged onto the paper.

Team Order

This demo utilizes a JointJS+ StackLayout to map team members together in pairs with an identifier label.

Tree Stencil

This demo brings the power of the TreeLayout to the Stencil allowing users to create a directory of Stencil elements.

Dijkstra's shortest path algorithm

The Shortest path demo demonstrates how to find the shortest path efficiently in both directed and undirected graphs.

Tree Graphs

This demo utilizes the JointJS+ TreeLayout plugin in order to create a tidy node and link diagram.

NodeJS Milestones Timeline

See how to use JointJS components and UI features to create a beautiful timeline diagram.

Transitions

This demo takes advantage of the PaperScroller plugin to utilize transitions and move the paper in an animated fashion.

Vector Editor

The Vector Editor demo is an application which allows the user to draw and edit SVG path elements on demand.

JointJS+ Layouts

This demo showcases the embedding functionality of JointJS+.

Visio BPMN Import

The Visio BPMN Import demo imports a Microsoft Visio 2013 VSDX file and converts Visio Shapes to JointJS cells.

Visio BPMN Export

The Visio BPMN Export demo allows the user to export a JointJS paper as a VSDX archive.

Visio Orgchart Import

The demo allows the user to import an org chart Microsoft Visio 2013 VSDX file, and convert the shapes to JointJS cells.

Visio Flowchart Import

Import a flowchart process Microsoft Visio 2013 VSDX file, and convert the Visio shapes to JointJS cells.

Rich Text Editor

This feature allows you to change font, size or color and use different text styles.

Tokens

The Tokens demo showcases visualization of Token events between nodes, and their transitions over time.

Diagram Index

This demo allows displaying multiple diagrams while navigating each cell of a certain diagram via a TreeView component.

Tabs

The Tabs demo allows the user to display multiple JointJS diagrams while navigating them via a Tabs component.

Container

The demo shows how to use embedding feature in JointJS while allowing the user to collapse and expand parent containers.

Mix Bus

The Mix Bus demo showcases the ability of JointJS to visualize complex systems such as audio mixing consoles.

Tasks

The Tasks demo creates JointJS elements that have a HTML face while still allowing the user to link elements together.

Curves

The Curves demo demonstrates how to create nice looking SVG curves in JointJS with the curve connector.

Bandwidth

This demo demonstrates how to create a custom Bandwidth shape that is resizable, and has dynamic frequency labels.

List

See how to create custom elements that contain a set of port List items that can be added or removed dynamically.

Directed Graph Layout

This demo provides the user with the ability to automatically layout directed graphs.

Eclipse Kernel Layout

This demo provides a collection of algorithms to automatically layout diagrams with ports and hierarchical nodes.

Links

This demo shows how to create a range of different links while using different attributes that are available to users.

Smart Routing

This demo illustrates the behaviour of different built-in routers and connectors available to users in JointJS.

Fills

This demo showcases a variety of SVG fills and gradients that you can use in your JointJS diagrams.

Icons

The Icons demo showcases how to add an arbitrary list of SVG elements to a shape in different positions.

Paper Attributes

This demo shows the different options and attributes that are available when using the JointJS paper.

Convex Hull Algorithm

This demo shows the user how to construct a convex hull of various elements.

Rough JS

This demo utilizes Rough.js to draw JointJS elements in a Sketch or hand-drawn style.

Puzzle

This demo creates a fully-functional puzzle game from custom JointJS elements.

Chess

This demo utilizes GarboChess JS to create a fully-functional game of chess in combination with the JointJS library.

Finite Object Pool

See how to manage a pool of objects that can exist one at a time and cannot be easily duplicated.

PDF Export

This demo shows how to export a diagram along with other information to PDF, SVG or PNG.

Copy & Paste

See how to clone shapes, copy text or an image and insert them into a diagram as shapes using the ui.Clipboard plugin.

Presentation Mode

Check out how to navigate through the diagram using the presentation toolbar.

List of Links in Inspector

See how to configure an inspector, write a custom highlighter, and add a context menu with a list of links.

Change Element Text Alignment in Inspector

See how to configure an inspector field to control multiple attributes at once.

Drop stencil element as shape icon

See how to fetch data, transform it into an element palette, and modify the behavior of the stencil.

Selection Alignment

Check out how to allow users to select and align objects.

Element Grouping

This demo showcases how to group several elements into a single entity and/or how to ungroup them.

Move Elements via Keyboard

See how to move selected elements using the keyboard and merge a sequence of moves into a single undo operation.

Tree Graph with Add Buttons

This demo shows how to add additional elements to tree diagrams, or change the parent of an existing element.

ui.Popup

This demo shows how you can change the appearance of popups – position, size, anchor, padding and more.

Circular Layout

This demo shows how to form a circle from elements and automatically calculate the positions based on their count.

Rectangular Layout

This demo shows how to form a rectangle from elements and automatically calculate the positions based on their count.

Drop image as shape

This demo shows how to drag and drop an image from the operating system directly into a diagram.

Absolute Port Layout & Dynamic Port Sizes

See how to make the size of element ports to be driven by the text they contain.

Hierarchical Diagrams

Check out this demo for advanced tips on working with hierarchical diagrams.

Find All Cells Between 2 Elements

Check out this demo to learn how to highlight all cells between 2 given elements.

Working with Ports

This demo shows JointJS features such as connection events, connection validations, magnet validations and more.

Different views of the same graph

Check out how to show different views of the same data model.

Port Reordering Tool

This demo shows how to support user interactions that are not part of JointJS (e.g. changing the order of ports).

Shapes Drawing

See how to draw shapes into diagrams, such as a rectangle, ellipse or any other shape using the free drawing function.

Resize Control Tool

Check out this demo to see how to resize elements with JointJS easily.

Link Connect Tool

This demo shows how to create links from an existing link and connect it to another element in the diagram.

Element Connect Tool

Check out how to connect elements in a diagram using links.

Control Tool

This demo shows the JointJS control tool that lets you change the element shape in a drag and drop fashion.

Curve Connector

See how to create links between elements that dynamically adjust based on element position.

Scale SVGMarker with link's thickness

If you need to keep the size of your link and SVG marker in sync, this is the demo for you.

Content Driven Shapes

Check out how to dynamically resize elements based on their content.

Counters

This demo shows an example of content-driven elements with real-time updates.

Hexagonal Grid

This demo shows how to create a hexagonal grid diagram using JointJS.

Animated Process Flow Diagram

Check out how to visually express the flow of a process.

Optional Ports

This demo demonstrates how to easily activate or deactivate ports from a list of available ports.

Text Position Based on Space Availability

How to automatically place element labels based on the available space around them? Check out this demo to find out.

Upload Image to Stencil

Do you want users to be able to upload an image directly into the stencil and view it in LightBox? Check out this demo.

Comment View

Want to enable a special mode where users can only post comments? Check out this demo.

External SVG Images

Wondering how to use external SVG images as or within JointJS shapes? Check out this demo.

Stencil vs Diagram Elements

Are you looking for a way to represent stencil elements in a way other than their actual appearance? Check this out.

Element, Port and Link Label Markup

Did you know that you can use custom markup not only to define elements but also ports or link labels?

UML Class Shape Inspector

Learn how to create UML class using standard.Record shape & configure Inspector plugin for split tabs and more.

Can't find what you're looking for?

Let's see if it's possible to build it with our library.

See more on codepen

hit us up on github

JavaScript diagramming library powering exceptional UIs.

The latest news

DISCOVER

Features Demos & examples JointJS+FAQ Contact us

DEVELOP

USEFUL

News Licensing Support terms Try JointJS+ for free Buy JointJS+JointJS+ comparison

client.IO

We are part of client.IO, a company dedicated to developing Low-Code/No-Code tools and empowering innovative thinkers to create amazing products faster. Learn more

Appmixer

We are proud creators of Appmixer, an embedded iPaaS and workflow automation system. Powered by JointJS+. Learn more

This website is haunted