170+ pre-built apps

JointJS offers a wide range of pre-built demo applications and features that serve as boilerplates to help you kick off your project.
JointJS demo applications
Popular tags
Clear all
Filter by features
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Results
 (
141
)
License:JointJS+
Zoom & Pan
Automatic layout
Custom shapes
Toolbar
Minimap
Property editor & viewer
Popups
Element palette
Undo/Redo
JointJS+
This is some text inside of a div block.
AI Agent Builder

AI Agent Builder

Explore an AI agent builder packed with advanced diagramming features—getting your app ready for the future of UIs.
joinjs
Zoom & Pan
Automatic layout
Custom shapes
Toolbar
Minimap
Integration
Element palette
Import/Export
Export to SVG
Export to PNG/JPEG
Print
Automatic layout
Selection
Minimap
Measurement
JointJS+
This is some text inside of a div block.
Kitchen Sink App

Kitchen Sink App

This demo presents all the main features of JointJS+ and is a useful guide to understand its capabilities.
joinjs
Integration
Element palette
Import/Export
Export to SVG
Export to PNG/JPEG
Integration
Element palette
Tooltips
Selection
Keyboard
Export to PNG/JPEG
Import/Export
Export to JSON
Custom shapes
Virtual rendering
JointJS+
This is some text inside of a div block.
Chatbot

Chatbot

Use this demo application to create an advanced Chatbot solution with an intuitive drag-and-drop editor.
joinjs
Integration
Element palette
Tooltips
Selection
Keyboard
Element palette
Print
Import/Export
Export to JSON
Selection
Tooltips
Built-in shapes
Element tools
Link tools
Shape transformation
JointJS+
This is some text inside of a div block.
BPMN

BPMN

The BPMN demo demonstrates a standardized approach to modeling the steps of a business process from start to finish.
joinjs
Element palette
Print
Import/Export
Export to JSON
Selection
Built-in shapes
CSS styling
Highlighters
Link tools
Connectors
Routers
Link labels
Events
Anchors
Responsive
JointJS+
This is some text inside of a div block.
Flowchart

Flowchart

This flowchart created using our JavaScript/Typescript diagramming library shows a simple checkout process.
joinjs
Built-in shapes
CSS styling
Highlighters
Link tools
Connectors
Automatic layout
Import/Export
Custom shapes
Inline text editor
Drag & Drop
Link tools
Element tools
Selection
Undo/Redo
Validation
JointJS+
This is some text inside of a div block.
Kanban

Kanban

The Kanban demo shows how to visualize work, maximize efficiency and continuously improve.
joinjs
Automatic layout
Import/Export
Custom shapes
Inline text editor
Drag & Drop
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Selection
Undo/Redo
Inline text editor
Content-driven shapes
Graph API
JointJS+
This is some text inside of a div block.
MindMap

MindMap

This demo shows a diagram used to visually organize information into a hierarchy.
joinjs
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Automatic layout
External images
Custom shapes
Drag & Drop
Events
Popups
Property editor & viewer
JointJS+
This is some text inside of a div block.
Organizational Chart

Organizational Chart

This demo showcases the power of JointJS+ on one of the most widely used diagram types.
joinjs
Automatic layout
External images
Custom shapes
Drag & Drop
Events
Element palette
Zoom & Pan
Events
Popups
Minimap
Highlighters
Automatic layout
Element tools
Custom properties
JointJS+
This is some text inside of a div block.
Corporate Organizational Chart

Corporate Organizational Chart

Define the organizational structure and fill it with people in a drag & drop fashion.
joinjs
Element palette
Zoom & Pan
Events
Popups
Minimap
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Selection
Undo/Redo
Inline text editor
Content-driven shapes
Graph API
JointJS+
This is some text inside of a div block.
AI-Powered Mind Map Generator

AI Mind Map Generator

Enter any text and create an interactive mind map using the ChatGPT API and JointJS+ capabilities.
joinjs
Toolbar
Automatic layout
Zoom & Pan
Keyboard
Drag & Drop
Property editor & viewer
Element palette
Toolbar
Clipboard
CSS styling
Connection points
Copy & Paste
Custom shapes
Drag & Drop
Export to JSON
JointJS+
This is some text inside of a div block.
Inspector for Selection

Image Processor

Image processing application using the full power of JointJS+ and the open-source OpenCV library.
joinjs
Property editor & viewer
Element palette
Toolbar
Clipboard
CSS styling
Anchors
Custom shapes
Drag & Drop
Tooltips
Graph API
Automatic layout
JointJS+
This is some text inside of a div block.
Sankey Diagram

Sankey Diagram

