## 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ``` --- ## File: 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ``` --- ## File: 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: ```bash yarn install yarn run dist ``` To see a treemap of dependencies included in the bundle by `vite-bundle-analyzer`, navigate to this directory and run: ```bash yarn run build ``` Then open `index.html` in your browser: ```bash open index.html ``` ## License The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE). 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: ```bash yarn install yarn run build ``` Navigate to this directory, then run: ```bash yarn start ``` ## License The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE). 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ``` --- ## File: 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ``` --- ## File: 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: ```bash yarn install yarn run build ``` Navigate to this directory, then run: ```bash yarn start ``` ## License The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE). 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ``` --- ## File: 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: ```bash yarn install yarn run build ```` ## Development Run the development server from this example directory: ```bash yarn dev ``` Then open the URL printed in the terminal (usually `http://localhost:5173`). ## Build Create a production build: ```bash yarn build ``` The output will be generated in the `dist/` directory. ## Preview Preview the production build locally: ```bash yarn preview ```