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">Feature List | 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/features"><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="Feature List | Diagram and visual applications builder - JsPlumb Toolkit"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://jsplumbtoolkit.com/features"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/features" hreflang="en"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/features" hreflang="x-default"><link data-rh="true" href="//fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"><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 aria-current="page" class="navbar__item navbar__link btn btn-link navbar__link--active" href="/features">Features</a><a class="navbar__item navbar__link btn btn-link" 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="container d-flex flex-column mt-3 position-relative"><div class="row"><div class="col-12"><h1>Features</h1><p>The jsPlumb Toolkit has an extensive feature set to allow you to rapidly build diagrams and UIs with rich graphical content. Click on individual items here to read more</p></div></div><div class="row"><div class="d-none col-md-2 d-md-flex flex-column align-self-start position-sticky jtk-feature-list-index"><a href="#Library Integrations">Library Integrations</a><a href="#Layouts">Layouts</a><a href="#Components">Components</a><a href="#Data Model">Data Model</a><a href="#Drawing">Drawing</a></div><div class="col-12 col-md-10"><div class="row"><div class="col-12"><a id="Library Integrations" class="jtk-feature-section-link"></a><h3 class="tan p-2">Library Integrations</h3></div></div><div class="row"><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/angular.png" class="mb-1" alt="Angular - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h5>Angular</h5><p>Use rich Angular components to represent the nodes/groups in your UI and our underlying service to wire everything up</p></div><div data-overlay-id="Angular" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Angular"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/angular.png" class="mb-1" alt="Angular - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">Angular</h1><div class="my-3"> The Toolkit offers a number of Angular components that you can drop straight in to your app.<br><br> The ability to map a node/group type to an Angular component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Angular offers. <br><br> Our jsPlumb Angular service can be injected anywhere in your app and offers access not only to Toolkit instances and surfaces, but also SVG/PNG/JPG export and a get/set data storage mechanism. <br><br> In our demo applications repository you can find our Angular flowchart, chatbot, schema builder and mindmap. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/angular-integration</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/react.png" class="mb-1" alt="React - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>React</h5><p>Seamlessly integrate the Toolkit into a React app, with both components based and hooks based approaches supported.</p></div><div data-overlay-id="React" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="React"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/react.png" class="mb-1" alt="React - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">React</h1><div class="my-3"> The Toolkit offers a number of React components that you can drop straight in to your app. Both component based and Hooks based UIs are supported seamlessly.<br><br> The ability to map a node/group type to a React component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power React offers. <br><br> In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/react-integration" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/react-integration</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/vue.png" class="mb-1" alt="Vue - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow"></p><h5>Vue</h5><p>Leverage the power of the Toolkit's tight integration with Vue 2 and Vue 3</p></div><div data-overlay-id="Vue" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Vue"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/vue.png" class="mb-1" alt="Vue - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h1 class="mt-2">Vue</h1><div class="my-3">We offer tight integration with both Vue 2 and Vue 3, including Vue 3's composition API. The ability to map a node/group type to a Vue component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Vue offers. <br><br> In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integration" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integration</a><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/svelte.png" class="mb-1" alt="Svelte - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h5>Svelte</h5><p>Embed the Toolkit into a Svelte app with no fuss using our deep integration</p></div><div data-overlay-id="Svelte" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Svelte"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/svelte.png" class="mb-1" alt="Svelte - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h1 class="mt-2">Svelte</h1><div class="my-3">We're big fans of Svelte ourselves and are pleased to offer a solid integration between the Toolkit and Svelte. The ability to map a node/group type to Svelte components means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Svelte offers. <br><br> In our demo applications repository you can find our Svelte flowchart, chatbot, schema builder and mindmap.</div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integration" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/svelte-integration</a></div></div></div><div class="row"><div class="col-12"><a id="Layouts" class="jtk-feature-section-link"></a><h3 class="tan p-2">Layouts</h3></div></div><div class="row"><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/layouts.png" class="mb-1" alt="Standard Layouts - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Standard Layouts</h5><p>Force directed, Hierarchy, Balloon, Circular and Absolute positioning layouts are provided out of the box.</p></div><div data-overlay-id="Standard Layouts" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Standard Layouts"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/layouts.png" class="mb-1" alt="Standard Layouts - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">Standard Layouts</h1><div class="my-3"> The Toolkit ships with four popular automatic positioning layouts:<br><br> <ul> <li>Force directed</li> <li>Circular</li> <li>Hierarchy</li> <li>Balloon</li> </ul> As well as an <strong>Absolute</strong> layout, in which the elements of your UI are positioned according to left/top values in the data model.<br><br> Many rich graphical UI applications offer the user the ability to manage the position of the elements themselves, making the Absolute layout a common choice, but when a user has not placed an element you'll need to use an automatic placement layout to put that element somewhere. <br><br> All of the Toolkit's layouts have the feature of being backed by the Absolute layout - meaning, if a user has chosen where an element should go, it goes there, and if they haven't, it gets placed automatically. Best of both worlds! </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/layouts" target="_blank">https://jsplumbtoolkit.com/demonstrations/layouts</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/custom-layout.png" class="mb-1" alt="Custom Layouts - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h5>Custom Layouts</h5><p>The Toolkit makes it a snap to create your own layout, should one of our standard layouts not suffice for your use case.</p></div><div data-overlay-id="Custom Layouts" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Custom Layouts"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/custom-layout.png" class="mb-1" alt="Custom Layouts - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more"></p><h1 class="mt-2">Custom Layouts</h1><div class="my-3">Creating a custom layout is a straightforward process - extend <strong>AbstractLayout</strong>, implement a few lifecycle methods, and don't forget to tell the Toolkit when you're done!<br><br> A great example of the ease with which this can be achieved is demonstrated by our mindmap builder, for which there are versions in vanilla Javascript, Angular, React, Vue 2, Vue 3 and Svelte. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts#custom-layouts" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/layouts#custom-layouts</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/magnetizer.png" class="mb-1" alt="Magnetizer - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow"></p><h5>Magnetizer</h5><p>The built-in magnetizer lets you make small adjustments to your UI to achieve the perfect layout.</p></div><div data-overlay-id="Magnetizer" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Magnetizer"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/magnetizer.png" class="mb-1" alt="Magnetizer - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h1 class="mt-2">Magnetizer</h1><div class="my-3">At various points in the lifecycle of the UI you can trigger a magnetizer to make minor adjustments to the positions of your nodes and groups.<br><br> The default behaviour of the magnetizer is to treat every node/group as a charged magnetic particle and to push them all away from each other.<br><br> You can magnetize around some specific point in the canvas, or around some element, or at the position identified by some mouse event. You can also run the magnetizer in "gather" mode, in which elements are drawn in to gather around some specific location. </div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/magnetizer" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/magnetizer</a></div></div></div><div class="row"><div class="col-12"><a id="Components" class="jtk-feature-section-link"></a><h3 class="tan p-2">Components</h3></div></div><div class="row"><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/demo-screenshots/flowchart-builder_800.png" class="mb-1" alt="Surface - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h5>Surface</h5><p>The Surface is the heart of the Toolkit's UI, offering an infinitely pannable canvas with the smoothest zoom for miles around. </p></div><div data-overlay-id="Surface" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Surface"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/demo-screenshots/flowchart-builder_800.png" class="mb-1" alt="Surface - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h1 class="mt-2">Surface</h1><div class="my-3">The Toolkit's surface widget provides a canvas with infinite pan onto which your nodes, edges and groups are rendered.<br><br> <ul> <li>Infinite pan</li> <li>Zoom with mouse wheel or pinch on touch devices</li> <li>Clamp pan/zoom so content never disappears from view</li> <li>Numerous plugins supported (drawing tools, miniview, pan buttons, backgrounds)</li> <li>Comprehensive set of events published</li> </ul> </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/rendering" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/rendering</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/miniview.png" class="mb-1" alt="Miniview - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h5>Miniview</h5><p>Attach a miniview to a surface and see your world in miniature. Pan and zoom directly on the miniview component to control the surface.</p></div><div data-overlay-id="Miniview" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Miniview"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/miniview.png" class="mb-1" alt="Miniview - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h1 class="mt-2">Miniview</h1><div class="my-3">The miniview plugin for the surface component tracks the nodes and groups in your canvas, allowing you to see the whole dataset at a glance. A panner shows how the visible area of the canvas maps to the full dataset, and you can pan and zoom directly on the miniview to control the surface. <br><br> We use the miniview plugin in many of our demos - the flowchart builder, chatbot, mindmap builder and many more. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/miniview" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/miniview</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/node-palette.png" class="mb-1" alt="Node palette - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Node palette</h5><p>Drag and drop new nodes/groups onto your canvas with the SurfaceDropManager</p></div><div data-overlay-id="Node palette" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Node palette"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/node-palette.png" class="mb-1" alt="Node palette - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h1 class="mt-2">Node palette</h1><div class="my-3">Use any markup of your choice to render a set of items that you want to enable your users to drag onto your canvas.<br><br> Then create a <strong>SurfaceDropManager</strong>, give it a CSS selector that identifies what should be draggable, and you're done! <br><br> The drop manager can be configured to allow drop on the canvas and/ onto nodes, groups and edges. You can switch it on and off with a single method call, and we ship wrapper components for all of our library integrations - Angular, Svelte, React, Vue 2 and Vue3. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/drag-and-drop" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/drag-and-drop</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/controls.png" class="mb-1" alt="Controls - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow"></p><h5>Controls</h5><p>Manage surface mode (pan/lasso), undo/redo, zoom to extents from the Controls component.</p></div><div data-overlay-id="Controls" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Controls"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/controls.png" class="mb-1" alt="Controls - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h1 class="mt-2">Controls</h1><div class="my-3">This helper component can either be dropped directly into your app or used as a basis for your own implementation. Manage surface mode, lasso, undo/redo all in one place.<br><br> The controls component is very easily skinned via CSS, and we ship a component version of it for Angular, Vue and React. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/mindmap-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/mindmap-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/controls-component" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/controls-component</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/dialogs.png" class="mb-1" alt="Dialogs - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h5>Dialogs</h5><p>Straightforward and easily skinned dialog manager, with tight data binding to your model.</p></div><div data-overlay-id="Dialogs" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Dialogs"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/dialogs.png" class="mb-1" alt="Dialogs - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h1 class="mt-2">Dialogs</h1><div class="my-3">Originally written for our demonstration pages, the Toolkit's Dialogs are a lightweight solution that integrate nicely with the data model and the Surface widget.<br><br>Each dialog consists of some HTML that you create, and you map input fields to fields in your data via a set of attributes. Easily styled and easy to integrate. </div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/dialogs" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/dialogs</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/inspector.png" class="mb-1" alt="Inspector - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Inspector</h5><p>Property inspector component for the objects in your model. Supports inspecting multiple objects of disparate types at once.</p></div><div data-overlay-id="Inspector" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Inspector"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/inspector.png" class="mb-1" alt="Inspector - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h1 class="mt-2">Inspector</h1><div class="my-3">Inspectors listen for selection events on an underlying Toolkit, and then provide your users </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/chatbot" target="_blank">https://jsplumbtoolkit.com/demonstrations/chatbot</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/inspectors" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/inspectors</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/element-dragger.png" class="mb-1" alt="Element Dragger - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h5>Element Dragger</h5><p>A helper class that you can use to turn any part of your UI external to the canvas into a draggable element</p></div><div data-overlay-id="Element Dragger" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Element Dragger"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/element-dragger.png" class="mb-1" alt="Element Dragger - JsPlumb, build diagrams and rich visual UIs fast"></p><h1 class="mt-2">Element Dragger</h1><div class="my-3">Sometimes you'll build a UI with the Toolkit that has some elements which are not on your canvas but which you would like your users to be able to drag around. We had this requirement ourselves recently while building our <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-view" target="_blank">Neighbourhood views</a> demonstration, so we created the Element Dragger to help with the task.<br><br> Features include:<br><br><ul> <li>Optional filter to denote parts of your element that should not kick off a drag</li> <li>Optional constrain function, to implement fine grained control over where your users can drag elements to</li> <li>Optional <strong>containment</strong> specifier - limit drag to parent element, either fully or partially, and optionally prevent dragging into the negative axis.</li> </ul> </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-view" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-view</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-dragger" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/element-dragger</a></div></div></div><div class="row"><div class="col-12"><a id="Data Model" class="jtk-feature-section-link"></a><h3 class="tan p-2">Data Model</h3></div></div><div class="row"><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/graph.png" class="mb-1" alt="Graph operations - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h5>Graph operations</h5><p>A full set of operations on the underlying graph let you query and manipulate your dataset with ease</p></div><div data-overlay-id="Graph operations" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Graph operations"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/graph.png" class="mb-1" alt="Graph operations - JsPlumb, build diagrams and rich visual UIs fast"></p><h1 class="mt-2">Graph operations</h1><div class="my-3">The Toolkit thinks of the world in terms of nodes, groups, ports and edges, all of which belong to a graph.<br><br> You can query the graph and operate on it without concerning yourself with the UI, knowing that the Toolkit will keep everything in sync.<br><br> Want to know if some node is connected to another? Easily done. Or maybe you want to find the shortest path from some node to another node? Find all the edges for which some element is the source? The Toolkit can tell you all of these things. </div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/data-model" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/data-model</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/undo-redo.png" class="mb-1" alt="Undo & Redo - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Undo & Redo</h5><p>Limitless stack of operations allowing your users to undo and redo to their hearts content.</p></div><div data-overlay-id="Undo & Redo" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Undo & Redo"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/undo-redo.png" class="mb-1" alt="Undo & Redo - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">Undo & Redo</h1><div class="my-3">Every operation in the Toolkit is pushed onto an undo/redo stack, which, by default, has a limitless size, although you can specify a maximum if you'd like to.<br><br> A full set of events is fired by the Toolkit in response to operations on the undo/redo stack, allowing you to very easily maintain the state of any UI components you've got linked to it.<br><br> Undo stacks of a fixed size, when full, can either reject new operations, replace the most recent operation, or throw away the oldest operation to accomodate a new one. <br><br> Undo/redo is used in many of our demonstrations. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/transactions.png" class="mb-1" alt="Transactions - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h5>Transactions</h5><p>Wrap multiple operations in a transaction and undo/redo them all in one atomic operation</p></div><div data-overlay-id="Transactions" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Transactions"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/transactions.png" class="mb-1" alt="Transactions - JsPlumb - When you've reached the limit with ReactFlow, we can help!"></p><h1 class="mt-2">Transactions</h1><div class="my-3">Rich graphical UIs are complex beasts, involving a lot of moving parts. When a user changes one thing in the UI it often causes a bunch of other stuff to update too. <br><br>For instance, say you delete a shape in a diagram. Any edges attached to that shape must also be deleted, and the Toolkit wraps all of those deletions into a single transaction, so that the entire operation can be undone at once. <br><br>The Toolkit automatically wraps several other common operations inside transactions, but you can also access the transaction API yourself. Maybe you want to move a bunch of nodes around, update the properties of some of them, add a new edge - you can do all of that in one atomic operation via the Toolkit's transaction API. </div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo#transactions" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/undo_redo#transactions</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/demo-screenshots/paths_800.png" class="mb-1" alt="Paths - JsPlumb, build diagrams and rich visual UIs fast"></p><h5>Paths</h5><p>Query the Toolkit to find paths between elements and then animate them</p></div><div data-overlay-id="Paths" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Paths"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/demo-screenshots/paths_800.png" class="mb-1" alt="Paths - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">Paths</h1><div class="my-3">The Toolkit has a <a href="https://en.wikipedia.org/wiki/Graph" target="_blank">graph</a> at its core, allowing you to ask questions like "what is the shortest path from A to B?" or "is C connected to D?" and so on. Once you have a path object, you can instruct the surface widget to animate an overlay along it - with a full transport mechanism available. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/paths" target="_blank">https://jsplumbtoolkit.com/demonstrations/paths</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/selections.png" class="mb-1" alt="Selections - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more"></p><h5>Selections</h5><p>Select a set of nodes, groups and/or edges and perform operations on them at once. Or, use a selection as the data source for a Surface.</p></div><div data-overlay-id="Selections" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Selections"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/selections.png" class="mb-1" alt="Selections - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h1 class="mt-2">Selections</h1><div class="my-3">Baked right in to the Toolkit's data model is the concept of a <strong>Selection</strong> - a set of one or more nodes, groups and edges. The Toolkit offers a full set of methods to select objects and to then perform operations on the set as a whole - you can update everything in the selection at once, delete everything, iterate through the objects - selections are very powerful.<br><br> The surface widget can be created with a selection as its data source, allowing you to display some subset of the entire dataset but with the ability to apply a layout and to pan/zoom the content. When you create a selection with a <strong>generator</strong> function, you can subsequently reload the selection and the surface will update itself accordingly. <br><br> We use the concept of a selection as a surface's datasource in our <a href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/starter-app-neighbourhood-view" target="_blank">Neighbourhood views</a> demonstration, in which we have four popups that are each driven by a selection, and which listen to selection events from the Toolkit. When the user clicks on an element, each of the selections is reloaded and the popups seamlessly keep themselves up to date. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/neighbourhood-views" target="_blank">https://jsplumbtoolkit.com/demonstrations/neighbourhood-views</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/text-index.png" class="mb-1" alt="Full text search - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Full text search</h5><p>Attach a text search index to your Toolkit instance and run queries over the contents of the dataset</p></div><div data-overlay-id="Full text search" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Full text search"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/text-index.png" class="mb-1" alt="Full text search - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow"></p><h1 class="mt-2">Full text search</h1><div class="my-3">The Toolkit contains an implementation of an <a href="https://en.wikipedia.org/wiki/Inverted_index" target="_blank">Inverted Index</a>, which is a data structure used at the core of most search engines. It offers fast retrieval and random access.<br><br> Full text search of all your domain objects - nodes, groups and/or edges - is offered, across either all fields or a set of fields of your choice. </div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/copy-paste.png" class="mb-1" alt="Copy & paste - JsPlumb, build diagrams and rich visual UIs fast"></p><h5>Copy & paste</h5><p>Easily copy nodes, groups and/or edges to the clipboard and paste them elsewhere in your UI</p></div><div data-overlay-id="Copy & paste" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Copy & paste"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/copy-paste.png" class="mb-1" alt="Copy & paste - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h1 class="mt-2">Copy & paste</h1><div class="my-3">Copy and paste is built in to the surface widget, with an easy to use API. Grab a set of nodes, groups and/or edges from one part of your diagram, copy them to the clipboard, and then paste them elsewhere. The surface will clone all of the items in the clipboard and place them in your new location.<br><br> When pasting the contents of the clipboard you can specify an x/y location yourself, or you can provide a mouse event, which the surface will automatically map to a location on the canvas.<br><br> Groups - to an arbitrary depth - are, by default, copied with copies of all of their child elements.<br><br> The clipboard offers in-depth control over how edges are pasted - what happens if you have an edge in your clipboard but not both of the nodes it is attached to? The Toolkit's clipboard provides a detailed API for handling every case.</div><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/copy-paste" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/copy-paste</a></div></div></div><div class="row"><div class="col-12"><a id="Drawing" class="jtk-feature-section-link"></a><h3 class="tan p-2">Drawing</h3></div></div><div class="row"><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/shape-library.png" class="mb-1" alt="Shape Libraries - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs"></p><h5>Shape Libraries</h5><p>Choose from our Basic or Flowchart shape libraries to render the nodes in your UI, or create your own!</p></div><div data-overlay-id="Shape Libraries" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Shape Libraries"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/shape-library.png" class="mb-1" alt="Shape Libraries - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h1 class="mt-2">Shape Libraries</h1><div class="my-3">A shape library is a set of named shapes that you will use to render SVG inside the vertices in your application. These are an ideal solution for all sorts of diagrams.</div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/drawing-tools.png" class="mb-1" alt="Resize Objects - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Resize Objects</h5><p>The DrawingTools plugin allows you to select and resize objects using the mouse or touch events.</p></div><div data-overlay-id="Resize Objects" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Resize Objects"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/drawing-tools.png" class="mb-1" alt="Resize Objects - JsPlumb, build diagrams and rich visual UIs fast"></p><h1 class="mt-2">Resize Objects</h1><div class="my-3">Drag the corners of nodes and groups to resize them using the Drawing Tools plugin.<br><br> Touch events are supported without any intervention required. Easily skinned via CSS. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/lasso.png" class="mb-1" alt="Lasso - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more"></p><h5>Lasso</h5><p>The Lasso plugin allows you to select multiple elements via the mouse or touch events.</p></div><div data-overlay-id="Lasso" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Lasso"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/lasso.png" class="mb-1" alt="Lasso - JsPlumb, build diagrams and rich visual UIs fast"></p><h1 class="mt-2">Lasso</h1><div class="my-3">With the lasso plugin you can snag a set of nodes, groups and/or edges and have them automatically added to the Toolkit's current selection. <br><br> Items added to the current selection will be automatically detected by various other parts of the Toolkit's ecosystem - the surface will add CSS classes in response, and any attached inspectors will respond too.<br><br> Use the lasso in standard mode as shown above, or in "mask" mode - the inverse of the image above, where the unselected parts of the UI are masked. <br><br> Nodes and groups snagged by the lasso are automatically added to the surface's current drag group. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/schema-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/schema-builder</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#lasso" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#lasso</a><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/selections</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/edge-editing.png" class="mb-1" alt="Path editing - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow"></p><h5>Path editing</h5><p>Click and drag to manually edit the paths of connectors with a powerful and intuitive interface</p></div><div data-overlay-id="Path editing" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Path editing"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/edge-editing.png" class="mb-1" alt="Path editing - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more"></p><h1 class="mt-2">Path editing</h1><div class="my-3">The Toolkit's powerful and intuitive path editors enable you to fine tune the appearance of your applications and diagrams.<br><br> Touch events are fully supported with no extra libraries or setup required. </div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/segmented-connectors" target="_blank">https://jsplumbtoolkit.com/demonstrations/segmented-connectors</a><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edge-path-editors" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/edge-path-editors</a></div></div><div class="d-flex flex-wrap col-6 col-md-4 col-lg-3"><div class="mb-2 cursor-pointer d-flex flex-column p-2 smokey jtk-feature-title w-100"><p><img src="/img/feature-images/snaplines.png" class="mb-1" alt="Snaplines - JsPlumb - Angular, React, Vue, Svelte diagramming library"></p><h5>Snaplines</h5><p>Display visual cues to help your users align their elements</p></div><div data-overlay-id="Snaplines" class="feature-underlay tan d-none"></div><div class="feature-overlay jtk-feature-description smokey p-3 d-none flex-column" data-overlay-id="Snaplines"><div class="position-absolute d-flex align-items-center justify-content-center feature-overlay-close">X</div><p><img src="/img/feature-images/snaplines.png" class="mb-1" alt="Snaplines - JsPlumb, industry standard diagramming and rich visual UI Javascript library"></p><h1 class="mt-2">Snaplines</h1><div class="my-3">The snaplines plugin draws snaplines on the canvas when elements are within some threshold, helping your users to get their diagram layouts just so. As with all our plugins, the Snaplines plugin is easily skinned via CSS.</div><h5 class="mt-2">Related demonstrations:</h5><a class="jtk-feature-docslink" href="https://jsplumbtoolkit.com/demonstrations/flowchart-builder" target="_blank">https://jsplumbtoolkit.com/demonstrations/flowchart-builder</a><h5 class="mt-2">Read more here:</h5><a class="jtk-feature-docslink" href="https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#snaplines" target="_blank">https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/plugins-overview#snaplines</a></div></div></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>