See how to use link anchors, curve connector, stack layout and its drag & drop user interface to create Sankey diagram.
joinjs
Anchors
Custom shapes
Drag & Drop
Tooltips
Graph API
Automatic layout
Vectorizer
Custom shapes
Graph API
Menus
Popups
JointJS+
This is some text inside of a div block.
Decision Tree

Decision Tree

An AI-driven experiment based on reinforcement learning can be visualized as a decision tree. Check out such an example.
joinjs
Automatic layout
Vectorizer
Custom shapes
Graph API
Menus
Element palette
Custom shapes
Validation
Events
Embedding
Shape transformation
Element tools
Selection
Constraints on movement
Grid
JointJS+
This is some text inside of a div block.
Planogram

Planogram

This demo app aims to help retailers better organize their brick-and-mortar stores.
joinjs
Element palette
Custom shapes
Validation
Events
Embedding
Automatic layout
Property editor & viewer
Toolbar
Routers
Drag & Drop
JointJS+
This is some text inside of a div block.
Timeline

Timeline

Uncover key milestones from OpenAI and Anthropic in an interactive timeline.
joinjs
Automatic layout
Property editor & viewer
Toolbar
Routers
Drag & Drop
Simulation
Animation
CSS styling
Custom properties
Custom shapes
Highlighters
Link-to-link
HTML shapes
Ports
Toolbar
JointJS+
This is some text inside of a div block.
SCADA diagram

SCADA/HMI

This demo shows a Piping and Instrumentation Diagram (P&ID), which plays a key role in the design of SCADA/HMI systems.
joinjs
Simulation
Animation
CSS styling
Custom properties
Custom shapes
Automatic layout
Drag & Drop
Custom shapes
Events
Element tools
Geometry
Vectorizer
Animation
Undo/Redo
Toolbar
JointJS+
This is some text inside of a div block.
Yamazumi chart

Yamazumi 3D

This demo app aims to eliminate waste or aid workload balancing by displaying time cycles via a stacked bar chart.
joinjs
Automatic layout
Drag & Drop
Custom shapes
Events
Element tools
Routers
Custom shapes
Built-in shapes
Anchors
Link tools
Ports
Link labels
JointJS+
This is some text inside of a div block.
UML Class Diagrams

UML Class Diagram

A UML Class diagram describes a system by visualizing the different types of objects within a system.
joinjs
Routers
Custom shapes
Built-in shapes
Anchors
Link tools
Built-in shapes
Custom shapes
Link tools
Element tools
Shape transformation
Zoom & Pan
Toolbar
Undo/Redo
Validation
Routers
JointJS+
This is some text inside of a div block.
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+.
joinjs
Built-in shapes
Custom shapes
Link tools
Element tools
Shape transformation
CSS styling
Automatic layout
Collapse & Expand
Anchors
Custom shapes
Drag & Drop
Element tools
Embedding
Link labels
Popups
JointJS+
This is some text inside of a div block.
Theory of Change

Theory of Change

This demo application helps visualize goals, strategies, and challenges and uses a stack layout.
joinjs
CSS styling
Automatic layout
Collapse & Expand
Anchors
Custom shapes
Shape transformation
Toolbar
Validation
Measurement
Highlighters
Guidelines
Grid
Geometry
Custom shapes
Element palette
JointJS+
This is some text inside of a div block.
Sheet Cutting

Sheet Cutting

A powerful app for creating and optimizing cutting plans for sheets of material.
joinjs
Shape transformation
Toolbar
Validation
Measurement
Highlighters
Automatic layout
Property editor & viewer
Toolbar
Undo/Redo
JointJS+
This is some text inside of a div block.
Sheet Cutting

Tree Designer

This demo app serves as a visual tool for building and editing tree structures.
joinjs
Automatic layout
Property editor & viewer
Toolbar
Undo/Redo
Property editor & viewer
Built-in shapes
Custom shapes
Routers
Highlighters
Zoom & Pan
Events
Link tools
Popups
Content-driven shapes
JointJS+
This is some text inside of a div block.
Database

Database

This demo application serves as a valuable example of an advanced visual application created using JointJS+.
joinjs
Property editor & viewer
Built-in shapes
Custom shapes
Routers
Highlighters
Integration
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
Events
Toolbar
JointJS+
This is some text inside of a div block.
JointJS (PERT Chart) & Bryntum (Gantt Chart)

PERT Chart (JointJS) & Gantt Chart (Bryntum)

