File: examples/working-with-ports-js/README.md
JointJS: Working with Ports
Are you working with ports and looking for inspiration? Check out this demo showing the following features: connection events, connection validations, magnet validations, custom ports markup, custom link tools, delayed link tools removal and highlighting available ports.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn previewFile: examples/use-case-diagram-js/README.md
JointJS: UML Use Case Diagram
A UML Use Case diagram is a graphical representation of how users interact with a system, depicting the various actors and their corresponding use cases. With our JavaScript diagramming library, building a UML Use Case diagram is made easy and intuitive through our drag-and-drop interface and extensive library of pre-built shapes and symbols.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn previewFile: examples/tree-shake/README.md
JointJS Tree Shake Demo
Setup
Use Yarn to run this demo.
You need to build JointJS first. Navigate to the root folder and run:
yarn install
yarn run distTo see a treemap of dependencies included in the bundle by vite-bundle-analyzer, navigate to this directory and run:
yarn run buildThen open index.html in your browser:
open index.htmlLicense
The JointJS library is licensed under the Mozilla Public License 2.0.
Copyright © 2013-2026 client IO
File: examples/tree-of-life/README.md
JointJS Tree of Life Demo
Setup
Use Yarn to run this demo.
You need to build JointJS first. Navigate to the root folder and run:
yarn install
yarn run buildNavigate to this directory, then run:
yarn startLicense
The JointJS library is licensed under the Mozilla Public License 2.0.
Copyright © 2013-2026 client IO
File: examples/spreadsheet-shapes-with-handsontable-js/README.md
JointJS: Spreadsheet Shapes with Handsontable
In the demo below, we reveal how we've integrated the Handsontable third-party spreadsheet library with JointJS. It includes the insertion of a table into a JointJS shape using a custom element view, aligning ports to the center of the columns, and introducing the concept of mapping with transformation functions between two separate tables.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn previewFile: examples/snap-links-to-themselves-js/README.md
JointJS: Snap Links To Themselves
Need a link to snap to itself? Utilising the snapLinksSelf option on the JointJS paper forces a link end to snap to itself under specified conditions.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn previewFile: examples/shapes-general/README.md
JointJS General Shapes Demo
Setup
Use Yarn to run this demo.
You need to build JointJS first. Navigate to the root folder and run:
yarn install
yarn run buildNavigate to this directory, then run:
yarn startLicense
The JointJS library is licensed under the Mozilla Public License 2.0.
Copyright © 2013-2026 client IO
File: examples/shapes-drawing-js/README.md
JointJS: Shapes Drawing
Do you want to enable your customers to draw shapes into diagrams, such as a rectangle, ellipse or any other shape using the free drawing function? Check out this demo that's all about drawing.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn previewFile: examples/serpentine-layout-js/README.md
JointJS: Serpentine Layout
This demo is an example of a serpentine layout, a custom layout where the elements are arranged in a zigzag pattern, where the rows are filled alternately from left to right and right to left, and where the rows fit the given width.
Install
From the root of the monorepo, install all dependencies:
yarn install
yarn run buildDevelopment
Run the development server from this example directory:
yarn devThen open the URL printed in the terminal (usually http://localhost:5173).
Build
Create a production build:
yarn buildThe output will be generated in the dist/ directory.
Preview
Preview the production build locally:
yarn preview