CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v2.4.3"> <title data-rh="true">Active Filtering - jsPlumb toolkit | Diagram and visual applications builder - JsPlumb Toolkit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://jsplumbtoolkit.com/demonstrations/active-filtering"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="kanban, erd, entity relationship diagram, flowchart, decision tree, entity relationship diagram, diagram, chatbot, chart, graph, gantt charts, network topology diagrams, visualization, javascript, diagramming library, typescript, charts, orgchart"><meta data-rh="true" property="og:image" content="https://jsplumbtoolkit.com/img/rendering-ports/reskinned-chatbot.png"><meta data-rh="true" property="og:site_name" content="JsPlumb Toolkit, leading diagramming and visual connectivity Javascript and Typescript library"><meta data-rh="true" property="og:title" content="Active Filtering - jsPlumb toolkit | Diagram and visual applications builder - JsPlumb Toolkit"><meta data-rh="true" name="description" content="fast and standards compliant flowcharts, mindmaps, sequence diagram, database schema builder"><meta data-rh="true" property="og:description" content="fast and standards compliant flowcharts, mindmaps, sequence diagram, database schema builder"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://jsplumbtoolkit.com/demonstrations/active-filtering"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/demonstrations/active-filtering" hreflang="en"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/demonstrations/active-filtering" hreflang="x-default"><link data-rh="true" href="//fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"><link data-rh="true" rel="stylesheet" href="/css/jsplumbtoolkit.css"><link data-rh="true" rel="stylesheet" href="/css/jsplumbtoolkit-demo-support.css"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script>window.dataLayer=window.dataLayer||[]</script> <script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="https://www.googletagmanager.com/gtm.js?id=GTM-PNVM4WJV",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script> <script>var sc_project="12334448",sc_invisible=1,sc_security="71953373"</script> <script src="https://www.statcounter.com/counter/counter.js"></script> <link rel="alternate" type="application/rss+xml" href="/talking-tech/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/talking-tech/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <script src="https://js.stripe.com/v3/"></script><link rel="stylesheet" href="/assets/css/styles.1542c693.css"> <link rel="preload" href="/assets/js/runtime~main.d7194b24.js" as="script"> <link rel="preload" href="/assets/js/main.58243ff6.js" as="script"> </head> <body class="navigation-with-keyboard"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNVM4WJV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus"> <div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate"></b></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link btn btn-link" href="/blog">News</a><a class="navbar__item navbar__link btn btn-link" href="/features">Features</a><a aria-current="page" class="navbar__item navbar__link btn btn-link navbar__link--active" href="/demonstrations">Demonstrations</a><a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Documentation</a><a class="navbar__item navbar__link btn btn-link" href="/contact">Contact</a><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Download</a><a class="navbar__item navbar__link btn btn-secondary mx-2" href="/trial">Free trial</a><a href="https://licensing.jsplumbtoolkit.com/purchase/toolkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-primary">Buy</a><div class="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="d-lg-none position-fixed d-flex align-items-center p-3" style="top:0;right:0;z-index:10000;color:white"><span>Demonstration:</span><select class="ms-2"><optgroup label="Starter apps"><option value="flowchart-builder">Flowchart Builder</option><option value="gantt">Gantt Chart</option><option value="chatbot">Chatbot Builder</option><option value="kanban">Kanban</option><option value="network-topology">Network Topology</option><option value="schema-builder">Schema Builder</option><option value="orgchart">Org chart</option><option value="mindmap-builder">Mindmap Builder</option><option value="groups">Nested Groups</option><option value="paths">Path Tracing</option><option value="hello-world">Hello World</option><option value="image-processor">Image Processor</option></optgroup><optgroup label="Features"><option value="neighbourhood-views">Neighbourhood Views</option><option selected="" value="active-filtering">Active Filtering</option><option value="segmented-connectors">Segmented Connectors</option><option value="hierarchy-layout">Hierarchy Layout</option><option value="layouts">Layouts</option><option value="collapsible-hierarchy">Collapsible Hierarchy</option><option value="nested-instances">Nested instances</option></optgroup></select></div><div class="container-fluid h-100"><div class="row px-3 px-md-5"><div class="mt-3 col col-12 px-3 d-flex flex-row align-items-center"><h2>Active Filtering</h2><a class="ms-auto" href="/demonstrations">< Back to demo list</a></div></div><div class="row px-3 px-md-5"><div class="col col-12"><div id="jtk-demo-connectivity" class="jtk-demo-wrapper"><div class="jtk-demo-canvas"><div class="controls d-flex align-items-center"><i class="fa fa-arrows selected-mode" mode="pan" title="Pan Mode"></i><i class="fa fa-pencil" mode="select" title="Select Mode"></i><i class="fa fa-home" reset="true" title="Zoom To Fit"></i><a class="btn btn-link p-3" add="true" style="background-color:white">Add a node</a></div><div class="miniview d-none d-md-block"></div><div style="position:absolute;bottom:1rem;right:1rem" class="d-flex"><div class="d-flex flex-column align-items-center mx-1"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K" alt="" height="25"></div><div class="d-flex flex-column align-items-center mx-1"><svg viewBox="0 0 250 250" width="25" height="25"><g><polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5"></polygon><path d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"></path></g></svg></div><div class="d-flex flex-column align-items-center mx-1"><svg viewBox="0 0 128 128" width="25" height="25"><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"></path></svg></div><div class="d-flex flex-column align-items-center mx-1"><svg viewBox="0 0 98.1 118" width="25" height="25"><path fill="#FF3E00" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"></path><path fill="#FFFFFF" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"></path></svg></div><div class="d-flex flex-column align-items-center mx-1"><svg fill="none" height="25" viewBox="0 0 512 512" width="25"><rect fill="#3178c6" height="512" rx="50" width="512"></rect><rect fill="#3178c6" height="512" rx="50" width="512"></rect><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"></path></svg></div><div class="d-flex flex-column align-items-center mx-1"><svg viewBox="0 0 512 512" width="25" height="25"><path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"></path><path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"></path><path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"></path><path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"></path></svg></div></div></div></div></div></div><div class="row mx-3 mx-md-5 smokey p-3 px-md-5 flex-wrap"><div class="col col-6 d-flex flex-column"><img src="/img/logo.svg" width="120" class="my-3"><p>The source code for this application is <a href="https://github.com/jsplumb-demonstrations/active-filtering" target="_blank">available on Github</a>. If you haven't got a license for JsPlumb, we offer 30 day evaluations.</p></div><div class="col col-6 d-flex align-items-center justify-content-center flex-wrap"><a class="btn btn-secondary btn mx-2" href="/demonstrations">Explore demonstrations</a><a class="btn btn-primary mx-2" href="/trial">Start a free trial</a></div></div><div class="row mx-3 mx-md-5 tan p-3 px-md-5"><div class="h3">Active Filtering</div><div class="h5 my-3">What is active filtering?</div><p>Active filtering provides a way to filter connection targets when a drag begins. Try dragging a connection from one node to another - when you start to drag, the available targets are filtered.</p><div class="h5 my-3">How is it configured?</div><p>Active filtering is configured via a plugin for the Surface renderer in the Toolkit. When an <code>activeFiltering</code> plugin is set on a Surface and a <code>beforeConnect</code> function is supplied to the Toolkit's constructor, that function is called before a new connection is dragged, for every possible target for the current source. Whenever the <code>beforeConnect</code> method returns false, the corresponding target object (a node, group or port) is disabled, and the user will not be able to drop the connection onto it.</p><p>In this demonstration, each node contains a set of entries which each contain the name of two types of animal. Entries are deemed connectable if one or more animals from the source entry are matched in a given target. Disabled vertices have a <code>data-jtk-enabled</code>attribute written onto them with a value of <code>false</code>, allowing you to easily control their appearance via CSS.</p><div class="h5 my-3">What layout is used in this demo?</div><p>We use the Toolkit's <strong>ForceDirected</strong> layout in this demonstration. A Force directed layout is a layout in which the edges between vertices are thought of as springs, where the existence of an edge between two vertices has the effect of drawing them closer together.</p><p>When the user clicks 'Add a node', a new vertex is added and the layout is re-run. Note though that the position of vertices that have already been processed by the layout is unchanged. You can instruct the force directed layout to recompute every position but from a UX standpoint it's generally a better experience to only run the layout in an incremental fashion, so that is what the Toolkit does by default.</p><div class="h5 my-3">Further reading</div><p>Read more about active filtering in the docs on this page: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#active-filtering" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#active-filtering</a></p><p>Read more about the Toolkit's ForceDirected layout on this page: <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layout-force-directed" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layout-force-directed</a></p><div><a class="d-flex align-items-center" href="https://github.com/jsplumb-demonstrations/active-filtering" target="_blank"><svg aria-label="Github" viewBox="0 0 24 24" width="25" height="25"><path fill="#333" fill-rule="evenodd" d="M11.999 1C5.926 1 1 5.925 1 12c0 4.86 3.152 8.983 7.523 10.437.55.102.75-.238.75-.53 0-.26-.009-.952-.014-1.87-3.06.664-3.706-1.475-3.706-1.475-.5-1.27-1.221-1.61-1.221-1.61-.999-.681.075-.668.075-.668 1.105.078 1.685 1.134 1.685 1.134.981 1.68 2.575 1.195 3.202.914.1-.71.384-1.195.698-1.47-2.442-.278-5.01-1.222-5.01-5.437 0-1.2.428-2.183 1.132-2.952-.114-.278-.491-1.397.108-2.91 0 0 .923-.297 3.025 1.127A10.536 10.536 0 0 1 12 6.32a10.49 10.49 0 0 1 2.754.37c2.1-1.424 3.022-1.128 3.022-1.128.6 1.514.223 2.633.11 2.911.705.769 1.13 1.751 1.13 2.952 0 4.226-2.572 5.156-5.022 5.428.395.34.747 1.01.747 2.037 0 1.47-.014 2.657-.014 3.017 0 .295.199.637.756.53C19.851 20.979 23 16.859 23 12c0-6.075-4.926-11-11.001-11"></path></svg><span class="ms-3">Fork me on Github</span></a></div></div><div class="row flex-wrap px-5 mt-5"><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="flowchart-builder"><h5>Flowchart Builder</h5><a href="/demonstrations/flowchart-builder" class="btn btn-link"><img src="/img/demo-screenshots/flowchart-builder_800.png" width="300" class="mb-3" alt="Flowchart builder application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="gantt"><h5>Gantt Chart</h5><a href="/demonstrations/gantt" class="btn btn-link"><img src="/img/demo-screenshots/gantt_800.png" width="300" class="mb-3" alt="Gantt chart builder application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Interactive Gantt chart featuring tasks, task groups and milestones. Drag dependencies between tasks and use the inspector to update task names and their progress. Configurable and comprehensive timeline options and a neat scroll effect using floated labels.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="chatbot"><h5>Chatbot Builder</h5><a href="/demonstrations/chatbot" class="btn btn-link"><img src="/img/demo-screenshots/chatbot_800.png" width="300" class="mb-3" alt="Chatbot builder application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Use JsPlumb to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="kanban"><h5>Kanban</h5><a href="/demonstrations/kanban" class="btn btn-link"><img src="/img/demo-screenshots/kanban_800.png" width="300" class="mb-3" alt="Kanban application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Fully featured Kanban board. Drag items between columns and use the inspector to update items and columns. React, Angular, ES6 and Typescript base versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="network-topology"><h5>Network Topology</h5><a href="/demonstrations/network-topology" class="btn btn-link"><img src="/img/demo-screenshots/network-topology_800.png" width="300" class="mb-3" alt="Network topology diagram builder - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Use JsPlumb to build a network topology diagram, with our neat selection of drawing and sizing tools.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="schema-builder"><h5>Schema Builder</h5><a href="/demonstrations/schema-builder" class="btn btn-link"><img src="/img/demo-screenshots/schema-builder_800.png" width="300" class="mb-3" alt="Database schema builder application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="orgchart"><h5>Org chart</h5><a href="/demonstrations/orgchart" class="btn btn-link"><img src="/img/demo-screenshots/orgchart_800.png" width="300" class="mb-3" alt="Org chart application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">JsPlumb makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="mindmap-builder"><h5>Mindmap Builder</h5><a href="/demonstrations/mindmap-builder" class="btn btn-link"><img src="/img/demo-screenshots/mindmap-builder_800.png" width="300" class="mb-3" alt="Mindmap builder application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Simple mindmap builder, highlighting several advanced features JsPlumb offers, such as custom layouts, parsers and exporters</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="groups"><h5>Nested Groups</h5><a href="/demonstrations/groups" class="btn btn-link"><img src="/img/demo-screenshots/groups_800.png" width="300" class="mb-3" alt="Element grouping demonstration - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Learn about how JsPlumb lets you work with groups nested to an arbitrary level, with full drag and drop support.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="paths"><h5>Path Tracing</h5><a href="/demonstrations/paths" class="btn btn-link"><img src="/img/demo-screenshots/paths_800.png" width="300" class="mb-3" alt="Path tracing demonstration - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Leverage JsPlumb's underlying Directed Graph to visualize paths between elements.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="hello-world"><h5>Hello World</h5><a href="/demonstrations/hello-world" class="btn btn-link"><img src="/img/demo-screenshots/hello-world_800.png" width="300" class="mb-3" alt="Hello world demonstration - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="image-processor"><h5>Image Processor</h5><a href="/demonstrations/image-processor" class="btn btn-link"><img src="/img/demo-screenshots/image-processor_800.png" width="300" class="mb-3" alt="Image processor application - JsPlumb, leading alternative to JointJS and GoJS"></a><div class="starter-app-description">Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="neighbourhood-views"><h5>Neighbourhood Views</h5><a href="/demonstrations/neighbourhood-views"><p><img src="/img/demo-screenshots/neighbourhood-views_800.png" class="mb-3" alt="Neighbour views dynamic selections demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p></a><div class="starter-app-description">Use popups and JsPlumb's ability to dynamically render selections to provide neighbourhood contextual information for some selected element</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="active-filtering"><h5>Active Filtering</h5><a href="/demonstrations/active-filtering"><p><img src="/img/demo-screenshots/active-filtering_800.png" class="mb-3" alt="Active filtering demonstration - JsPlumb, build diagrams and rich visual UIs fast"></p></a><div class="starter-app-description">Filter drag targets as your users start to drag new connections using the ActiveFiltering plugin.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="segmented-connectors"><h5>Segmented Connectors</h5><a href="/demonstrations/segmented-connectors"><p><img src="/img/demo-screenshots/segmented-connectors_800.png" class="mb-3" alt="CAD Drawing tools demonstration - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p></a><div class="starter-app-description">An adaptable connector that consists of a series of segments, with the option to smooth to a set of Bezier splines</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="hierarchy-layout"><h5>Hierarchy Layout</h5><a href="/demonstrations/hierarchy-layout"><p><img src="/img/demo-screenshots/hierarchy-layout_800.png" class="mb-3" alt="Org chart layout demonstration - JsPlumb, build diagrams and rich visual UIs fast"></p></a><div class="starter-app-description">The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="layouts"><h5>Layouts</h5><a href="/demonstrations/layouts"><p><img src="/img/demo-screenshots/layouts_800.png" class="mb-3" alt="Force directed layout demonstration, org chart layout demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p></a><div class="starter-app-description">A playground for testing the various layouts that the Toolkit offers - Hierarchy, Force Directed, Circular, Balloon and more.</div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="collapsible-hierarchy"><h5>Collapsible Hierarchy</h5><a href="/demonstrations/collapsible-hierarchy"><p><img src="/img/demo-screenshots/collapsible-hierarchy_800.png" class="mb-3" alt="Collapsible hierarchy Italic language family demonstration - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p></a><div class="starter-app-description">Use JsPlumb's ability to render a dynamically collapsible and expandable hierarchy. </div></div><div class="p-3 col col-12 col-md-3 d-flex flex-column align-items-center starter-app-launcher" data-id="nested-instances"><h5>Nested instances</h5><a href="/demonstrations/nested-instances"><p><img src="/img/demo-screenshots/nested-instances_800.png" class="mb-3" alt="Nested instances desktop example - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more"></p></a><div class="starter-app-description">Use JsPlumb's ability to nest instances to implement a simple desktop</div></div></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">DISCOVER</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/demonstrations">Demonstrations</a></li><li class="footer__item"><a class="footer__link-item" href="/contact">Contact Us</a></li><li class="footer__item"><a class="footer__link-item" href="/faq">FAQ</a></li><li class="footer__item"><a href="/JSPLUMB-TOOLKIT-LICENSE-10-NOV-2023.pdf" target="_blank">License Agreement</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/privacy">Privacy Policy</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/talking-tech">Talking Tech</a></li></ul></div><div class="col footer__col"><div class="footer__title">DEVELOP</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Documentation</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Licensee Portal</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/npm-repository" target="_blank" rel="noopener noreferrer" class="footer__link-item">NPM Repository</a></li><li class="footer__item"><a class="footer__link-item" href="/trial">Try jsPlumb Toolkit for free</a></li></ul></div><div class="col footer__col"><div class="footer__title">LINKS</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">News</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/purchase/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Pricing</a></li><li class="footer__item"> <div class="d-flex align-items-center mt-5"> <a href="https://github.com/jsplumb"><img class="me-2" src="/img/social-logos/github.svg" alt="github logo"></a> <a href="https://www.facebook.com/jsPlumbToolkit"><img class="mx-2" src="/img/social-logos/facebook.svg" alt="facebook logo"></a> <a href="https://www.linkedin.com/company/jsplumb/"><img class="mx-2" src="/img/social-logos/linkedin.svg" alt="linked in logo"></a> <a href="https://twitter.com/jsplumbtoolkit"><img class="mx-2" src="/img/social-logos/twitter.svg" alt="twitter logo"></a> </div></li></ul></div><div class="col footer__col"><div class="footer__title">INTEGRATIONS</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://angular.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Angular</a></li><li class="footer__item"><a href="https://react.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Vue 2</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Vue 3</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Svelte</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://jsplumbtoolkit.com" rel="noopener noreferrer" class="footerLogoLink_BH7S"><img src="/img/logo-white.svg" alt="jsPlumb Toolkit" class="themedImage_ToTc themedImage--light_HNdA footer__logo" width="160" height="51"><img src="/img/logo-white.svg" alt="jsPlumb Toolkit" class="themedImage_ToTc themedImage--dark_i4oU footer__logo" width="160" height="51"></a></div><div class="footer__copyright">Copyright 漏 2024 JSPLUMB PTY LTD.</div></div></div></footer></div> <script src="/assets/js/runtime~main.d7194b24.js"></script> <script src="/assets/js/main.58243ff6.js"></script> </body> </html>