Explore how JointJS and Bryntum can be integrated to visualize a project schedule.
joinjs
Integration
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
Automatic layout
Integration
Collapse & Expand
Custom shapes
Zoom & Pan
Export to PNG/JPEG
Export to SVG
Import/Export
Events
Graph API
JointJS+
This is some text inside of a div block.
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.
joinjs
Automatic layout
Integration
Collapse & Expand
Custom shapes
Zoom & Pan
Zoom & Pan
Automatic layout
Built-in shapes
Import/Export
JointJS+
This is some text inside of a div block.
JSON Visualizer

JSON Visualizer

This demo shows how to write a simple JSON visualizer using JointJS+.
joinjs
Zoom & Pan
Automatic layout
Built-in shapes
Import/Export
Built-in shapes
Tooltips
Events
JointJS+
This is some text inside of a div block.
Charts

Charts

This demo showcases how to create Line, Bar, Area, Combo charts, Pie & Donut charts in JointJS applications.
joinjs
Built-in shapes
Tooltips
Events
Automatic layout
Import/Export
Highlighters
Zoom & Pan
Built-in shapes
Anchors
JointJS+
This is some text inside of a div block.
Diagram Generation from External Data (NHL Score)

Diagram Generation from External Data (NHL Score)

REST API data (NHL Score) to JointJS+ diagram w/ curved links & image addition.
joinjs
Automatic layout
Import/Export
Highlighters
Zoom & Pan
Built-in shapes
Custom shapes
Events
Constraints on movement
Link labels
Embedding
Open source
This is some text inside of a div block.
UML Use Case Diagram

UML Use Case Diagram

A UML Use Case diagram is a graphical representation of how users interact with a system.
joinjs
Custom shapes
Events
Constraints on movement
Link labels
Embedding
Anchors
Highlighters
Custom shapes
Constraints on movement
Collapse & Expand
Link labels
Embedding
Open source
This is some text inside of a div block.
Activity Diagram

Activity Diagram

Graphical representations of workflows of actions with support for choice, iteration and concurrency.
joinjs
Anchors
Highlighters
Custom shapes
Constraints on movement
Collapse & Expand
Simulation
Collapse & Expand
Automatic layout
Highlighters
Anchors
Custom shapes
Events
Open source
This is some text inside of a div block.
DWDM circuit diagram

DWDM Circuit

Explore this network graphical view used in fabric-optic communications, also known as a DWDM Circuit.
joinjs
Simulation
Collapse & Expand
Automatic layout
Highlighters
Anchors
Custom shapes
HTML shapes
Embedding
Events
Open source
This is some text inside of a div block.
ROI calculator

ROI calculator

A simple ROI calculator that shows how to use HTML form elements integrated into our shapes via foreign objects.
joinjs
Custom shapes
HTML shapes
Embedding
Events
Link-to-link
Link labels
Link tools
Element tools
Highlighters
Custom shapes
Embedding
Events
Constraints on movement
Open source
This is some text inside of a div block.
Sequence Diagram

Sequence Diagram

This demo shows a popular interaction diagram that helps companies visualize how operations are performed.
joinjs
Link-to-link
Link labels
Link tools
Element tools
Highlighters
Custom shapes
Element tools
Events
Automatic layout
Graph API
Collapse & Expand
Open source
This is some text inside of a div block.
Fault Tree Analysis

Fault Tree Analysis

This demo demonstrates a technique to conduct a root cause analysis.
joinjs
Custom shapes
Element tools
Events
Automatic layout
Graph API
Zoom & Pan
Link tools
Vectorizer
Geometry
CSS styling
Events
Open source
This is some text inside of a div block.
Marey Chart

Marey Chart

This demo shows a way to visually analyze transportation systems such as bus or train schedules.
joinjs
Zoom & Pan
Link tools
Vectorizer
Geometry
CSS styling
Built-in shapes
Highlighters
Connection points
Link labels
Open source
This is some text inside of a div block.
ER Diagrams

ER Diagrams

This demo application shows the entity-relationship model.
joinjs
Built-in shapes
Highlighters
Connection points
Link labels
Built-in shapes
Embedding
Highlighters
Validation
Adjustable interactivity
Events
Ports
Open source
This is some text inside of a div block.
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.
joinjs
Built-in shapes
Embedding
Highlighters
Validation
Adjustable interactivity
Events
Built-in shapes
Connectors
Open source
This is some text inside of a div block.
Finite State Machines

Finite State Machines

The Finite State Machine demo shows how we can use elements and links to create an abstract machine.
joinjs
Events
Built-in shapes
Connectors
Animation
Simulation
Custom shapes
Open source
This is some text inside of a div block.
Petri Nets

Petri Nets

This demo shows a mathematical modeling language describing distributed systems.
joinjs
Animation
Simulation
Custom shapes
Custom shapes
Embedding
Open source
This is some text inside of a div block.
UML Statechart Diagrams

UML Statechart Diagram

A statechart diagram is one of the five UML diagrams used to model the dynamic nature of a system.
joinjs
Custom shapes
Embedding
Constraints on movement
Vectorizer
Geometry
CSS styling
Custom shapes
Events
Adjustable interactivity
Open source
This is some text inside of a div block.
Bandwidth

Bandwidth

This demo demonstrates how to create a custom Bandwidth shape that is resizable, and has dynamic frequency labels.
joinjs
Constraints on movement
Vectorizer
Geometry
CSS styling
Custom shapes
Custom shapes
Events
Vectorizer
Animation
External images
Highlighters
Geometry
Open source
This is some text inside of a div block.
Puzzle

Puzzle

This demo creates a fully-functional puzzle game from custom JointJS elements.
joinjs
Custom shapes
Events
Vectorizer
Animation
External images
Integration
Events
Animation
Geometry
Custom shapes
Open source
This is some text inside of a div block.
Chess

Chess

This demo utilizes GarboChess JS to create a fully-functional game of chess in combination with the JointJS library.
joinjs
Integration
Events
Animation
Geometry
Custom shapes
Automatic layout
Drag & Drop
Events
Embedding
Graph API
Custom shapes
JointJS+
This is some text inside of a div block.
JointJS+ Layouts

JointJS+ Layouts

This demo showcases the embedding functionality of JointJS+.
joinjs
Automatic layout
Drag & Drop
Events
Embedding
Graph API
Automatic layout
Built-in shapes
Selection
Zoom & Pan
Events
Animation
JointJS+
This is some text inside of a div block.
Tree Graphs

Tree Graphs

This demo utilizes the JointJS+ TreeLayout plugin in order to create a tidy node and link diagram.
joinjs
Automatic layout
Built-in shapes
Selection
Zoom & Pan
Events
Automatic layout
Graph API
Anchors
Element tools
Events
Drag & Drop
JointJS+
This is some text inside of a div block.
Tree graph and cycles

Tree graph and cycles

Take a look at this demo that shows how to maintain a tree with automatic layout, plus more.
joinjs
Automatic layout
Graph API
Anchors
Element tools
Events
Automatic layout
Built-in shapes
Geometry
Open source
This is some text inside of a div block.
Circular Layout

Circular Layout

This demo shows how to form a circle from elements and automatically calculate the positions based on their count.
joinjs
Automatic layout
Built-in shapes
Geometry
Automatic layout
Built-in shapes
Geometry
Open source
This is some text inside of a div block.
Rectangular Layout

Rectangular Layout

This demo shows how to form a rectangle from elements and automatically calculate the positions based on their count.
joinjs
Automatic layout
Built-in shapes
Geometry
Automatic layout
Built-in shapes
Responsive
Open source
This is some text inside of a div block.
Serpentine layout

Serpentine Layout

Example of a serpentine layout, a custom layout where the elements are arranged in a zigzag pattern.
joinjs
Automatic layout
Built-in shapes
Responsive
Automatic layout
Integration
Embedding
Ports
Zoom & Pan
Custom shapes
Open source
This is some text inside of a div block.
Eclipse Kernel Layout

Eclipse Kernel Layout

This demo provides a collection of algorithms to automatically layout diagrams with ports and hierarchical nodes.
joinjs
Automatic layout
Integration
Embedding
Ports
Zoom & Pan
Automatic layout
Integration
Link labels
Custom shapes
Highlighters
Open source
This is some text inside of a div block.
Directed Graph Layout

Directed Graph Layout

This demo provides the user with the ability to automatically layout directed graphs.
joinjs
Automatic layout
Integration
Link labels
Custom shapes
Highlighters
Integration
Element tools
Highlighters
Vectorizer
Constraints on movement
Built-in shapes
Events
Open source
This is some text inside of a div block.
Hexagonal Grid

Hexagonal Grid

This demo shows how to create a hexagonal grid diagram using JointJS.
joinjs
Integration
Element tools
Highlighters
Vectorizer
Constraints on movement
Automatic layout
Custom shapes
Zoom & Pan
Tooltips
Graph API
Link labels
JointJS+
This is some text inside of a div block.
Decision Tree Diagram

Decision Tree Analysis

Check out this demo, which shows how to use the layout.TreeLayout plugin to build a decision tree analysis.
joinjs
Automatic layout
Custom shapes
Zoom & Pan
Tooltips
Graph API
Import/Export
Visio
Built-in shapes
JointJS+
This is some text inside of a div block.
Visio BPMN Import

Visio BPMN Import

The Visio BPMN Import demo imports a Microsoft Visio 2013 VSDX file and converts Visio Shapes to JointJS cells.
joinjs
Import/Export
Visio
Built-in shapes
Import/Export
Visio
Built-in shapes
JointJS+
This is some text inside of a div block.
Visio BPMN Export

Visio BPMN Export

The Visio BPMN Export demo allows the user to export a JointJS paper as a VSDX archive.
joinjs
Import/Export
Visio
Built-in shapes
Visio
Import/Export
Popups
Events
Built-in shapes
JointJS+
This is some text inside of a div block.
Visio Orgchart Import

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.
joinjs
Visio
Import/Export
Popups
Events
Built-in shapes
Visio
Import/Export
Embedding
Link tools
Built-in shapes
JointJS+
This is some text inside of a div block.
Visio Flowchart Import

Visio Flowchart Import

Import a flowchart process Microsoft Visio 2013 VSDX file, and convert the Visio shapes to JointJS cells.
joinjs
Visio
Import/Export
Embedding
Link tools
Built-in shapes
Drag & Drop
Built-in shapes
Element palette
Inline text editor
Highlighters
Keyboard
Shape transformation
Undo/Redo
Toolbar
Constraints on movement
JointJS+
This is some text inside of a div block.
BPMN Pools, Swimlanes & Milestones

BPMN Pools, Swimlanes & Milestones

Check out the new implementation of BPMN pools, swimlanes, and milestones that uses the powerful drag & drop feature.
joinjs
Drag & Drop
Built-in shapes
Element palette
Inline text editor
Highlighters
Custom shapes
Element palette
Drag & Drop
Ports
Events
Tooltips
Element tools
Highlighters
CSS styling
Link tools
JointJS+
This is some text inside of a div block.
Cables

Cables

Explore an interactive wiring diagram featuring custom elements like multi-wire cables, screw terminals, and plugs.
joinjs
Custom shapes
Element palette
Drag & Drop
Ports
Events
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
Events
Toolbar
JointJS+
This is some text inside of a div block.
PERT chart

PERT Chart

View a read-only PERT chart with automatic layout, zoom and pan, events and custom shapes.
joinjs
Zoom & Pan
Automatic layout
Built-in shapes
Custom shapes
Events
Adjustable interactivity
Automatic layout
Custom shapes
Constraints on movement
Element palette
Embedding
Events
Export to PNG/JPEG
Highlighters
Inline text editor
JointJS+
This is some text inside of a div block.
Parametric Diagram

SysML Parametric Diagram

Parametric diagram (PAR), which focuses on modeling the relationships between parameters of elements in a system.
joinjs
Adjustable interactivity
Automatic layout
Custom shapes
Constraints on movement
Element palette
Custom shapes
Context Toolbar
Embedding
External images
Highlighters
Menus
Shape transformation
Undo/Redo
Toolbar
Popups
JointJS+
This is some text inside of a div block.
The ArchiMate® Enterprise Architecture Modeling Language

The ArchiMate® Enterprise Architecture Modeling Language

ArchiMate® language demo: Business Layer subset illustrating the structure and organization of an enterprise.
joinjs
Custom shapes
Context Toolbar
Embedding
External images
Highlighters
Automatic layout
Routers
Toolbar
Custom shapes
Undo/Redo
JointJS+
This is some text inside of a div block.
Tournament brackets

Tournament brackets

See a visualization of a double elimination tournament system shown on the latest Champions Chess Tournament.
joinjs
Automatic layout
Routers
Toolbar
Custom shapes
Undo/Redo
Inline text editor
Zoom & Pan
Content-driven shapes
Toolbar
Selection
Events
JointJS+
This is some text inside of a div block.
Rich Text Editor

Rich Text Editor

This feature allows you to change font, size or color and use different text styles.
joinjs
Inline text editor
Zoom & Pan
Content-driven shapes
Toolbar
Selection
Animation
External images
Custom shapes
Zoom & Pan
Graph API
Events
JointJS+
This is some text inside of a div block.
Transitions

Transitions

This demo takes advantage of the PaperScroller plugin to utilize transitions and move the paper in an animated fashion.
joinjs
Animation
External images
Custom shapes
Zoom & Pan
Graph API
Integration
Export to PNG/JPEG
Highlighters
Element tools
Built-in shapes
Link labels
Popups
Shape transformation
Ports
JointJS+
This is some text inside of a div block.
Font Awesome

Font Awesome

This demo shows how to use Font Awesome or other icon libraries together with JointJS.
joinjs
Integration
Export to PNG/JPEG
Highlighters
Element tools
Built-in shapes
Popups
Element palette
Menus
CSS styling
JointJS+
This is some text inside of a div block.
Stencil Theme Picker

Stencil Theme Picker

See how to offer users a range of pre-defined themes for elements that are aesthetically pleasing right from the start.
joinjs
Popups
Element palette
Menus
CSS styling
Tooltips
Element palette
CSS styling
JointJS+
This is some text inside of a div block.
Element Palette Tooltips

Element Palette Tooltips

See the tooltip plugin used in Element Palette to show detailed information about elements.
joinjs
Tooltips
Element palette
CSS styling
Tooltips
Ports
Built-in shapes
External images
Validation
Link labels
Events
JointJS+
This is some text inside of a div block.
Dynamic Tooltip Content

Dynamic Tooltip Content

See how to display port tooltips on hover, with info about the connection and data sourced from the graph on demand.
joinjs
Tooltips
Ports
Built-in shapes
External images
Validation
Zoom & Pan
Built-in shapes
Embedding
Constraints on movement
JointJS+
This is some text inside of a div block.
Zoomable User Interface (ZUI)

Zoomable User Interface (ZUI)

This demo shows an alternative way of displaying a hierarchical diagram using a zoomable user interface (ZUI).
joinjs
Zoom & Pan
Built-in shapes
Embedding
Constraints on movement
Automatic layout
Performance
Export to PNG/JPEG
Custom shapes
Virtual rendering
Zoom & Pan
Toolbar
Events
Collapse & Expand
JointJS+
This is some text inside of a div block.
Collapse / Expand

Collapse / Expand

This demo utilizes the JointJS+ TreeLayout while providing the user with ability to collapse and expand branches.
joinjs
Automatic layout
Performance
Export to PNG/JPEG
Custom shapes
Virtual rendering
Zoom & Pan
Toolbar
Grid
Element palette
Built-in shapes
JointJS+
This is some text inside of a div block.
Infinite Paper vs. Sheets

Infinite Paper vs. Sheets

Explore two approaches to defining paper size: infinite and sheets with explicit boundaries between them.
joinjs
Zoom & Pan
Toolbar
Grid
Element palette
Built-in shapes
Integration
Zoom & Pan
Built-in shapes
JointJS+
This is some text inside of a div block.
Touch Gestures

Touch Gestures

See how to use the Interact.js library to support panning and pinching gestures on touch devices.
joinjs
Integration
Zoom & Pan
Built-in shapes
Automatic layout
Virtual rendering
Collapse & Expand
Custom shapes
Zoom & Pan
External images
Highlighters
Embedding
JointJS+
This is some text inside of a div block.
Searchable Sitemap

Searchable Sitemap

This demo shows how to generate an interactive and searchable sitemap from an XML file.
joinjs
Automatic layout
Virtual rendering
Collapse & Expand
Custom shapes
Zoom & Pan
Automatic layout
Drag & Drop
Toolbar
Custom shapes
Anchors
Animation
JointJS+
This is some text inside of a div block.
Team Order

Team Order

This demo utilizes a JointJS+ StackLayout to map team members together in pairs with an identifier label.
joinjs
Automatic layout
Drag & Drop
Toolbar
Custom shapes
Anchors
Integration
Selection
Clipboard
Element palette
Built-in shapes
Link tools
Context Toolbar
JointJS+
This is some text inside of a div block.
Clipboard API Integration

Clipboard API Integration

Explore integration with the Clipboard API for copying and pasting diagram data between different applications.
joinjs
Integration
Selection
Clipboard
Element palette
Built-in shapes
Animation
CSS styling
Adjustable interactivity
Graph API
Automatic layout
Built-in shapes
Link tools
Element tools
Validation
Highlighters
JointJS+
This is some text inside of a div block.
Dijkstra's shortest path algorithm

Dijkstra's shortest path algorithm

The Shortest path demo demonstrates how to find the shortest path efficiently in both directed and undirected graphs.
joinjs
Animation
CSS styling
Adjustable interactivity
Graph API
Automatic layout
Built-in shapes
Custom shapes
Shape transformation
Measurement
Guidelines
JointJS+
This is some text inside of a div block.
Distances

Distances

This demo allows you to dynamically calculate element measurements, and the distances between elements.
joinjs
Built-in shapes
Custom shapes
Shape transformation
Measurement
Guidelines
Built-in shapes
Custom shapes
Link tools
Measurement
Guidelines
Shape transformation
JointJS+
This is some text inside of a div block.
Angles

Angles

See how to dynamically calculate the angle that is formed when two straight lines meet at a shared endpoint.
joinjs
Built-in shapes
Custom shapes
Link tools
Measurement
Guidelines
Element palette
Property editor & viewer
Selection
Undo/Redo
CSS styling
JointJS+
This is some text inside of a div block.
Inspector for Selection

Inspector for Selection

See how to view and modify the data of multiple diagram elements at once using the Selection and Inspector plugins.
joinjs
Element palette
Property editor & viewer
Selection
Undo/Redo
CSS styling
Export to JSON
Integration
Toolbar
Save/Load
Element palette
Undo/Redo
JointJS+
This is some text inside of a div block.
Saving and Loading Using File System Access API

Saving and Loading Using File System Access API

This demo shows a plugin that helps implement reading and writing files from the local file system.
joinjs
Export to JSON
Integration
Toolbar
Save/Load
Element palette
Element palette
Automatic layout
Collapse & Expand
Custom shapes
JointJS+
This is some text inside of a div block.
Tree Stencil

Tree Stencil

This demo brings the power of the TreeLayout to the Stencil allowing users to create a directory of Stencil elements.
joinjs
Element palette
Automatic layout
Collapse & Expand
Custom shapes
Element palette
Drag & Drop
Built-in shapes
Automatic layout
JointJS+
This is some text inside of a div block.
Stencil Favorite & In-Use Groups

Stencil Favorite & In-Use Groups

Explore the ability to add shapes to favorites or group shapes that are used on paper.
joinjs
Element palette
Drag & Drop
Built-in shapes
Automatic layout
Element palette
Graph API
Export to PNG/JPEG
Built-in shapes
Element tools
Selection
Events
JointJS+
This is some text inside of a div block.
Dynamic Stencil

Dynamic Stencil

This demo provides the user with a palette of JointJS elements which can be dragged onto the paper.
joinjs
Element palette
Graph API
Export to PNG/JPEG
Built-in shapes
Element tools
Integration
Built-in shapes
Zoom & Pan
Tooltips
Popups
Highlighters
Events
JointJS+
This is some text inside of a div block.
Tabs

Tabs

The Tabs demo allows the user to display multiple JointJS diagrams while navigating them via a Tabs component.
joinjs
Integration
Built-in shapes
Zoom & Pan
Tooltips
Popups
Animation
Simulation
Geometry
Custom shapes
Integration
Zoom & Pan
Tooltips
Keyboard
Performance
Automatic layout
JointJS+
This is some text inside of a div block.
Tokens

Tokens

The Tokens demo showcases visualization of Token events between nodes, and their transitions over time.
joinjs
Animation
Simulation
Geometry
Custom shapes
Integration
Integration
Built-in shapes
Highlighters
Events
Zoom & Pan
Selection
JointJS+
This is some text inside of a div block.
Diagram Index

Diagram Index

This demo allows displaying multiple diagrams while navigating each cell of a certain diagram via a TreeView component.
joinjs
Integration
Built-in shapes
Highlighters
Events
Zoom & Pan
Built-in shapes
Zoom & Pan
Tooltips
Toolbar
Minimap
Custom shapes
JointJS+
This is some text inside of a div block.
Collapsible Minimap

Collapsible Minimap

Learn how to implement a collapsible minimap to reduce potential UI clutter.
joinjs
Built-in shapes
Zoom & Pan
Tooltips
Toolbar
Minimap
Zoom & Pan
Popups
Graph API
Automatic layout
Built-in shapes
Minimap
Menus
JointJS+
This is some text inside of a div block.
Element Neighborhood Dialog Window

Element Neighborhood Dialog Window

Explore different local views, such as successors, predecessors or siblings, in floating pop-ups.
joinjs
Zoom & Pan
Popups
Graph API
Automatic layout
Built-in shapes
Undo/Redo
Keyboard
Element palette
Selection
Events
Built-in shapes
Toolbar
JointJS+
This is some text inside of a div block.
Move Elements via Keyboard

Move Elements via Keyboard

See how to move selected elements using the keyboard and merge a sequence of moves into a single undo operation.
joinjs
Undo/Redo
Keyboard
Element palette
Selection
Events
Drag & Drop
Element palette
Undo/Redo
Highlighters
Popups
Geometry
JointJS+
This is some text inside of a div block.
Connecting nodes by dragging and dropping

Connecting nodes by dragging and dropping

Learn how to create a new connection when dragging and dropping elements onto other elements or links.
joinjs
Drag & Drop
Element palette
Undo/Redo
Highlighters
Popups
Element palette
Popups
Undo/Redo
Events
Link tools
Element tools
JointJS+
This is some text inside of a div block.
Confirmation Dialogs

Confirmation Dialogs

See how to show a confirmation dialog after a certain user action like adding or removing an element.
joinjs
Element palette
Popups
Undo/Redo
Events
Link tools
Element palette
Property editor & viewer
Custom shapes
Selection
Undo/Redo
Events
Toolbar
Graph API
JointJS+
This is some text inside of a div block.
Text Position Based on Space Availability

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.
joinjs
Element palette
Property editor & viewer
Custom shapes
Selection
Undo/Redo
Adjustable interactivity
Element tools
Link tools
Export to PNG/JPEG
Custom shapes
Built-in shapes
Import/Export
Zoom & Pan
Inline text editor
Events
JointJS+
This is some text inside of a div block.
JointJS+ – Comment Mode

Comment View

Want to enable a special mode where users can only post comments? Check out this demo.
joinjs
Adjustable interactivity
Element tools
Link tools
Export to PNG/JPEG
Custom shapes
Adjustable interactivity
Element palette
Highlighters
Element tools
Link tools
Zoom & Pan
Undo/Redo
Toolbar
Built-in shapes
JointJS+
This is some text inside of a div block.
View/Edit Mode

View/Edit Mode

Do you need to switch a diagram from read-only to fully editable mode, e.g. based on user permissions?
joinjs
Adjustable interactivity
Element palette
Highlighters
Element tools
Link tools
Menus
Toolbar
Built-in shapes
Events
JointJS+
This is some text inside of a div block.
ContextToolbar

ContextToolbar

Need to change the scale or position of a context menu? See how you can adjust its appearance using the context toolbar.
joinjs
Menus
Toolbar
Built-in shapes
Events
Built-in shapes
Element palette
Element tools
JointJS+
This is some text inside of a div block.
Finite Object Pool

Finite Object Pool

See how to manage a pool of objects that can exist one at a time and cannot be easily duplicated.
joinjs
Built-in shapes
Element palette
Element tools
Anchors
Highlighters
Content-driven shapes
Custom shapes
Custom properties
Element palette
HTML shapes
Keyboard
Popups
Property editor & viewer
JointJS+
This is some text inside of a div block.
Shape Builder

Shape Builder

See how to enable users to define shape metadata using forms provided by the ui.inspector plugin.
joinjs
Anchors
Highlighters
Content-driven shapes
Custom shapes
Custom properties
Import/Export
Export to PDF
Export to PNG/JPEG
Export to SVG
Export to JSON
Zoom & Pan
Toolbar
Integration
Graph API
Events
JointJS+
This is some text inside of a div block.
PDF Export

PDF Export

This demo shows how to export a diagram along with other information to PDF, SVG or PNG.
joinjs
Import/Export
Export to PDF
Export to PNG/JPEG
Export to SVG
Export to JSON
Copy & Paste
Element palette
Selection
Built-in shapes
Events
Element tools
Shape transformation
JointJS+
This is some text inside of a div block.
Copy & Paste

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.
joinjs
Copy & Paste
Element palette
Selection
Built-in shapes
Events

Nothing found

Please try different keywords or get in touch with us to get a tailored demo.

Responsive

Guidelines

Context Toolbar

Clipboard

Grid

Save/Load

Custom properties

Print

Virtual rendering

Collapse & Expand

Measurement

Shape transformation

Visio

Link-to-link

HTML shapes

Link labels

Minimap

Export to JSON

Export to SVG

Export to PDF

Copy & Paste

Menus

Tooltips

Keyboard

Drag & Drop

Simulation

Content-driven shapes

Validation

Performance

Constraints on movement

Integration

Animation

Routers

Highlighters

CSS styling

Ports

Graph API

Toolbar

Undo/Redo

Selection

Popups

Anchors

Inline text editor

Zoom & Pan

Import/Export

Export to PNG/JPEG

Link tools

External images

Element palette

Events

Adjustable interactivity

Property editor & viewer

Embedding

Geometry

Element tools

Connection points

Connectors

Vectorizer

Custom shapes

Built-in shapes

Automatic layout

BPMN

Svelte

Angular

Vue

React

TypeScript

JavaScript

Boilerplate applications

Features showcase

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
JointJS GitHub
5000+ stars
500+ discussions
DISCOVER
FeaturesDemos & ExamplesCustomer storiesShowcasesJointJS+About usFAQEnterpriseBuild vs. Buy: ROI analysis
DEVELOP
DocumentationSupportCommunityCustom developmentResellersCustomer portal
USEFUL
NewsPricingLicensingSupport termsTry JointJS+ for freeBuy JointJS+JointJS+ comparisonContact usAll demos
COMPATIBILITY
ReactAngularVueSvelteHTMLTypescriptSalesforce Lightning
discover
Icon
develop
Icon
useful
Icon
Compatibility
Icon
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, a next-generation embedded iPaaS. Powered by JointJS+. Learn more
Cookie PolicyPrivacy PolicyChange consent settings
This website is haunted