CINXE.COM

<!DOCTYPE html><html class="__className_f35434" dir="ltr" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/08c48d09be6639e0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/63429a2b6aa41def-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/8465cd5ac5565d9c-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/8e4fa9519f0b1748-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/346c8d13d90d8145.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e54dab27a5b3bf74.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/31970efc4cc1dcd4.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/d60be7727a3ad5a8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-0c59b8cd0547ad2d.js"/><script src="/_next/static/chunks/2951bed2-431ffedda685dde3.js" async=""></script><script src="/_next/static/chunks/2947-0d79e3df1206f294.js" async=""></script><script src="/_next/static/chunks/main-app-ac68252352aab915.js" async=""></script><script src="/_next/static/chunks/1ea0f737-cd138e0f105c6296.js" async=""></script><script src="/_next/static/chunks/bf06e590-d8b7a60d98993ce1.js" async=""></script><script src="/_next/static/chunks/e1cb20ef-8b65f021308aac34.js" async=""></script><script src="/_next/static/chunks/69debb3d-ff430e1d53429f24.js" async=""></script><script src="/_next/static/chunks/6575d434-3e231a337f7ed3af.js" async=""></script><script src="/_next/static/chunks/eca16dfc-e4478ccf3b7c05d9.js" async=""></script><script src="/_next/static/chunks/d27283b4-10726a3834f6e260.js" async=""></script><script src="/_next/static/chunks/3218-a44a2af964e8a69c.js" async=""></script><script src="/_next/static/chunks/4913-b36520b9465168e1.js" async=""></script><script src="/_next/static/chunks/8526-293fde107d8d7997.js" async=""></script><script src="/_next/static/chunks/6949-61b35d47c99a2519.js" async=""></script><script src="/_next/static/chunks/8313-f8d880b90673386e.js" async=""></script><script src="/_next/static/chunks/7502-9d7fbe7c7f732bff.js" async=""></script><script src="/_next/static/chunks/7999-b3231daeca0e28b3.js" async=""></script><script src="/_next/static/chunks/app/layout-6cd233063d7df156.js" async=""></script><script src="/_next/static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js" async=""></script><script src="/_next/static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js" async=""></script><meta name="next-size-adjust" content=""/><meta name="theme-color" media="(prefers-color-scheme: light)" content="rgb(250,250,250)"/><meta name="theme-color" media="(prefers-color-scheme: dark)" content="rgb(17,17,17)"/><title>The Node-Based UI for Svelte - Svelte Flow</title><meta name="description" content="A customizable Svelte component for building node-based editors and interactive diagrams"/><meta name="application-name" content="Svelte Flow"/><meta name="generator" content="Next.js"/><meta name="keywords" content="svelte,node-based UI,graph,diagram,workflow,svelte-flow,xyflow"/><meta name="robots" content="index,follow"/><meta name="docsearch:site" content="svelte"/><link rel="canonical" href="https://svelteflow.dev"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="Svelte Flow"/><meta name="apple-mobile-web-app-status-bar-style" content="default"/><meta property="og:title" content="The Node-Based UI for Svelte - Svelte Flow"/><meta property="og:description" content="A customizable Svelte component for building node-based editors and interactive diagrams"/><meta property="og:url" content="https://svelteflow.dev"/><meta property="og:site_name" content="Svelte Flow"/><meta property="og:locale" content="en_US"/><meta property="og:image:type" content="image/jpeg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="640"/><meta property="og:image" content="https://svelteflow.dev/opengraph-image.jpg?5efa60eac9b47bcb"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="https://x.com/xyflowdev"/><meta name="twitter:creator" content="@xyflowdev"/><meta name="twitter:title" content="The Node-Based UI for Svelte - Svelte Flow"/><meta name="twitter:description" content="A customizable Svelte component for building node-based editors and interactive diagrams"/><meta name="twitter:image:type" content="image/jpeg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="640"/><meta name="twitter:image" content="https://svelteflow.dev/opengraph-image.jpg?5efa60eac9b47bcb"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="256x256"/><link rel="icon" href="/icon.svg?6866c81275915474" type="image/svg+xml" sizes="any"/><link rel="apple-touch-icon" href="/apple-icon.png?153fbcdef0df2a3a" type="image/png" sizes="180x180"/><style>:root { --nextra-primary-hue: 15deg; --nextra-primary-saturation: 90%; --nextra-primary-lightness: 45%; --nextra-bg: 250,250,250; --nextra-content-width: 90rem; } .dark { --nextra-primary-hue: 15deg; --nextra-primary-saturation: 90%; --nextra-primary-lightness: 55%; --nextra-bg: 17,17,17; } ::selection { background: hsla(var(--nextra-primary-hue),var(--nextra-primary-saturation),var(--nextra-primary-lightness),.3); } html { background: rgb(var(--nextra-bg)); }</style><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><script>((e,t,n,r,i,o,a,s)=>{let l=document.documentElement,c=["light","dark"];function u(t){(Array.isArray(e)?e:[e]).forEach(e=>{let n="class"===e,r=n&&o?i.map(e=>o[e]||e):i;n?(l.classList.remove(...r),l.classList.add(o&&o[t]?o[t]:t)):l.setAttribute(e,t)}),s&&c.includes(t)&&(l.style.colorScheme=t)}if(r)u(r);else try{let e=localStorage.getItem(t)||n,r=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;u(r)}catch(e){}})("class","theme","light","light",["light","dark"],null,true,true)</script><a href="#nextra-skip-nav" class="nextra-skip-nav x:sr-only" type="button" data-headlessui-state="">Skip to Content</a><div class="nextra-banner x:max-md:sticky x:top-0 x:z-30 x:flex x:items-center x:px-2 x:text-slate-50 x:dark:text-white x:bg-neutral-900 x:dark:bg-[linear-gradient(1deg,#383838,#212121)] x:print:[display:none]"><div class="x:w-full x:text-center x:font-medium x:text-sm x:py-2.5"><a class="hover:underline x:focus-visible:nextra-focus" href="https://next.svelteflow.dev" rel="noreferrer" target="_blank">📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!</a></div><button class="x:transition x:cursor-pointer x:p-2 x:opacity-80" aria-label="Dismiss banner" type="button" data-headlessui-state=""><script>try{document.querySelector('.nextra-banner').classList.toggle('x:hidden',localStorage.getItem("svelte-flow-1"))}catch(e){}</script><svg viewBox="0 0 20 20" fill="currentColor" height="1em"><path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"></path></svg></button></div><header class="nextra-navbar x:sticky x:top-0 x:z-30 x:w-full x:bg-transparent x:print:hidden x:max-md:[.nextra-banner:not([class$=hidden])~&]:top-(--nextra-banner-height)"><div class="nextra-navbar-blur x:absolute x:-z-1 x:size-full nextra-border x:border-b x:backdrop-blur-md x:bg-nextra-bg/70"></div><nav style="height:var(--nextra-navbar-height)" class="x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)] x:justify-end"><div class="x:flex x:items-center x:max-md:me-auto"><a class="flex space-x-2 items-center x:focus-visible:nextra-focus" href="/"><div class="text-primary h-7 w-7 md:h-8 md:w-8 shrink-0"><svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 3H25C23.8954 3 23 3.89543 23 5V15C23 16.1046 23.8954 17 25 17H35C36.1046 17 37 16.1046 37 15V5C37 3.89543 36.1046 3 35 3Z" stroke-width="2" fill="none" stroke="currentColor" data-path="animation"></path><path d="M35 23H25C23.8954 23 23 23.8954 23 25V35C23 36.1046 23.8954 37 25 37H35C36.1046 37 37 36.1046 37 35V25C37 23.8954 36.1046 23 35 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 23H5C3.89543 23 3 23.8954 3 25V35C3 36.1046 3.89543 37 5 37H15C16.1046 37 17 36.1046 17 35V25C17 23.8954 16.1046 23 15 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 3H5C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3Z" stroke="#1A192B" stroke-width="2"></path><path d="M17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13Z" fill="white"></path><path d="M23 13C24.6569 13 26 11.6569 26 10C26 8.34315 24.6569 7 23 7C21.3431 7 20 8.34315 20 10C20 11.6569 21.3431 13 23 13Z" fill="white"></path><path d="M30 20C31.6569 20 33 18.6569 33 17C33 15.3431 31.6569 14 30 14C28.3431 14 27 15.3431 27 17C27 18.6569 28.3431 20 30 20Z" fill="white"></path><path d="M30 26C31.6569 26 33 24.6569 33 23C33 21.3431 31.6569 20 30 20C28.3431 20 27 21.3431 27 23C27 24.6569 28.3431 26 30 26Z" fill="white"></path><path d="M17 33C18.6569 33 20 31.6569 20 30C20 28.3431 18.6569 27 17 27C15.3431 27 14 28.3431 14 30C14 31.6569 15.3431 33 17 33Z" fill="white"></path><path d="M23 33C24.6569 33 26 31.6569 26 30C26 28.3431 24.6569 27 23 27C21.3431 27 20 28.3431 20 30C20 31.6569 21.3431 33 23 33Z" fill="white"></path><path d="M30 25C31.1046 25 32 24.1046 32 23C32 21.8954 31.1046 21 30 21C28.8954 21 28 21.8954 28 23C28 24.1046 28.8954 25 30 25Z" fill="#1A192B"></path><path d="M17 32C18.1046 32 19 31.1046 19 30C19 28.8954 18.1046 28 17 28C15.8954 28 15 28.8954 15 30C15 31.1046 15.8954 32 17 32Z" fill="#1A192B"></path><path d="M23 32C24.1046 32 25 31.1046 25 30C25 28.8954 24.1046 28 23 28C21.8954 28 21 28.8954 21 30C21 31.1046 21.8954 32 23 32Z" fill="#1A192B"></path><path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" fill="#1A192B"></path><path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" fill="#1A192B"></path><path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" fill="#1A192B"></path><path d="M17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12Z" fill="#1A192B"></path><path d="M23 12C24.1046 12 25 11.1046 25 10C25 8.89543 24.1046 8 23 8C21.8954 8 21 8.89543 21 10C21 11.1046 21.8954 12 23 12Z" fill="currentColor"></path><path d="M30 19C31.1046 19 32 18.1046 32 17C32 15.8954 31.1046 15 30 15C28.8954 15 28 15.8954 28 17C28 18.1046 28.8954 19 30 19Z" fill="currentColor"></path></svg></div><p class="font-black max-md:text-lg text-xl leading-none shrink-0">Svelte Flow</p></a></div><div class="x:flex x:gap-4 x:overflow-x-auto nextra-scrollbar x:py-1.5 x:max-md:hidden x:me-auto"><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/learn">Learn</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/api-reference">Reference</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/examples">Examples</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/showcase">Showcase</a><button class="x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:items-center x:flex x:gap-1.5 x:cursor-pointer" id="headlessui-menu-button-:Rf9kulb:" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">More<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="x:*:origin-center x:*:transition-transform x:*:rotate-90"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button><a class="xy-link-gray x:focus-visible:nextra-focus" href="https://github.com/xyflow/xyflow" rel="noreferrer" target="_blank"><svg class="nav-github-logo" fill="currentColor" viewBox="3 3 18 18" width="20"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg></a><a class="xy-link-gray x:focus-visible:nextra-focus" href="https://discord.gg/RVmnytFmGW" rel="noreferrer" target="_blank"><svg class="nav-github-logo" fill="currentColor" viewBox="0 0 130 90" width="23"><title>Discord</title><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"></path></svg></a><a class="items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6 hidden lg:block" href="/support-us">Support Us</a><button class="x:transition x:cursor-pointer nextra-hamburger x:md:hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" height="24" class=""><g><path d="M4 6h16"></path></g><path d="M4 12h16"></path><g><path d="M4 18h16"></path></g></svg></button></nav></header><aside class="nextra-mobile-nav x:flex x:flex-col x:fixed x:inset-0 x:pt-(--nextra-navbar-height) x:z-20 x:overscroll-contain x:[contain:layout_style] x:md:hidden x:[.nextra-banner:not([class$=hidden])~&]:pt-[calc(var(--nextra-banner-height)+var(--nextra-navbar-height))] x:bg-nextra-bg x:[transform:translate3d(0,-100%,0)]"><ul class="x:grid x:gap-1 x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask"><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn" type="button" data-headlessui-state="">Learn<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn">Quickstart</a></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/getting-started" type="button" data-headlessui-state="">Getting Started<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/getting-started/installation">Installation</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/getting-started/building-a-flow">Building a Flow</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/guides" type="button" data-headlessui-state="">Guides<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/guides/custom-nodes">Custom Nodes</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/guides/sub-flows">Sub Flows</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/guides/theming">Theming</a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference">API Reference</a></li></ul></div></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/api-reference" type="button" data-headlessui-state="">Reference<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference">API Reference</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/svelte-flow"><SvelteFlow /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/svelte-flow-provider"><SvelteFlowProvider /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components">Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/background"><Background /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/base-edge"><BaseEdge /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/control-button"><ControlButton /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/controls"><Controls /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-label"><EdgeLabel /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-label-renderer"><EdgeLabelRenderer /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/handle"><Handle /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/mini-map"><MiniMap /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resize-control"><NodeResizeControl /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resizer"><NodeResizer /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-toolbar"><NodeToolbar /></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/panel"><Panel /></a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks">Hooks<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-connection">useConnection()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-edges">useEdges()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-handle-connections">useHandleConnections()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-internal-node">useInternalNode()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-node-connections">useNodeConnections()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes">useNodes()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-data">useNodesData()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-initialized">useNodesInitialized()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-store">useStore()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-svelte-flow">useSvelteFlow()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-update-node-internals">useUpdateNodeInternals()</a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types">Types<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/background-variant">BackgroundVariant</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/color-mode">ColorMode</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection">Connection</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-type">ConnectionLineType</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/coordinate-extent">CoordinateExtent</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/default-edge-options">DefaultEdgeOptions</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge">Edge</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-marker">EdgeMarker</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-props">EdgeProps</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/fit-view-options">FitViewOptions</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/internal-node">InternalNode</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/key-definition">KeyDefinition</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/marker-type">MarkerType</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node">Node</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-connection">NodeConnection</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-origin">NodeOrigin</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-props">NodeProps</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/panel-position">PanelPosition</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/position">Position</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/svelte-flow-store">SvelteFlowStore</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/viewport">Viewport</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/xy-position">XYPosition</a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils">Utils<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/add-edge">addEdge()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-bezier-path">getBezierPath()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-connected-edges">getConnectedEdges()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-incomers">getIncomers()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-nodes-bounds">getNodesBounds()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-outgoers">getOutgoers()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-simple-bezier-path">getSimpleBezierPath()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-smooth-step-path">getSmoothStepPath()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-straight-path">getStraightPath()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-viewport-for-bounds">getViewportForBounds()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-edge">isEdge()</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-node">isNode()</a></li></ul></div></li></ul></div></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples" type="button" data-headlessui-state="">Examples<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples">Examples</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/overview">Feature Overview</a></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/nodes" type="button" data-headlessui-state="">Nodes<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/custom-node">Custom Nodes</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/update-node">Updating Nodes</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/stress">Stress Test</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/drag-handle">Drag Handle</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/add-node-on-edge-drop">Add Node On Edge Drop</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/proximity-connect">Proximity Connect</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/node-resizer">Node Resizer</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/easy-connect">Easy Connect</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/connection-limit">Connection Limit</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/intersections">Intersections</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/edges" type="button" data-headlessui-state="">Edges<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/custom-connectionline">Connection Line</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/custom-edges">Custom Edges</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-label-renderer">Edge Label Renderer</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-markers">Edge Markers</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-types">Edge Types</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/simple-floating-edges">Simple Floating Edges</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/layout" type="button" data-headlessui-state="">Layout<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/dagre">Dagre</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/elkjs">Elkjs</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/horizontal-flow">Horizontal Flow</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/subflows">Subflows</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/interaction" type="button" data-headlessui-state="">Interaction<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/computing-flows">Computing Flows</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/context-menu">Context Menu</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/contextual-zoom">Contextual Zoom</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/drag-and-drop">Drag and Drop</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/validation">Validation</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/styling" type="button" data-headlessui-state="">Styling<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/base-style">Base Style</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/dark-mode">Dark Mode</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/tailwind">Tailwind</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/turbo-flow">Turbo Flow</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/misc" type="button" data-headlessui-state="">Misc<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/misc/download-image">Download Image</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/misc/threlte-flow">Threlte Flow</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/misc/use-svelte-flow">useSvelteFlow</a></li></ul></div></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/showcase">Showcase</a></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" type="button" data-headlessui-state="">More<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/whats-new">Changelog</a></li><li class=""><a href="https://xyflow.com/blog" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Blog <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li><li class=""><a href="https://xyflow.com/contact" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Contact Us <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li></ul></div></li></ul></aside><main class="pt-10 lg:pt-14 2xl:pt-18 pb-24 mx-auto x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] h-[600px] lg:h-[550px] xl:h-[600px] -mt-10 lg:-mt-14 2xl:-mt-18"><div class="pointer-events-none x:max-w-(--nextra-content-width) w-full absolute left-1/2 top-8 lg:top-[130px] -translate-x-1/2 z-10"><div style="pointer-events:all" class="text-center mx-auto lg:mx-0 lg:text-left max-w-lg relative bg-white/10 backdrop-blur-[2px] px-3 lg:px-[35px]"><h1 class="tracking-[-0.02rem] text-5xl lg:text-6xl mb-4 font-black">Wire Your Ideas with <span class="text-primary">Svelte Flow</span></h1><h2 class="mb-4 lg:mb-6 text-xl">A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow</h2><div class="flex justify-center lg:justify-start"><div class="flex"><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 px-6 h-10 text-md rounded-full mr-3" href="/learn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path></svg>Quickstart</a><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full" href="/support-us"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path></svg> Support Us</a></div></div></div></div><div class="w-full h-full bg-gradient bg-no-repeat bg-[center_120px] lg:bg-[65%_center] lg:bg-[length:35%]"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" id="hero"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div id="react-flow__node-desc-hero" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-hero" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-hero" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div></div><div class="my-16 lg:my-24 mt-6 lg:mt-10"><div class="lg:grid lg:grid-cols-7 lg:gap-20"><div class="lg:col-span-4 flex place-content-between lg:space-x-24 grow"><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">0.1.34</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">Current Version</p></div><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">30k</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">Weekly Installs</p></div><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">MIT</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">License</p></div></div><div class="lg:col-span-3 mt-8 lg:mt-0"><p class="text-light text-lg leading-tight">Svelte Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by supporting us.</p><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full max-md:w-full mt-5" href="/support-us"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path></svg> Support Us</a></div></div></div><div class="relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] x:max-w-(--nextra-content-width) lg:ml-0 lg:mr-0 lg:right-0 lg:left-0 lg:w-full !mt-0"><div class="flex border border-gray-700 text-white bg-black rounded-none border-none p-0 mt-16 lg:mt-24 lg:p-1.5 lg:rounded-3xl"><div class="shadow-md relative overflow-hidden flex-grow border border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-none border-none lg:rounded-[18px] lg:border-solid lg:border-gray-700"><div class="px-4 pt-12 pb-4"><p class="text-lg leading-tight font-bold mb-2 text-center text-primary">Getting Started with Svelte Flow</p><p class="text-base leading-relaxed text-center max-w-lg mx-auto mb-6 lg:mb-8">Make sure you’ve installed npm, pnpm or yarn. Then you can install Svelte Flow via:</p><div class="border border-solid border-gray-700 rounded-md max-w-3xl mx-auto bg-black/90"><div class="flex p-4"><div class="w-3 h-3 bg-red-400 rounded-full mr-2"></div><div class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></div><div class="w-3 h-3 bg-green-400 rounded-full mr-2"></div></div><div class="px-4 pl-8 pb-6 py-2"><div class="!pl-0 inline text-md font-mono">npm install <span class="text-primary">@xyflow/svelte</span></div></div></div></div><div class="flex justify-center mt-5 py-3 bg-black/90 border-t border-gray-700"><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline shadow-none !px-0 py-2 h-9 px-6 text-white font-bold" href="/learn">See full Quickstart guide <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ml-2 w-4 h-4 stroke-2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"></path></svg></a></div></div></div></div><div class="my-16 lg:my-24"><div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[3] mb-16 md:mb-24"><div class="flex flex-col justify-center mb-4 order-1"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">Ready out-of-the-box</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing edges are all built-in.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn">Get started</a></div></div><div class="order-2"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" id="a"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div class="react-flow__panel react-flow__controls vertical bottom left" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="fit view" aria-label="fit view"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button></div><div id="react-flow__node-desc-a" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-a" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-a" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="source-0" data-position="bottom" data-to="target-1" class="port absolute hidden w-[18px] h-[18px] -bottom-[18px] right-10 md:left-1/2 md:right-auto source"><div class="bg-gray-50 rounded-b-full shadow-md absolute w-10 h-7 left-1/2 -translate-x-1/2 top-0"></div><div data-portid="source-0" data-position="bottom" data-to="target-1" class="absolute rounded-full border-2 border-solid bg-white z-20 border-primary w-[18px] h-[18px] shadow-md"></div><svg class="absolute pointer-events-none overflow-visible"><path class="fill-none stroke-2 stroke-primary" style="stroke-dasharray:4 2"></path></svg></div></div></div></div></div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[2] mb-16 md:mb-24"><div class="flex flex-col justify-center mb-4 order-2"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">Powered by us.<br/>Designed by you.</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">We play nice with Tailwind and good old CSS. Svelte Flow nodes are just Svelte components. Create custom nodes to have full control with interactive components.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn/guides/custom-nodes">Custom nodes guide</a></div></div><div class="order-1"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow darkflow home-flow-b light" id="b"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><div class="react-flow__panel react-flow__controls vertical top right" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button></div><div id="react-flow__node-desc-b" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-b" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-b" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="target-1" data-position="top" class="port absolute hidden w-[18px] h-[18px] -top-4 left-10 md:left-1/2 target"><div data-portid="target-1" data-position="top" class="absolute rounded-full border-2 z-20 border-primary w-[18px] h-[18px] border-none bg-transparent"></div></div><div data-portid="source-1" data-position="bottom" data-to="target-2" class="port absolute hidden w-[18px] h-[18px] -bottom-[18px] right-10 md:left-1/2 md:right-auto source"><div class="bg-gray-50 rounded-b-full shadow-md absolute w-10 h-7 left-1/2 -translate-x-1/2 top-0"></div><div data-portid="source-1" data-position="bottom" data-to="target-2" class="absolute rounded-full border-2 border-solid bg-white z-20 border-primary w-[18px] h-[18px] shadow-md"></div><svg class="absolute pointer-events-none overflow-visible"><path class="fill-none stroke-2 stroke-primary" style="stroke-dasharray:4 2"></path></svg></div></div></div></div></div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[1]"><div class="flex flex-col justify-center mb-4 order-1"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">All the right plugins</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">Make more advanced apps with the Background, Minimap, Controls, and Panel components.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn">Read more</a></div></div><div class="order-2"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow home-flow-c light" id="c"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:#f2f2f2" data-testid="rf__background"><pattern id="pattern-1b-1" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="translate(-6,-6)"><path stroke-width="1" d="M5 0 V10 M0 5 H10" class="react-flow__background-pattern lines"></path></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1b-1)"></rect></svg><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:#eee" data-testid="rf__background"><pattern id="pattern-1b-2" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(-51,-51)"><path stroke-width="2" d="M50 0 V100 M0 50 H100" class="react-flow__background-pattern lines"></path></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1b-2)"></rect></svg><div class="react-flow__panel react-flow__controls vertical bottom left" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="fit view" aria-label="fit view"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button></div><div class="react-flow__panel react-flow__minimap bottom right" style="height:100px;pointer-events:all" data-testid="rf__minimap"><svg width="200" height="100" viewBox="0 0 0 0" class="react-flow__minimap-svg" role="img" aria-labelledby="react-flow__minimap-desc-1"><title id="react-flow__minimap-desc-1">React Flow mini map</title><path class="react-flow__minimap-mask" d="M0,0h0v0h0z M0,0h0v0h0z" fill-rule="evenodd" pointer-events="none"></path></svg></div><div id="react-flow__node-desc-c" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-c" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-c" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="target-2" data-position="top" class="port absolute hidden w-[18px] h-[18px] -top-4 left-10 md:left-1/2 target"><div data-portid="target-2" data-position="top" class="absolute rounded-full border-2 z-20 border-primary w-[18px] h-[18px] border-none bg-transparent"></div></div></div></div></div></div></div></div><div class="p-2 flex border border-solid border-gray-700 text-white bg-black rounded-3xl"><div class="shadow-md relative overflow-hidden flex-grow border border-solid border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-[22px]"><div class="p-4 md:p-8 lg:p-14"><div class="grid lg:grid-cols-2 lg:gap-40"><div><p class="text-base leading-relaxed font-bold mb-2 text-accent tracking-wide">Interactive Examples</p><h2 class="text-5xl lg:text-6xl font-black leading mb-4 tracking-normal">See Svelte Flow in action</h2></div><div><p class="text-base leading-relaxed mt-4 mb-4">To see all the capabilities of Svelte Flow, check out the interactive examples which are regularly updated.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-secondary text-secondary-foreground hover:bg-gray-50 border border-solid border-gray-100 py-2 h-9 px-6" href="/examples">See all examples</a></div></div><div class="mt-8"><div dir="ltr" data-orientation="horizontal" class="relative"><div class="relative mx-auto aspect-video sm:aspect-auto sm:h-[40vh]"><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R5bttelb:-trigger-Feature Overview" id="radix-:R5bttelb:-content-Feature Overview" tabindex="0" class="h-full w-full absolute" style="animation-duration:0s"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-out opacity-100"><iframe src="https://example-apps.xyflow.com/svelte/examples/misc/feature-overview/index.html" loading="lazy" width="100%" height="100%" class="rounded-xl overflow-hidden pointer-events-none"></iframe></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R5bttelb:-trigger-Subflows" id="radix-:R5bttelb:-content-Subflows" tabindex="0" class="h-full w-full absolute"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-in opacity-0"><iframe src="https://example-apps.xyflow.com/svelte/examples/layout/subflows/index.html" loading="lazy" width="100%" height="100%" class="rounded-xl overflow-hidden pointer-events-none"></iframe></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R5bttelb:-trigger-Edge Types" id="radix-:R5bttelb:-content-Edge Types" tabindex="0" class="h-full w-full absolute"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-in opacity-0"><iframe src="https://example-apps.xyflow.com/svelte/examples/edges/edge-types/index.html" loading="lazy" width="100%" height="100%" class="rounded-xl overflow-hidden pointer-events-none"></iframe></div></div></div><div role="tablist" aria-orientation="horizontal" class="mb-4 border-b border-gray-200 flex justify-around gap-8 mt-8 bg-transparent border-none" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-:R5bttelb:-content-Feature Overview" data-state="active" id="radix-:R5bttelb:-trigger-Feature Overview" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none flex" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"><div class="h-full rounded bg-gradient-to-r from-accent/40 to-accent/70 transition-all duration-200 ease-linear" style="width:0%"></div></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-100"><p class="text-base leading-relaxed my-2 font-mono">Feature Overview</p><p class="text-base leading-snug opacity-80">Many features of Svelte Flow require zero configuration</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R5bttelb:-content-Subflows" data-state="inactive" id="radix-:R5bttelb:-trigger-Subflows" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none hidden" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-40"><p class="text-base leading-relaxed my-2 font-mono">Subflows</p><p class="text-base leading-snug opacity-80">Svelte Flow supports nested graphs out of the box</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R5bttelb:-content-Edge Types" data-state="inactive" id="radix-:R5bttelb:-trigger-Edge Types" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none hidden" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-40"><p class="text-base leading-relaxed my-2 font-mono">Edge Types</p><p class="text-base leading-snug opacity-80">The component comes with a set of common edge types</p></div></button></div></div></div></div></div></div><div class="my-16 lg:my-24"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-2">A project by the xyflow team</h2><p class="text-light text-base leading-relaxed text-center max-w-xl mx-auto mb-6">We are Christopher, Peter, Abbey and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them</p><div class="flex flex-wrap justify-center space-x-8 mb-16"><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/blog">Blog <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/about">About us <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/open-source">Open Source <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/contact">Contact Us <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a></div></div><div class="grid border-t border-solid border-gray-100 grid-cols-1 lg:grid-cols-2 mt-16 lg:mt-24"><a href="https://reactflow.dev" class="lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer" target="_blank" rel="noopener noreferrer"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center"><div class="w-8 h-8 mr-2 text-[#ff0071]"><svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 3H25C23.8954 3 23 3.89543 23 5V15C23 16.1046 23.8954 17 25 17H35C36.1046 17 37 16.1046 37 15V5C37 3.89543 36.1046 3 35 3Z" stroke-width="2" fill="none" stroke="currentColor" data-path="animation"></path><path d="M35 23H25C23.8954 23 23 23.8954 23 25V35C23 36.1046 23.8954 37 25 37H35C36.1046 37 37 36.1046 37 35V25C37 23.8954 36.1046 23 35 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 23H5C3.89543 23 3 23.8954 3 25V35C3 36.1046 3.89543 37 5 37H15C16.1046 37 17 36.1046 17 35V25C17 23.8954 16.1046 23 15 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 3H5C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3Z" stroke="#1A192B" stroke-width="2"></path><path d="M17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13Z" fill="white"></path><path d="M23 13C24.6569 13 26 11.6569 26 10C26 8.34315 24.6569 7 23 7C21.3431 7 20 8.34315 20 10C20 11.6569 21.3431 13 23 13Z" fill="white"></path><path d="M30 20C31.6569 20 33 18.6569 33 17C33 15.3431 31.6569 14 30 14C28.3431 14 27 15.3431 27 17C27 18.6569 28.3431 20 30 20Z" fill="white"></path><path d="M30 26C31.6569 26 33 24.6569 33 23C33 21.3431 31.6569 20 30 20C28.3431 20 27 21.3431 27 23C27 24.6569 28.3431 26 30 26Z" fill="white"></path><path d="M17 33C18.6569 33 20 31.6569 20 30C20 28.3431 18.6569 27 17 27C15.3431 27 14 28.3431 14 30C14 31.6569 15.3431 33 17 33Z" fill="white"></path><path d="M23 33C24.6569 33 26 31.6569 26 30C26 28.3431 24.6569 27 23 27C21.3431 27 20 28.3431 20 30C20 31.6569 21.3431 33 23 33Z" fill="white"></path><path d="M30 25C31.1046 25 32 24.1046 32 23C32 21.8954 31.1046 21 30 21C28.8954 21 28 21.8954 28 23C28 24.1046 28.8954 25 30 25Z" fill="#1A192B"></path><path d="M17 32C18.1046 32 19 31.1046 19 30C19 28.8954 18.1046 28 17 28C15.8954 28 15 28.8954 15 30C15 31.1046 15.8954 32 17 32Z" fill="#1A192B"></path><path d="M23 32C24.1046 32 25 31.1046 25 30C25 28.8954 24.1046 28 23 28C21.8954 28 21 28.8954 21 30C21 31.1046 21.8954 32 23 32Z" fill="#1A192B"></path><path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" fill="#1A192B"></path><path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" fill="#1A192B"></path><path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" fill="#1A192B"></path><path d="M17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12Z" fill="#1A192B"></path><path d="M23 12C24.1046 12 25 11.1046 25 10C25 8.89543 24.1046 8 23 8C21.8954 8 21 8.89543 21 10C21 11.1046 21.8954 12 23 12Z" fill="currentColor"></path><path d="M30 19C31.1046 19 32 18.1046 32 17C32 15.8954 31.1046 15 30 15C28.8954 15 28 15.8954 28 17C28 18.1046 28.8954 19 30 19Z" fill="currentColor"></path></svg></div> React Flow</h2><p class="text-light text-base leading-relaxed mt-2 mb-4">A customizable React component for building node-based editors and interactive diagrams</p><span class="flex items-center text-[#ff0071]">Visit Website <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="ml-1 w-4 h-4"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></span></a><a href="https://xyflow.com" class="lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer" target="_blank" rel="noopener noreferrer"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center"><div class="w-8 h-8 mr-2 text-[#000]"><svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 3H25C23.8954 3 23 3.89543 23 5V15C23 16.1046 23.8954 17 25 17H35C36.1046 17 37 16.1046 37 15V5C37 3.89543 36.1046 3 35 3Z" stroke-width="2" fill="none" stroke="currentColor" data-path="animation"></path><path d="M35 23H25C23.8954 23 23 23.8954 23 25V35C23 36.1046 23.8954 37 25 37H35C36.1046 37 37 36.1046 37 35V25C37 23.8954 36.1046 23 35 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 23H5C3.89543 23 3 23.8954 3 25V35C3 36.1046 3.89543 37 5 37H15C16.1046 37 17 36.1046 17 35V25C17 23.8954 16.1046 23 15 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 3H5C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3Z" stroke="#1A192B" stroke-width="2"></path><path d="M17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13Z" fill="white"></path><path d="M23 13C24.6569 13 26 11.6569 26 10C26 8.34315 24.6569 7 23 7C21.3431 7 20 8.34315 20 10C20 11.6569 21.3431 13 23 13Z" fill="white"></path><path d="M30 20C31.6569 20 33 18.6569 33 17C33 15.3431 31.6569 14 30 14C28.3431 14 27 15.3431 27 17C27 18.6569 28.3431 20 30 20Z" fill="white"></path><path d="M30 26C31.6569 26 33 24.6569 33 23C33 21.3431 31.6569 20 30 20C28.3431 20 27 21.3431 27 23C27 24.6569 28.3431 26 30 26Z" fill="white"></path><path d="M17 33C18.6569 33 20 31.6569 20 30C20 28.3431 18.6569 27 17 27C15.3431 27 14 28.3431 14 30C14 31.6569 15.3431 33 17 33Z" fill="white"></path><path d="M23 33C24.6569 33 26 31.6569 26 30C26 28.3431 24.6569 27 23 27C21.3431 27 20 28.3431 20 30C20 31.6569 21.3431 33 23 33Z" fill="white"></path><path d="M30 25C31.1046 25 32 24.1046 32 23C32 21.8954 31.1046 21 30 21C28.8954 21 28 21.8954 28 23C28 24.1046 28.8954 25 30 25Z" fill="#1A192B"></path><path d="M17 32C18.1046 32 19 31.1046 19 30C19 28.8954 18.1046 28 17 28C15.8954 28 15 28.8954 15 30C15 31.1046 15.8954 32 17 32Z" fill="#1A192B"></path><path d="M23 32C24.1046 32 25 31.1046 25 30C25 28.8954 24.1046 28 23 28C21.8954 28 21 28.8954 21 30C21 31.1046 21.8954 32 23 32Z" fill="#1A192B"></path><path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" fill="#1A192B"></path><path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" fill="#1A192B"></path><path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" fill="#1A192B"></path><path d="M17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12Z" fill="#1A192B"></path><path d="M23 12C24.1046 12 25 11.1046 25 10C25 8.89543 24.1046 8 23 8C21.8954 8 21 8.89543 21 10C21 11.1046 21.8954 12 23 12Z" fill="currentColor"></path><path d="M30 19C31.1046 19 32 18.1046 32 17C32 15.8954 31.1046 15 30 15C28.8954 15 28 15.8954 28 17C28 18.1046 28.8954 19 30 19Z" fill="currentColor"></path></svg></div> xyflow</h2><p class="text-light text-base leading-relaxed mt-2 mb-4">The team behind React Flow and Svelte Flow. Read updates and blog posts from us and about how we approach open source development.</p><span class="flex items-center text-[#000]">Visit Website <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="ml-1 w-4 h-4"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></span></a></div></main><footer class="print:bg-transparent py-12 lg:py-18 bg-black text-white"><div class="mx-auto lg:flex x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="lg:max-w-[300px] md:max-w-[600px] lg:mr-24 shrink-0"><p class="text-light text-base leading-relaxed mb-2">A project by the xyflow team</p><div class="font-black text-3xl tracking-tight leading-none mb-6 lg:mb-10">We are building and maintaining open source software for node-based UIs since 2019.</div></div><div class="grow"><div class="flex flex-col grow h-[100%]"><div class="grid grid-cols-2 lg:grid-cols-4 grid-gap-4"><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Docs</p><a class="block" href="/learn">Quickstart Guide</a><a class="block" href="/api-reference">API Reference</a><a class="block" href="/examples">Examples</a><a class="block" href="/showcase">Showcase</a><a class="block" href="/support-us">Support Us</a></div><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Social</p><a class="block" href="https://discord.gg/RVmnytFmGW">Discord</a><a class="block" href="https://github.com/xyflow">Github</a><a class="block" href="https://x.com/xyflowdev">X / Twitter</a><a class="block" href="https://bsky.app/profile/xyflow.com">Bluesky</a></div><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">xyflow</p><a class="block" href="https://xyflow.com/blog">Blog</a><a class="block" href="https://xyflow.com/open-source">Open Source</a><a class="block" href="https://xyflow.com/about">About</a><a class="block" href="https://xyflow.com/contact">Contact</a><a class="block" href="https://xyflow.com/careers"><div class="flex items-center gap-1">Careers <span class="bg-primary-foreground text-primary rounded-full text-xs px-1 py-0.5">hiring</span></div></a></div><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Legal</p><a class="block" href="https://github.com/xyflow/xyflow/blob/main/LICENSE">MIT License</a><a class="block" href="https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md">Code of Conduct</a></div></div><p class="text-light pt-6 text-sm mt-auto"><a href="mailto:info@xyflow.com">info@xyflow.com</a> — Copyright © 2025 <a href="https://webkid.io" target="_blank">webkid GmbH</a>. All rights reserved — website design by <a target="_blank" href="https://facumontanaro.com/">Facu Montanaro</a></p></div></div></div></footer><script src="/_next/static/chunks/webpack-0c59b8cd0547ad2d.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[72499,[],\"\"]\n4:I[2671,[],\"\"]\n6:I[22520,[],\"OutletBoundary\"]\n8:I[22520,[],\"MetadataBoundary\"]\na:I[22520,[],\"ViewportBoundary\"]\nc:I[99878,[],\"\"]\n:HL[\"/_next/static/media/08c48d09be6639e0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/63429a2b6aa41def-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8465cd5ac5565d9c-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/8e4fa9519f0b1748-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/346c8d13d90d8145.css\",\"style\"]\n:HL[\"/_next/static/css/e54dab27a5b3bf74.css\",\"style\"]\n:HL[\"/_next/static/css/31970efc4cc1dcd4.css\",\"style\"]\n:HL[\"/_next/static/css/d60be7727a3ad5a8.css\",\"style\"]\n0:{\"P\":null,\"b\":\"ysrG8OIPmrxoT8T5HYcI2\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(content-pages)\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/346c8d13d90d8145.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e54dab27a5b3bf74.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/31970efc4cc1dcd4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d60be7727a3ad5a8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"(content-pages)\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(content-pages)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__"])</script><script>self.__next_f.push([1,"PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",null,[\"$\",\"$L6\",null,{\"children\":\"$L7\"}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"PSXbF3kqZzjQbihbi7bkv\",{\"children\":[[\"$\",\"$L8\",null,{\"children\":\"$L9\"}],[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$c\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"d:I[51555,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"8313\",\"static/chunks/8313-f8d880b90673386e.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"7177\",\"static/chunks/app/layout-6cd233063d7df156.js\"],\"Html\"]\ne:I[75356,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Fathom\"]\n2:[\"$\",\"$Ld\",null,{\"children\":[[\"$\",\"head\",null,{\"children\":[\"$undefined\",[\"$\",\"style\",null,{\"children\":\":root {\\n --nextra-primary-hue: 15deg;\\n --nextra-primary-saturation: 90%;\\n --nextra-primary-lightness: 45%;\\n --nextra-bg: 250,250,250;\\n --nextra-content-width: 90rem;\\n}\\n.dark {\\n --nextra-primary-hue: 15deg;\\n --nextra-primary-saturation: 90%;\\n --nextra-primary-lightness: 55%;\\n --nextra-bg: 17,17,17;\\n}\\n::selection {\\n background: hsla(var(--nextra-primary-hue),var(--nextra-primary-saturation),var(--nextra-primary-lightness),.3);\\n}\\nhtml {\\n background: rgb(var(--nextra-bg));\\n}\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: light)\",\"content\":\"rgb(250,250,250)\"}],[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"media\":\"(prefers-color-scheme: dark)\",\"content\":\"rgb(17,17,17)\"}],\"$u"])</script><script>self.__next_f.push([1,"ndefined\"]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$Le\",null,{\"id\":\"PFWQXXRR\"}],\"$Lf\"]}]]}]\n"])</script><script>self.__next_f.push([1,"10:I[29812,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"ThemeConfigProvider\"]\n11:I[18246,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"LastUpdated\"]\n13:I[48855,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8"])</script><script>self.__next_f.push([1,"d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"8313\",\"static/chunks/8313-f8d880b90673386e.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"7177\",\"static/chunks/app/layout-6cd233063d7df156.js\"],\"ThemeProvider\"]\n14:I[16368,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"SkipNavLink\"]\n15:I[35963,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"8313\",\"static/chunks/8313-f8d880b90673386e.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"7177\",\"static/chunks/app/layout-6cd233063d7df156.js\"],\"ClientBanner\"]\n16:I[64046,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\""])</script><script>self.__next_f.push([1,",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"8313\",\"static/chunks/8313-f8d880b90673386e.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"7177\",\"static/chunks/app/layout-6cd233063d7df156.js\"],\"CloseBannerButton\"]\n17:I[23922,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"ConfigProvider\"]\n18:I[27774,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"LogoLabel\"]\n19:I[68027,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\","])</script><script>self.__next_f.push([1,"\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"ClientNavbar\"]\n1a:I[23023,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Search\"]\n1c:I[21962,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"\"]\n1d:I[96876,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"8526\",\"static/chunks/8526-293fde107d8d7997.js\",\"6949\",\"static/chunks/6949-61b35d47c99a2519.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"st"])</script><script>self.__next_f.push([1,"atic/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"MobileNav\"]\n1e:I[22156,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"NotFoundLayout\"]\n1b:T481,M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"])</script><script>self.__next_f.push([1,"f:[\"$\",\"$L10\",null,{\"value\":{\"darkMode\":false,\"docsRepositoryBase\":\"https://github.com/xyflow/web/tree/main/sites/svelteflow.dev\",\"editLink\":\"Edit this page on GitHub\",\"feedback\":{\"content\":null,\"labels\":\"feedback\"},\"i18n\":[],\"lastUpdated\":[\"$\",\"$L11\",null,{}],\"navigation\":{\"next\":true,\"prev\":true},\"search\":null,\"sidebar\":{\"defaultMenuCollapseLevel\":2,\"defaultOpen\":true,\"toggleButton\":false},\"themeSwitch\":{\"dark\":\"Dark\",\"light\":\"Light\",\"system\":\"System\"},\"toc\":{\"backToTop\":null,\"extraContent\":\"$L12\",\"float\":true,\"title\":\"On This Page\"}},\"children\":[\"$\",\"$L13\",null,{\"attribute\":\"class\",\"defaultTheme\":\"light\",\"disableTransitionOnChange\":true,\"forcedTheme\":\"light\",\"children\":[[\"$\",\"$L14\",null,{}],[\"$\",\"$L15\",null,{\"className\":\"nextra-banner x:max-md:sticky x:top-0 x:z-30 x:flex x:items-center x:px-2 x:text-slate-50 x:dark:text-white x:bg-neutral-900 x:dark:bg-[linear-gradient(1deg,#383838,#212121)] x:print:[display:none]\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"div\",null,{\"className\":\"x:w-full x:text-center x:font-medium x:text-sm x:py-2.5\",\"children\":[\"$\",\"a\",null,{\"className\":\"hover:underline x:focus-visible:nextra-focus\",\"href\":\"https://next.svelteflow.dev\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"children\":\"📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!\"}]}],[\"$\",\"$L16\",null,{\"storageKey\":\"svelte-flow-1\",\"children\":[[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"try{document.querySelector('.nextra-banner').classList.toggle('x:hidden',localStorage.getItem(\\\"svelte-flow-1\\\"))}catch(e){}\"}}],[\"$\",\"svg\",null,{\"viewBox\":\"0 0 20 20\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"}]}]]}]]}],[\"$\",\"$L17\",null,{\"pageMap\":[{\"data\":{\"*\":{\"type\":\"page\"},\"learn\":{},\"api-reference\":{\"title\":\"Reference\"},\"examples\":{\"theme\":{\"layout\":\"full\",\"toc\":false}},\"showcase\":{\"title\":\"\"},\"more\":{\"type\":\"menu\",\"items\":{\"changelog\":{\"href\":\"/whats-new\",\"title\":\"Changelog\"},\"blog\":{\"href\":\"https://xyflow.com/blog\",\"title\":\"Blog\"},\"contact-us\":{\"href\":\"https://xyflow.com/contact\",\"title\":\"Contact Us\"}}},\"index\":{\"display\":\"hidden\"},\"support-us\":{\"display\":\"hidden\"},\"whats-new\":{\"display\":\"hidden\",\"theme\":{\"layout\":\"full\"}},\"developer-survey-2024\":{\"display\":\"hidden\",\"theme\":{\"layout\":\"full\"}}}},{\"name\":\"learn\",\"route\":\"/learn\",\"children\":[{\"data\":{\"index\":{\"title\":\"\"},\"getting-started\":{},\"guides\":{\"title\":\"Guides\"},\"api-reference\":{\"href\":\"/api-reference\"}}},{\"name\":\"index\",\"route\":\"/learn\",\"frontMatter\":{\"description\":\"How to get tarted with Svelte Flow in your Svelte project\",\"title\":\"Quickstart\",\"filePath\":\"src/content/learn/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Quickstart\"},{\"name\":\"getting-started\",\"route\":\"/learn/getting-started\",\"children\":[{\"data\":{\"installation\":{\"title\":\"\"},\"building-a-flow\":{\"title\":\"\"}}},{\"name\":\"installation\",\"route\":\"/learn/getting-started/installation\",\"frontMatter\":{\"sidebarTitle\":\"Installation\",\"description\":\"This is how to install the Svelte Flow package using npm, and how to include it in your project\",\"title\":\"Installation and Requirements\",\"filePath\":\"src/content/learn/getting-started/installation.mdx\",\"timestamp\":1742370652000},\"title\":\"Installation\"},{\"name\":\"building-a-flow\",\"route\":\"/learn/getting-started/building-a-flow\",\"frontMatter\":{\"description\":\"A quick guide that shows you how to get started with Svelte Flow\",\"title\":\"Building a Flow\",\"filePath\":\"src/content/learn/getting-started/building-a-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"Building a Flow\"}],\"title\":\"Getting Started\"},{\"name\":\"guides\",\"route\":\"/learn/guides\",\"children\":[{\"name\":\"custom-nodes\",\"route\":\"/learn/guides/custom-nodes\",\"frontMatter\":{\"description\":\"Step-by-step guide about how to work with custom nodes in Svelte Flow.\",\"title\":\"Custom Nodes\",\"filePath\":\"src/content/learn/guides/custom-nodes.mdx\",\"timestamp\":1742370652000},\"title\":\"Custom Nodes\"},{\"name\":\"sub-flows\",\"route\":\"/learn/guides/sub-flows\",\"frontMatter\":{\"description\":\"Learn how to use sub flows\",\"title\":\"Sub Flows\",\"filePath\":\"src/content/learn/guides/sub-flows.mdx\",\"timestamp\":1742370652000},\"title\":\"Sub Flows\"},{\"name\":\"theming\",\"route\":\"/learn/guides/theming\",\"frontMatter\":{\"description\":\"Svelte Flow comes with a minimal default theme. It's common to overwrite the default styles with your own CSS or use third-party libraries like Tailwind.\",\"title\":\"Theming\",\"filePath\":\"src/content/learn/guides/theming.mdx\",\"timestamp\":1742370652000},\"title\":\"Theming\"}],\"title\":\"Guides\"},{\"name\":\"api-reference\",\"href\":\"/api-reference\",\"title\":\"API Reference\"}],\"title\":\"Learn\"},{\"name\":\"api-reference\",\"route\":\"/api-reference\",\"children\":[{\"data\":{\"index\":{\"title\":\"\"},\"svelte-flow\":{\"title\":\"\"},\"svelte-flow-provider\":{\"title\":\"\"},\"components\":{\"title\":\"Components\"},\"hooks\":{\"title\":\"Hooks\"},\"types\":{\"title\":\"Types\"}}},{\"name\":\"index\",\"route\":\"/api-reference\",\"frontMatter\":{\"title\":\"API Reference\",\"filePath\":\"src/content/api-reference/index.mdx\",\"timestamp\":1742370652000},\"title\":\"API Reference\"},{\"name\":\"svelte-flow\",\"route\":\"/api-reference/svelte-flow\",\"frontMatter\":{\"title\":\"The SvelteFlow component\",\"description\":\"The SvelteFlow component is the heart of your Svelte Flow application.\",\"sidebarTitle\":\"\u003cSvelteFlow /\u003e\",\"filePath\":\"src/content/api-reference/svelte-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cSvelteFlow /\u003e\"},{\"name\":\"svelte-flow-provider\",\"route\":\"/api-reference/svelte-flow-provider\",\"frontMatter\":{\"title\":\"The SvelteFlowProvider component\",\"description\":\"The SvelteFlowProvider component wraps its child nodes with a Svelte context that makes it possible to access a flow's internal state outside of the SvelteFlow component.\",\"sidebarTitle\":\"\u003cSvelteFlowProvider /\u003e\",\"filePath\":\"src/content/api-reference/svelte-flow-provider.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cSvelteFlowProvider /\u003e\"},{\"name\":\"components\",\"route\":\"/api-reference/components\",\"children\":[{\"name\":\"background\",\"route\":\"/api-reference/components/background\",\"frontMatter\":{\"title\":\"The Background component\",\"sidebarTitle\":\"\u003cBackground /\u003e\",\"description\":\"The Background component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.\",\"filePath\":\"src/content/api-reference/components/background.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cBackground /\u003e\"},{\"name\":\"base-edge\",\"route\":\"/api-reference/components/base-edge\",\"frontMatter\":{\"title\":\"The BaseEdge component\",\"sidebarTitle\":\"\u003cBaseEdge /\u003e\",\"description\":\"The BaseEdge component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.\",\"filePath\":\"src/content/api-reference/components/base-edge.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cBaseEdge /\u003e\"},{\"name\":\"control-button\",\"route\":\"/api-reference/components/control-button\",\"frontMatter\":{\"title\":\"The ControlButton component\",\"sidebarTitle\":\"\u003cControlButton /\u003e\",\"description\":\"The ControlButton component is used to render custom/ additional buttons for the Controls component.\",\"filePath\":\"src/content/api-reference/components/control-button.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cControlButton /\u003e\"},{\"name\":\"controls\",\"route\":\"/api-reference/components/controls\",\"frontMatter\":{\"title\":\"The Controls component\",\"sidebarTitle\":\"\u003cControls /\u003e\",\"description\":\"The Controls component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.\",\"filePath\":\"src/content/api-reference/components/controls.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cControls /\u003e\"},{\"name\":\"edge-label\",\"route\":\"/api-reference/components/edge-label\",\"frontMatter\":{\"title\":\"The Edge Label component\",\"sidebarTitle\":\"\u003cEdgeLabel /\u003e\",\"description\":\"The Edge Label component can be used to add labels to edges.\",\"filePath\":\"src/content/api-reference/components/edge-label.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cEdgeLabel /\u003e\"},{\"name\":\"edge-label-renderer\",\"route\":\"/api-reference/components/edge-label-renderer\",\"frontMatter\":{\"title\":\"The EdgeLabelRenderer component\",\"sidebarTitle\":\"\u003cEdgeLabelRenderer /\u003e\",\"description\":\"Edges are SVG-based. If you want to render more complex labels you can use the EdgeLabelRenderer component to access a div based renderer. This component is a portal that renders the label in a div that is positioned on top of the edges.\",\"filePath\":\"src/content/api-reference/components/edge-label-renderer.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cEdgeLabelRenderer /\u003e\"},{\"name\":\"handle\",\"route\":\"/api-reference/components/handle\",\"frontMatter\":{\"title\":\"The Handle component\",\"sidebarTitle\":\"\u003cHandle /\u003e\",\"description\":\"The Handle component is used in your custom nodes to define connection points.\",\"filePath\":\"src/content/api-reference/components/handle.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cHandle /\u003e\"},{\"name\":\"mini-map\",\"route\":\"/api-reference/components/mini-map\",\"frontMatter\":{\"title\":\"The MiniMap component\",\"sidebarTitle\":\"\u003cMiniMap /\u003e\",\"description\":\"The MiniMap component renders an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.\",\"filePath\":\"src/content/api-reference/components/mini-map.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cMiniMap /\u003e\"},{\"name\":\"node-resize-control\",\"route\":\"/api-reference/components/node-resize-control\",\"frontMatter\":{\"title\":\"The NodeResizeControl component\",\"created_at\":\"2024-01-11\",\"sidebarTitle\":\"\u003cNodeResizeControl /\u003e\",\"description\":\"To create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).\",\"filePath\":\"src/content/api-reference/components/node-resize-control.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cNodeResizeControl /\u003e\"},{\"name\":\"node-resizer\",\"route\":\"/api-reference/components/node-resizer\",\"frontMatter\":{\"title\":\"The NodeResizer component\",\"sidebarTitle\":\"\u003cNodeResizer /\u003e\",\"description\":\"The NodeResizer component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.\",\"filePath\":\"src/content/api-reference/components/node-resizer.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cNodeResizer /\u003e\"},{\"name\":\"node-toolbar\",\"route\":\"/api-reference/components/node-toolbar\",\"frontMatter\":{\"title\":\"The NodeToolbar component\",\"sidebarTitle\":\"\u003cNodeToolbar /\u003e\",\"description\":\"The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.\",\"filePath\":\"src/content/api-reference/components/node-toolbar.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cNodeToolbar /\u003e\"},{\"name\":\"panel\",\"route\":\"/api-reference/components/panel\",\"frontMatter\":{\"title\":\"The Panel component\",\"sidebarTitle\":\"\u003cPanel /\u003e\",\"description\":\"The Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.\",\"filePath\":\"src/content/api-reference/components/panel.mdx\",\"timestamp\":1742370652000},\"title\":\"\u003cPanel /\u003e\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Components\",\"filePath\":\"src/content/api-reference/components/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Components\"},{\"name\":\"hooks\",\"route\":\"/api-reference/hooks\",\"children\":[{\"name\":\"use-connection\",\"route\":\"/api-reference/hooks/use-connection\",\"frontMatter\":{\"description\":\"The useConnection hook returns the current connection when there is an active connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).\",\"title\":\"useConnection()\",\"filePath\":\"src/content/api-reference/hooks/use-connection.mdx\",\"timestamp\":1742370652000},\"title\":\"useConnection()\"},{\"name\":\"use-edges\",\"route\":\"/api-reference/hooks/use-edges\",\"frontMatter\":{\"description\":\"The useEdges hook returns an array of the current edges store.\",\"title\":\"useEdges()\",\"filePath\":\"src/content/api-reference/hooks/use-edges.mdx\",\"timestamp\":1742370652000},\"title\":\"useEdges()\"},{\"name\":\"use-handle-connections\",\"route\":\"/api-reference/hooks/use-handle-connections\",\"frontMatter\":{\"description\":\"This hook can be used to get notified when the connections of a handle change.\",\"title\":\"useHandleConnections()\",\"filePath\":\"src/content/api-reference/hooks/use-handle-connections.mdx\",\"timestamp\":1742370652000},\"title\":\"useHandleConnections()\"},{\"name\":\"use-internal-node\",\"route\":\"/api-reference/hooks/use-internal-node\",\"frontMatter\":{\"description\":\"The useInternalNode hook returns an internal node.\",\"title\":\"useInternalNode()\",\"filePath\":\"src/content/api-reference/hooks/use-internal-node.mdx\",\"timestamp\":1742370652000},\"title\":\"useInternalNode()\"},{\"name\":\"use-node-connections\",\"route\":\"/api-reference/hooks/use-node-connections\",\"frontMatter\":{\"description\":\"This hook returns an array of connected edges. Components that use this hook will re-render whenever any edge changes.\",\"created_at\":\"2025-01-15\",\"title\":\"useNodeConnections()\",\"filePath\":\"src/content/api-reference/hooks/use-node-connections.mdx\",\"timestamp\":1742370652000},\"title\":\"useNodeConnections()\"},{\"name\":\"use-nodes\",\"route\":\"/api-reference/hooks/use-nodes\",\"frontMatter\":{\"description\":\"This hook returns a store of the current nodes array. When you subscribe to this store, it will trigger whenever the nodes array changes. This happens when nodes are added, removed, or updated (dragged for example).\",\"title\":\"useNodes()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes.mdx\",\"timestamp\":1742370652000},\"title\":\"useNodes()\"},{\"name\":\"use-nodes-data\",\"route\":\"/api-reference/hooks/use-nodes-data\",\"frontMatter\":{\"description\":\"With this hook you can receive the data of the passed node ids.\",\"title\":\"useNodesData()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes-data.mdx\",\"timestamp\":1742370652000},\"title\":\"useNodesData()\"},{\"name\":\"use-nodes-initialized\",\"route\":\"/api-reference/hooks/use-nodes-initialized\",\"frontMatter\":{\"description\":\"The useNodesInitialized hook can be used to check if all nodes are initialized.\",\"title\":\"useNodesInitialized()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes-initialized.mdx\",\"timestamp\":1742370652000},\"title\":\"useNodesInitialized()\"},{\"name\":\"use-store\",\"route\":\"/api-reference/hooks/use-store\",\"frontMatter\":{\"description\":\"The useStore hook can be used to access the internal store of the Svelte Flow.\",\"title\":\"useStore()\",\"filePath\":\"src/content/api-reference/hooks/use-store.mdx\",\"timestamp\":1742370652000},\"title\":\"useStore()\"},{\"name\":\"use-svelte-flow\",\"route\":\"/api-reference/hooks/use-svelte-flow\",\"frontMatter\":{\"description\":\"The useSvelteFlow hook returns functions to update the viewport, transform coordinates or get node intersections for example.\",\"title\":\"useSvelteFlow()\",\"filePath\":\"src/content/api-reference/hooks/use-svelte-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"useSvelteFlow()\"},{\"name\":\"use-update-node-internals\",\"route\":\"/api-reference/hooks/use-update-node-internals\",\"frontMatter\":{\"description\":\"When you programmatically add or remove handles to a node or update a node's handle position, you need to inform Svelte Flow about it by using this hook. This will update the internal dimensions of the node and properly reposition handles on the canvas if necessary.\",\"title\":\"useUpdateNodeInternals()\",\"filePath\":\"src/content/api-reference/hooks/use-update-node-internals.mdx\",\"timestamp\":1742370652000},\"title\":\"useUpdateNodeInternals()\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Hooks\",\"filePath\":\"src/content/api-reference/hooks/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Hooks\"},{\"name\":\"types\",\"route\":\"/api-reference/types\",\"children\":[{\"name\":\"background-variant\",\"route\":\"/api-reference/types/background-variant\",\"frontMatter\":{\"description\":\"The three variants are exported as an enum for convenience. You can either import the enum and use it like BackgroundVariant.Lines or you can use the raw string value directly.\",\"title\":\"BackgroundVariant\",\"filePath\":\"src/content/api-reference/types/background-variant.mdx\",\"timestamp\":1742370652000},\"title\":\"BackgroundVariant\"},{\"name\":\"color-mode\",\"route\":\"/api-reference/types/color-mode\",\"frontMatter\":{\"description\":\"The color mode type specifies if the current color mode is light, dark or uses system.\",\"title\":\"ColorMode\",\"filePath\":\"src/content/api-reference/types/color-mode.mdx\",\"timestamp\":1742370652000},\"title\":\"ColorMode\"},{\"name\":\"connection\",\"route\":\"/api-reference/types/connection\",\"frontMatter\":{\"description\":\"The Connection type is the basic minimal description of an Edge between two nodes.\",\"title\":\"Connection\",\"filePath\":\"src/content/api-reference/types/connection.mdx\",\"timestamp\":1742370652000},\"title\":\"Connection\"},{\"name\":\"connection-line-type\",\"route\":\"/api-reference/types/connection-line-type\",\"frontMatter\":{\"description\":\"With the connectionLineType prop on your SvelteFlow component, you can configure the type of the connection line. Svelte Flow comes with built-in support for the following types; default (bezier), straight, step, smoothstep, and simplebezier.\",\"title\":\"ConnectionLineType\",\"filePath\":\"src/content/api-reference/types/connection-line-type.mdx\",\"timestamp\":1742370652000},\"title\":\"ConnectionLineType\"},{\"name\":\"coordinate-extent\",\"route\":\"/api-reference/types/coordinate-extent\",\"frontMatter\":{\"description\":\"A coordinate extent represents two points in a coordinate system; one in the top left corner and one in the bottom right corner. It is used to represent the bounds of nodes in the flow or the bounds of the viewport.\",\"title\":\"CoordinateExtent\",\"filePath\":\"src/content/api-reference/types/coordinate-extent.mdx\",\"timestamp\":1742370652000},\"title\":\"CoordinateExtent\"},{\"name\":\"default-edge-options\",\"route\":\"/api-reference/types/default-edge-options\",\"frontMatter\":{\"description\":\"Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the \u003cSvelteFlow /\u003e component.\",\"title\":\"DefaultEdgeOptions\",\"filePath\":\"src/content/api-reference/types/default-edge-options.mdx\",\"timestamp\":1742370652000},\"title\":\"DefaultEdgeOptions\"},{\"name\":\"edge\",\"route\":\"/api-reference/types/edge\",\"frontMatter\":{\"title\":\"Edge\",\"description\":\"An Edge is the complete description with everything Svelte Flow needs to know in order to render it.\",\"filePath\":\"src/content/api-reference/types/edge.mdx\",\"timestamp\":1742370652000},\"title\":\"Edge\"},{\"name\":\"edge-marker\",\"route\":\"/api-reference/types/edge-marker\",\"frontMatter\":{\"description\":\"You can customize the built-in edge markers with the edgeMarker prop.\",\"title\":\"EdgeMarker\",\"filePath\":\"src/content/api-reference/types/edge-marker.mdx\",\"timestamp\":1742370652000},\"title\":\"EdgeMarker\"},{\"name\":\"edge-props\",\"route\":\"/api-reference/types/edge-props\",\"frontMatter\":{\"description\":\"When you implement a custom edge it is wrapped in a component that enables some basic functionality.\",\"title\":\"EdgeProps\",\"filePath\":\"src/content/api-reference/types/edge-props.mdx\",\"timestamp\":1742370652000},\"title\":\"EdgeProps\"},{\"name\":\"fit-view-options\",\"route\":\"/api-reference/types/fit-view-options\",\"frontMatter\":{\"description\":\"When calling fitView these options can be used to customize the behavior. For example, the duration option can be used to transform the viewport smoothly over a given amount of time.\",\"title\":\"FitViewOptions\",\"filePath\":\"src/content/api-reference/types/fit-view-options.mdx\",\"timestamp\":1742370652000},\"title\":\"FitViewOptions\"},{\"name\":\"internal-node\",\"route\":\"/api-reference/types/internal-node\",\"frontMatter\":{\"title\":\"InternalNode\",\"description\":\"The internal node is an extension of the user nod. It is used internally and has some more information that is not exposed to the user directly, like `positionAbsolute` and `handleBounds`.\",\"filePath\":\"src/content/api-reference/types/internal-node.mdx\",\"timestamp\":1742370652000},\"title\":\"InternalNode\"},{\"name\":\"key-definition\",\"route\":\"/api-reference/types/key-definition\",\"frontMatter\":{\"description\":\"A key definition is a string or an object that describes a key and a modifier.\",\"title\":\"KeyDefinition\",\"filePath\":\"src/content/api-reference/types/key-definition.mdx\",\"timestamp\":1742370652000},\"title\":\"KeyDefinition\"},{\"name\":\"marker-type\",\"route\":\"/api-reference/types/marker-type\",\"frontMatter\":{\"title\":\"MarkerType\",\"filePath\":\"src/content/api-reference/types/marker-type.mdx\",\"timestamp\":1742370652000},\"title\":\"MarkerType\"},{\"name\":\"node\",\"route\":\"/api-reference/types/node\",\"frontMatter\":{\"title\":\"Node\",\"description\":\"The Node type represents everything Svelte Flow needs to know about a given node. Many of these properties can be manipulated both by Svelte Flow or by you, but some such as width and height should be considered read-only.\",\"filePath\":\"src/content/api-reference/types/node.mdx\",\"timestamp\":1742370652000},\"title\":\"Node\"},{\"name\":\"node-connection\",\"route\":\"/api-reference/types/node-connection\",\"frontMatter\":{\"description\":\"The NodeConnection type is a Connection that includes the edgeId.\",\"title\":\"NodeConnection\",\"filePath\":\"src/content/api-reference/types/node-connection.mdx\",\"timestamp\":1742370652000},\"title\":\"NodeConnection\"},{\"name\":\"node-origin\",\"route\":\"/api-reference/types/node-origin\",\"frontMatter\":{\"description\":\"The origin of a Node determines how it is placed relative to its own coordinates.\",\"title\":\"NodeOrigin\",\"filePath\":\"src/content/api-reference/types/node-origin.mdx\",\"timestamp\":1742370652000},\"title\":\"NodeOrigin\"},{\"name\":\"node-props\",\"route\":\"/api-reference/types/node-props\",\"frontMatter\":{\"description\":\"When you implement a custom node it is wrapped in a component that enables basic functionality like drag, select and remove. A custom node gets the following props.\",\"title\":\"NodeProps\",\"filePath\":\"src/content/api-reference/types/node-props.mdx\",\"timestamp\":1742370652000},\"title\":\"NodeProps\"},{\"name\":\"panel-position\",\"route\":\"/api-reference/types/panel-position\",\"frontMatter\":{\"description\":\"This type is mostly used to help position things on top of the flow viewport. For example both the MiniMap and Controls components take a position prop of this type.\",\"title\":\"PanelPosition\",\"filePath\":\"src/content/api-reference/types/panel-position.mdx\",\"timestamp\":1742370652000},\"title\":\"PanelPosition\"},{\"name\":\"position\",\"route\":\"/api-reference/types/position\",\"frontMatter\":{\"description\":\"While PanelPosition can be used to place a component in the corners of a container, the Position enum is less precise and used primarily in relation to edges and handles.\",\"title\":\"Position\",\"filePath\":\"src/content/api-reference/types/position.mdx\",\"timestamp\":1742370652000},\"title\":\"Position\"},{\"name\":\"svelte-flow-store\",\"route\":\"/api-reference/types/svelte-flow-store\",\"frontMatter\":{\"description\":\"The internal data structure of the Svelte Flow store.\",\"title\":\"SvelteFlowStore\",\"filePath\":\"src/content/api-reference/types/svelte-flow-store.mdx\",\"timestamp\":1742370652000},\"title\":\"SvelteFlowStore\"},{\"name\":\"viewport\",\"route\":\"/api-reference/types/viewport\",\"frontMatter\":{\"description\":\"The Viewport type tells you where in the coordinate system your flow is currently being display at and how zoomed in or out it is.\",\"title\":\"Viewport\",\"filePath\":\"src/content/api-reference/types/viewport.mdx\",\"timestamp\":1742370652000},\"title\":\"Viewport\"},{\"name\":\"xy-position\",\"route\":\"/api-reference/types/xy-position\",\"frontMatter\":{\"description\":\"All positions are stored in an object with x and y coordinates.\",\"title\":\"XYPosition\",\"filePath\":\"src/content/api-reference/types/xy-position.mdx\",\"timestamp\":1742370652000},\"title\":\"XYPosition\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Types\",\"filePath\":\"src/content/api-reference/types/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Types\"},{\"name\":\"utils\",\"route\":\"/api-reference/utils\",\"children\":[{\"name\":\"add-edge\",\"route\":\"/api-reference/utils/add-edge\",\"frontMatter\":{\"description\":\"This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.\",\"title\":\"addEdge()\",\"filePath\":\"src/content/api-reference/utils/add-edge.mdx\",\"timestamp\":1742370652000},\"title\":\"addEdge()\"},{\"name\":\"get-bezier-path\",\"route\":\"/api-reference/utils/get-bezier-path\",\"frontMatter\":{\"description\":\"The getBezierPath util returns everything you need to render a bezier edge between two nodes.\",\"title\":\"getBezierPath()\",\"filePath\":\"src/content/api-reference/utils/get-bezier-path.mdx\",\"timestamp\":1742370652000},\"title\":\"getBezierPath()\"},{\"name\":\"get-connected-edges\",\"route\":\"/api-reference/utils/get-connected-edges\",\"frontMatter\":{\"description\":\"Given an array of nodes that may be connected to one another and an array of all your edges, this util gives you an array of edges that connect any of the given nodes together.\",\"title\":\"getConnectedEdges()\",\"filePath\":\"src/content/api-reference/utils/get-connected-edges.mdx\",\"timestamp\":1742370652000},\"title\":\"getConnectedEdges()\"},{\"name\":\"get-incomers\",\"route\":\"/api-reference/utils/get-incomers\",\"frontMatter\":{\"description\":\"This util is used to tell you what nodes, if any, are connected to the given node as the source of an edge.\",\"title\":\"getIncomers()\",\"filePath\":\"src/content/api-reference/utils/get-incomers.mdx\",\"timestamp\":1742370652000},\"title\":\"getIncomers()\"},{\"name\":\"get-nodes-bounds\",\"route\":\"/api-reference/utils/get-nodes-bounds\",\"frontMatter\":{\"description\":\"Returns the bounding box that contains all the given nodes in an array. This can be useful when combined with getTransformForBounds to calculate the correct transform to fit the given nodes in a viewport.\",\"title\":\"getNodesBounds()\",\"filePath\":\"src/content/api-reference/utils/get-nodes-bounds.mdx\",\"timestamp\":1742370652000},\"title\":\"getNodesBounds()\"},{\"name\":\"get-outgoers\",\"route\":\"/api-reference/utils/get-outgoers\",\"frontMatter\":{\"description\":\"This util is used to tell you what nodes, if any, are connected to the given node as the target of an edge.\",\"title\":\"getOutgoers()\",\"filePath\":\"src/content/api-reference/utils/get-outgoers.mdx\",\"timestamp\":1742370652000},\"title\":\"getOutgoers()\"},{\"name\":\"get-simple-bezier-path\",\"route\":\"/api-reference/utils/get-simple-bezier-path\",\"frontMatter\":{\"description\":\"The getSimpleBezierPath util returns everything you need to render a simple bezier edge between two nodes.\",\"title\":\"getSimpleBezierPath()\",\"filePath\":\"src/content/api-reference/utils/get-simple-bezier-path.mdx\",\"timestamp\":1742370652000},\"title\":\"getSimpleBezierPath()\"},{\"name\":\"get-smooth-step-path\",\"route\":\"/api-reference/utils/get-smooth-step-path\",\"frontMatter\":{\"description\":\"The getSmoothStepPath util returns everything you need to render a stepped path between two nodes. The borderRadius property can be used to choose how rounded the corners of those steps are.\",\"title\":\"getSmoothStepPath()\",\"filePath\":\"src/content/api-reference/utils/get-smooth-step-path.mdx\",\"timestamp\":1742370652000},\"title\":\"getSmoothStepPath()\"},{\"name\":\"get-straight-path\",\"route\":\"/api-reference/utils/get-straight-path\",\"frontMatter\":{\"description\":\"Calculates the straight line path between two points.\",\"title\":\"getStraightPath()\",\"filePath\":\"src/content/api-reference/utils/get-straight-path.mdx\",\"timestamp\":1742370652000},\"title\":\"getStraightPath()\"},{\"name\":\"get-viewport-for-bounds\",\"route\":\"/api-reference/utils/get-viewport-for-bounds\",\"frontMatter\":{\"description\":\"This util returns the viewport for the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds _without_ changing the viewport directly.\",\"title\":\"getViewportForBounds()\",\"filePath\":\"src/content/api-reference/utils/get-viewport-for-bounds.mdx\",\"timestamp\":1742370652000},\"title\":\"getViewportForBounds()\"},{\"name\":\"is-edge\",\"route\":\"/api-reference/utils/is-edge\",\"frontMatter\":{\"description\":\"Test whether an object is useable as an Edge. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true.\",\"title\":\"isEdge()\",\"filePath\":\"src/content/api-reference/utils/is-edge.mdx\",\"timestamp\":1742370652000},\"title\":\"isEdge()\"},{\"name\":\"is-node\",\"route\":\"/api-reference/utils/is-node\",\"frontMatter\":{\"description\":\"Test whether an object is useable as an Node. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true.\",\"title\":\"isNode()\",\"filePath\":\"src/content/api-reference/utils/is-node.mdx\",\"timestamp\":1742370652000},\"title\":\"isNode()\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Utils\",\"filePath\":\"src/content/api-reference/utils/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Utils\"}],\"title\":\"Reference\"},{\"name\":\"examples\",\"route\":\"/examples\",\"children\":[{\"data\":{\"index\":{\"theme\":{\"breadcrumb\":false}},\"overview\":{\"title\":\"\"},\"nodes\":{},\"edges\":{\"title\":\"Edges\"},\"layout\":{\"title\":\"Layout\"},\"interaction\":{\"title\":\"Interaction\"},\"styling\":{\"title\":\"Styling\"},\"misc\":{\"title\":\"Misc\"}}},{\"name\":\"index\",\"route\":\"/examples\",\"frontMatter\":{\"title\":\"Examples\",\"description\":\"Overview of React Flow examples for practical copy-paste solutions to common use cases.\",\"filePath\":\"src/content/examples/index.mdx\",\"timestamp\":1742370652000},\"title\":\"Examples\"},{\"name\":\"overview\",\"route\":\"/examples/overview\",\"frontMatter\":{\"title\":\"Feature Overview\",\"description\":\"An feature overview example showing the most used features of Svelte Flow - controls, MiniMap, node types, edge types, edge labels, and custom styling.\",\"filePath\":\"src/content/examples/overview.mdx\",\"timestamp\":1742370652000},\"title\":\"Feature Overview\"},{\"name\":\"nodes\",\"route\":\"/examples/nodes\",\"children\":[{\"data\":{\"custom-node\":{\"title\":\"\"},\"update-node\":{\"title\":\"\"},\"stress\":{\"title\":\"\"},\"drag-handle\":{\"title\":\"\"},\"add-node-on-edge-drop\":{\"title\":\"\"},\"proximity-connect\":{\"title\":\"\"},\"node-resizer\":{\"title\":\"\"},\"easy-connect\":{\"title\":\"\"},\"connection-limit\":{\"title\":\"\"},\"intersections\":{\"title\":\"\"}}},{\"name\":\"custom-node\",\"route\":\"/examples/nodes/custom-node\",\"frontMatter\":{\"title\":\"Custom Nodes\",\"description\":\"This is an example of a custom node implementation. Svelte Flow nodes are Svelte components, and you can display any content that you want.\",\"filePath\":\"src/content/examples/nodes/custom-node.mdx\",\"timestamp\":1742370652000},\"title\":\"Custom Nodes\"},{\"name\":\"update-node\",\"route\":\"/examples/nodes/update-node\",\"frontMatter\":{\"title\":\"Updating Nodes\",\"description\":\"This example shows how to update the data field of a specific node.\",\"filePath\":\"src/content/examples/nodes/update-node.mdx\",\"timestamp\":1742370652000},\"title\":\"Updating Nodes\"},{\"name\":\"stress\",\"route\":\"/examples/nodes/stress\",\"frontMatter\":{\"title\":\"Stress Test\",\"description\":\"A stress test with a lot of nodes and edges.\",\"filePath\":\"src/content/examples/nodes/stress.mdx\",\"timestamp\":1742370652000},\"title\":\"Stress Test\"},{\"name\":\"drag-handle\",\"route\":\"/examples/nodes/drag-handle\",\"frontMatter\":{\"title\":\"Drag Handle\",\"filePath\":\"src/content/examples/nodes/drag-handle.mdx\",\"timestamp\":1742370652000},\"title\":\"Drag Handle\"},{\"name\":\"add-node-on-edge-drop\",\"route\":\"/examples/nodes/add-node-on-edge-drop\",\"frontMatter\":{\"title\":\"Add Node On Edge Drop\",\"filePath\":\"src/content/examples/nodes/add-node-on-edge-drop.mdx\",\"timestamp\":1742370652000},\"title\":\"Add Node On Edge Drop\"},{\"name\":\"proximity-connect\",\"route\":\"/examples/nodes/proximity-connect\",\"frontMatter\":{\"title\":\"Proximity Connect\",\"description\":\"Example showing how to automatically create edges when nodes get close to each other\",\"filePath\":\"src/content/examples/nodes/proximity-connect.mdx\",\"timestamp\":1742370652000},\"title\":\"Proximity Connect\"},{\"name\":\"node-resizer\",\"route\":\"/examples/nodes/node-resizer\",\"frontMatter\":{\"title\":\"Node Resizer\",\"created_at\":\"2024-01-11\",\"filePath\":\"src/content/examples/nodes/node-resizer.mdx\",\"timestamp\":1742370652000},\"title\":\"Node Resizer\"},{\"name\":\"easy-connect\",\"route\":\"/examples/nodes/easy-connect\",\"frontMatter\":{\"title\":\"Easy Connect\",\"filePath\":\"src/content/examples/nodes/easy-connect.mdx\",\"timestamp\":1742370652000},\"title\":\"Easy Connect\"},{\"name\":\"connection-limit\",\"route\":\"/examples/nodes/connection-limit\",\"frontMatter\":{\"title\":\"Connection Limit\",\"description\":\"This is an example of a custom node limiting the amount of connections a handle can have using the `isConnectable` prop.\",\"filePath\":\"src/content/examples/nodes/connection-limit.mdx\",\"timestamp\":1742370652000},\"title\":\"Connection Limit\"},{\"name\":\"intersections\",\"route\":\"/examples/nodes/intersections\",\"frontMatter\":{\"title\":\"Intersections\",\"filePath\":\"src/content/examples/nodes/intersections.mdx\",\"timestamp\":1742370652000},\"title\":\"Intersections\"}],\"title\":\"Nodes\"},{\"name\":\"edges\",\"route\":\"/examples/edges\",\"children\":[{\"name\":\"custom-connectionline\",\"route\":\"/examples/edges/custom-connectionline\",\"frontMatter\":{\"title\":\"Connection Line\",\"filePath\":\"src/content/examples/edges/custom-connectionline.mdx\",\"timestamp\":1742370652000},\"title\":\"Connection Line\"},{\"name\":\"custom-edges\",\"route\":\"/examples/edges/custom-edges\",\"frontMatter\":{\"title\":\"Custom Edges\",\"description\":\"Svelte Flow has four edge types- bezier, straight, step and smoothstep. It’s also possible to create a custom edge, if you need a special edge routing or controls at the edge.\",\"filePath\":\"src/content/examples/edges/custom-edges.mdx\",\"timestamp\":1742370652000},\"title\":\"Custom Edges\"},{\"name\":\"edge-label-renderer\",\"route\":\"/examples/edges/edge-label-renderer\",\"frontMatter\":{\"title\":\"Edge Label Renderer\",\"description\":\"The EdgeLabelRenderer component can be used to render labels\",\"filePath\":\"src/content/examples/edges/edge-label-renderer.mdx\",\"timestamp\":1742370652000},\"title\":\"Edge Label Renderer\"},{\"name\":\"edge-markers\",\"route\":\"/examples/edges/edge-markers\",\"frontMatter\":{\"title\":\"Edge Markers\",\"description\":\"Example for demonstrating edge markers in Svelte Flow.\",\"filePath\":\"src/content/examples/edges/edge-markers.mdx\",\"timestamp\":1742370652000},\"title\":\"Edge Markers\"},{\"name\":\"edge-types\",\"route\":\"/examples/edges/edge-types\",\"frontMatter\":{\"title\":\"Edge Types\",\"description\":\"example showing different kinds of edge types in svelte flow\",\"filePath\":\"src/content/examples/edges/edge-types.mdx\",\"timestamp\":1742370652000},\"title\":\"Edge Types\"},{\"name\":\"simple-floating-edges\",\"route\":\"/examples/edges/simple-floating-edges\",\"frontMatter\":{\"title\":\"Simple Floating Edges\",\"filePath\":\"src/content/examples/edges/simple-floating-edges.mdx\",\"timestamp\":1742370652000},\"title\":\"Simple Floating Edges\"}],\"title\":\"Edges\"},{\"name\":\"layout\",\"route\":\"/examples/layout\",\"children\":[{\"name\":\"dagre\",\"route\":\"/examples/layout/dagre\",\"frontMatter\":{\"sidebarTitle\":\"Dagre\",\"title\":\"Dagre Tree\",\"description\":\"You can integrate dagre.js with Svelte Flow to create tree layouts. A good alternative to dagre is elkjs if you are looking for a more advanced layouting library.\",\"filePath\":\"src/content/examples/layout/dagre.mdx\",\"timestamp\":1742370652000},\"title\":\"Dagre\"},{\"name\":\"elkjs\",\"route\":\"/examples/layout/elkjs\",\"frontMatter\":{\"sidebarTitle\":\"Elkjs\",\"title\":\"Elkjs Tree\",\"description\":\"If you're looking for a more powerful alternative to dagre, you can also use elkjs to layout your Svelte Flow graphs.\",\"filePath\":\"src/content/examples/layout/elkjs.mdx\",\"timestamp\":1742370652000},\"title\":\"Elkjs\"},{\"name\":\"horizontal-flow\",\"route\":\"/examples/layout/horizontal-flow\",\"frontMatter\":{\"title\":\"Horizontal Flow\",\"filePath\":\"src/content/examples/layout/horizontal-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"Horizontal Flow\"},{\"name\":\"subflows\",\"route\":\"/examples/layout/subflows\",\"frontMatter\":{\"title\":\"Subflows\",\"description\":\"You can create nested flows - known as subflows - with Svelte Flow. Here you can see how to implement them.\",\"filePath\":\"src/content/examples/layout/subflows.mdx\",\"timestamp\":1742370652000},\"title\":\"Subflows\"}],\"title\":\"Layout\"},{\"name\":\"interaction\",\"route\":\"/examples/interaction\",\"children\":[{\"name\":\"computing-flows\",\"route\":\"/examples/interaction/computing-flows\",\"frontMatter\":{\"title\":\"Computing Flows\",\"description\":\"This example combines some hooks and helper functions for computing the data flow between nodes.\",\"filePath\":\"src/content/examples/interaction/computing-flows.mdx\",\"timestamp\":1742370652000},\"title\":\"Computing Flows\"},{\"name\":\"context-menu\",\"route\":\"/examples/interaction/context-menu\",\"frontMatter\":{\"title\":\"Context Menu\",\"filePath\":\"src/content/examples/interaction/context-menu.mdx\",\"timestamp\":1742370652000},\"title\":\"Context Menu\"},{\"name\":\"contextual-zoom\",\"route\":\"/examples/interaction/contextual-zoom\",\"frontMatter\":{\"title\":\"Contextual Zoom\",\"filePath\":\"src/content/examples/interaction/contextual-zoom.mdx\",\"timestamp\":1742370652000},\"title\":\"Contextual Zoom\"},{\"name\":\"drag-and-drop\",\"route\":\"/examples/interaction/drag-and-drop\",\"frontMatter\":{\"title\":\"Drag and Drop\",\"description\":\"This example shows how to implement a sidebar with a drag and drop functionality.\",\"filePath\":\"src/content/examples/interaction/drag-and-drop.mdx\",\"timestamp\":1742370652000},\"title\":\"Drag and Drop\"},{\"name\":\"validation\",\"route\":\"/examples/interaction/validation\",\"frontMatter\":{\"title\":\"Validation\",\"description\":\"This example explains how to validate new connections between nodes.\",\"filePath\":\"src/content/examples/interaction/validation.mdx\",\"timestamp\":1742370652000},\"title\":\"Validation\"}],\"title\":\"Interaction\"},{\"name\":\"styling\",\"route\":\"/examples/styling\",\"children\":[{\"name\":\"base-style\",\"route\":\"/examples/styling/base-style\",\"frontMatter\":{\"title\":\"Base Style\",\"description\":\"Svelte Flow comes with a default style and a base style. This example shows how the base style looks.\",\"filePath\":\"src/content/examples/styling/base-style.mdx\",\"timestamp\":1742370652000},\"title\":\"Base Style\"},{\"name\":\"dark-mode\",\"route\":\"/examples/styling/dark-mode\",\"frontMatter\":{\"title\":\"Dark Mode\",\"description\":\"Svelte Flow comes with a default style and a base style. This example shows how the base style looks.\",\"filePath\":\"src/content/examples/styling/dark-mode.mdx\",\"timestamp\":1742370652000},\"title\":\"Dark Mode\"},{\"name\":\"tailwind\",\"route\":\"/examples/styling/tailwind\",\"frontMatter\":{\"title\":\"Tailwind\",\"description\":\"In this example we demonstrate how to use tailwind for styling a flow.\",\"filePath\":\"src/content/examples/styling/tailwind.mdx\",\"timestamp\":1742370652000},\"title\":\"Tailwind\"},{\"name\":\"turbo-flow\",\"route\":\"/examples/styling/turbo-flow\",\"frontMatter\":{\"title\":\"Turbo Flow\",\"description\":\"This example showcases how you can recreate the style that is used in the turbo docs.\",\"filePath\":\"src/content/examples/styling/turbo-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"Turbo Flow\"}],\"title\":\"Styling\"},{\"name\":\"misc\",\"route\":\"/examples/misc\",\"children\":[{\"name\":\"download-image\",\"route\":\"/examples/misc/download-image\",\"frontMatter\":{\"title\":\"Download Image\",\"filePath\":\"src/content/examples/misc/download-image.mdx\",\"timestamp\":1742370652000},\"title\":\"Download Image\"},{\"name\":\"threlte-flow\",\"route\":\"/examples/misc/threlte-flow\",\"frontMatter\":{\"title\":\"Threlte Flow\",\"description\":\"This example shows how you can use Svelte Flow in combination with Threlte to create a flow that controls a 3D scene.\",\"filePath\":\"src/content/examples/misc/threlte-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"Threlte Flow\"},{\"name\":\"use-svelte-flow\",\"route\":\"/examples/misc/use-svelte-flow\",\"frontMatter\":{\"title\":\"useSvelteFlow\",\"description\":\"The useSvelteFlow hook gives you access to the Svelte Flow store and provides some functions for updating the viewport.\",\"filePath\":\"src/content/examples/misc/use-svelte-flow.mdx\",\"timestamp\":1742370652000},\"title\":\"useSvelteFlow\"}],\"title\":\"Misc\"}],\"title\":\"Examples\"},{\"name\":\"showcase\",\"route\":\"/showcase\",\"frontMatter\":{\"title\":\"Showcase\",\"description\":\"Projects and examples using Svelte Flow\"},\"title\":\"Showcase\"},{\"name\":\"more\",\"type\":\"menu\",\"items\":\"$f:props:children:props:children:2:props:pageMap:0:data:more:items\",\"title\":\"More\"},{\"name\":\"index\",\"route\":\"/\",\"frontMatter\":{\"title\":\"The Node-Based UI for Svelte\",\"description\":\"A customizable Svelte component for building node-based editors and interactive diagrams\"},\"title\":\"The Node-Based UI for Svelte\"},{\"name\":\"support-us\",\"route\":\"/support-us\",\"frontMatter\":{\"title\":\"Support Svelte Flow\",\"description\":\"There are many ways you can support Svelte Flow.\"},\"title\":\"Support Svelte Flow\"},{\"name\":\"whats-new\",\"route\":\"/whats-new\",\"children\":[{\"name\":\"2023-11-13\",\"route\":\"/whats-new/2023-11-13\",\"frontMatter\":{\"title\":\"Alpha changes and a new release 0.0.27\",\"description\":\"Svelte Flow is still alpha and you should expect breaking changes. Even if we try to avoid them, they will happen.\",\"authors\":[\"moritz\"],\"date\":\"2023-11-13\",\"filePath\":\"src/content/whats-new/2023-11-13.mdx\",\"timestamp\":1742370652000},\"title\":\"Alpha changes and a new release 0.0.27\"},{\"name\":\"2023-11-23\",\"route\":\"/whats-new/2023-11-23\",\"frontMatter\":{\"title\":\"New release 0.0.28\",\"description\":\"Another release with new features and some breaking changes.\",\"authors\":[\"moritz\"],\"date\":\"2023-11-23\",\"filePath\":\"src/content/whats-new/2023-11-23.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.28\"},{\"name\":\"2023-12-13\",\"route\":\"/whats-new/2023-12-13\",\"frontMatter\":{\"title\":\"New release 0.0.29\",\"description\":\"The best Svelte Flow version so far\",\"authors\":[\"moritz\"],\"date\":\"2023-12-13\",\"filePath\":\"src/content/whats-new/2023-12-13.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.29\"},{\"name\":\"2024-01-10\",\"route\":\"/whats-new/2024-01-10\",\"frontMatter\":{\"title\":\"NodeResizer - 0.0.32 release\",\"description\":\"Svelte Flow now has a NodeResizer component.\",\"authors\":[\"moritz\"],\"date\":\"2024-01-10\",\"filePath\":\"src/content/whats-new/2024-01-10.mdx\",\"timestamp\":1742370652000},\"title\":\"NodeResizer - 0.0.32 release\"},{\"name\":\"2024-01-11\",\"route\":\"/whats-new/2024-01-11\",\"frontMatter\":{\"title\":\"New release 0.0.33\",\"description\":\"A new release 0.0.33 is out!\",\"authors\":[\"moritz\"],\"date\":\"2024-01-11\",\"filePath\":\"src/content/whats-new/2024-01-11.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.33\"},{\"name\":\"2024-01-17\",\"route\":\"/whats-new/2024-01-17\",\"frontMatter\":{\"title\":\"New release 0.0.34\",\"description\":\"A new release 0.0.34 is out!\",\"authors\":[\"moritz\"],\"date\":\"2024-01-17\",\"filePath\":\"src/content/whats-new/2024-01-17.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.34\"},{\"name\":\"2024-01-28\",\"route\":\"/whats-new/2024-01-28\",\"frontMatter\":{\"title\":\"New release 0.0.35\",\"description\":\"A new release 0.0.35 is out!\",\"authors\":[\"moritz\"],\"date\":\"2024-01-28\",\"filePath\":\"src/content/whats-new/2024-01-28.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.35\"},{\"name\":\"2024-02-20\",\"route\":\"/whats-new/2024-02-20\",\"frontMatter\":{\"title\":\"New release 0.0.36\",\"description\":\"Svelte Flow 0.0.36 release notes\",\"authors\":[\"moritz\"],\"date\":\"2024-02-20\",\"filePath\":\"src/content/whats-new/2024-02-20.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.36\"},{\"name\":\"2024-03-01\",\"route\":\"/whats-new/2024-03-01\",\"frontMatter\":{\"title\":\"New release 0.0.37\",\"description\":\"Svelte Flow 0.0.37 release notes\",\"authors\":[\"moritz\"],\"date\":\"2024-03-01\",\"filePath\":\"src/content/whats-new/2024-03-01.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.37\"},{\"name\":\"2024-03-07\",\"route\":\"/whats-new/2024-03-07\",\"frontMatter\":{\"title\":\"New release 0.0.38\",\"description\":\"Svelte Flow 0.0.38 is here!\",\"authors\":[\"moritz\"],\"date\":\"2024-03-07\",\"filePath\":\"src/content/whats-new/2024-03-07.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.38\"},{\"name\":\"2024-03-16\",\"route\":\"/whats-new/2024-03-16\",\"frontMatter\":{\"title\":\"New release 0.0.39\",\"description\":\"Svelte Flow 0.0.39 is here!\",\"authors\":[\"moritz\"],\"date\":\"2024-03-16\",\"filePath\":\"src/content/whats-new/2024-03-16.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.39\"},{\"name\":\"2024-04-04\",\"route\":\"/whats-new/2024-04-04\",\"frontMatter\":{\"title\":\"New release 0.0.40\",\"description\":\"Svelte Flow 0.0.40 release notes\",\"authors\":[\"moritz\"],\"date\":\"2024-04-04\",\"filePath\":\"src/content/whats-new/2024-04-04.mdx\",\"timestamp\":1742370652000},\"title\":\"New release 0.0.40\"},{\"name\":\"2024-04-05\",\"route\":\"/whats-new/2024-04-05\",\"frontMatter\":{\"title\":\"Future of Svelte Flow\",\"description\":\"Roadmap for Svelte Flow.\",\"authors\":[\"peter\"],\"date\":\"2024-04-09T13:00:00\",\"filePath\":\"src/content/whats-new/2024-04-05.mdx\",\"timestamp\":1742370652000},\"title\":\"Future of Svelte Flow\"},{\"name\":\"2024-05-06\",\"route\":\"/whats-new/2024-05-06\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.0\",\"description\":\"A big update for Svelte Flow\",\"authors\":[\"moritz\"],\"date\":\"2024-05-06T13:00:00\",\"filePath\":\"src/content/whats-new/2024-05-06.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.0\"},{\"name\":\"2024-06-10\",\"route\":\"/whats-new/2024-06-10\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.5 \u0026 0.1.4\",\"description\":\"Update for Svelte Flow\",\"authors\":[\"peter\"],\"date\":\"2024-06-10\",\"filePath\":\"src/content/whats-new/2024-06-10.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.5 \u0026 0.1.4\"},{\"name\":\"2024-09-12\",\"route\":\"/whats-new/2024-09-12\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.19\",\"description\":\"Changelog for Svelte Flow version 0.1.19\",\"authors\":[\"xyflow\"],\"date\":\"2024-09-12\",\"filePath\":\"src/content/whats-new/2024-09-12.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.19\"},{\"name\":\"2024-09-26\",\"route\":\"/whats-new/2024-09-26\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.20\",\"description\":\"Changelog for Svelte Flow version 0.1.20\",\"authors\":[\"xyflow\"],\"date\":\"2024-09-26T10:50:00\",\"filePath\":\"src/content/whats-new/2024-09-26.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.20\"},{\"name\":\"2024-10-10\",\"route\":\"/whats-new/2024-10-10\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.21\",\"description\":\"Changelog for Svelte Flow version 0.1.21\",\"authors\":[\"xyflow\"],\"date\":\"2024-10-10\",\"filePath\":\"src/content/whats-new/2024-10-10.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.21\"},{\"name\":\"2024-10-30\",\"route\":\"/whats-new/2024-10-30\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.22\",\"description\":\"Changelog for Svelte Flow version 0.1.22\",\"authors\":[\"xyflow\"],\"date\":\"2024-10-30\",\"filePath\":\"src/content/whats-new/2024-10-30.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.22\"},{\"name\":\"2024-11-11\",\"route\":\"/whats-new/2024-11-11\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.24\",\"description\":\"Changelog for Svelte Flow version 0.1.24\",\"authors\":[\"xyflow\"],\"date\":\"2024-11-11\",\"filePath\":\"src/content/whats-new/2024-11-11.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.24\"},{\"name\":\"2024-12-09\",\"route\":\"/whats-new/2024-12-09\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.25\",\"description\":\"Changelog for Svelte Flow version 0.1.25\",\"authors\":[\"xyflow\"],\"date\":\"2024-12-09\",\"filePath\":\"src/content/whats-new/2024-12-09.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.25\"},{\"name\":\"2024-12-18\",\"route\":\"/whats-new/2024-12-18\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.26\",\"description\":\"Changelog for Svelte Flow version 0.1.26\",\"authors\":[\"xyflow\"],\"date\":\"2024-12-18\",\"filePath\":\"src/content/whats-new/2024-12-18.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.26\"},{\"name\":\"2025-01-15\",\"route\":\"/whats-new/2025-01-15\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.27\",\"description\":\"Changelog for Svelte Flow version 0.1.27\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-15\",\"filePath\":\"src/content/whats-new/2025-01-15.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.27\"},{\"name\":\"2025-01-16\",\"route\":\"/whats-new/2025-01-16\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.28\",\"description\":\"Changelog for Svelte Flow version 0.1.28\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-16\",\"filePath\":\"src/content/whats-new/2025-01-16.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.28\"},{\"name\":\"2025-01-21\",\"route\":\"/whats-new/2025-01-21\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.29\",\"description\":\"Changelog for Svelte Flow version 0.1.29\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-21\",\"filePath\":\"src/content/whats-new/2025-01-21.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.29\"},{\"name\":\"2025-02-12\",\"route\":\"/whats-new/2025-02-12\",\"frontMatter\":{\"title\":\"Svelte Flow 0.1.30\",\"description\":\"Changelog for Svelte Flow version 0.1.30\",\"authors\":[\"xyflow\"],\"date\":\"2025-02-12\",\"filePath\":\"src/content/whats-new/2025-02-12.mdx\",\"timestamp\":1742370652000},\"title\":\"Svelte Flow 0.1.30\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"What's new?\",\"description\":\"We're always working on the Svelte Flow docs and the library. This is a timeline of the things we've added or changed so far.\"},\"title\":\"What's new?\"},{\"name\":\"developer-survey-2024\",\"route\":\"/developer-survey-2024\",\"frontMatter\":{\"title\":\"Svelte flow Developer Survey 2024\"},\"title\":\"Svelte flow Developer Survey 2024\"}],\"navbar\":[\"$\",\"header\",null,{\"className\":\"nextra-navbar x:sticky x:top-0 x:z-30 x:w-full x:bg-transparent x:print:hidden x:max-md:[.nextra-banner:not([class$=hidden])~\u0026]:top-(--nextra-banner-height)\",\"children\":[[\"$\",\"div\",null,{\"className\":\"nextra-navbar-blur x:absolute x:-z-1 x:size-full nextra-border x:border-b x:backdrop-blur-md x:bg-nextra-bg/70\"}],[\"$\",\"nav\",null,{\"style\":{\"height\":\"var(--nextra-navbar-height)\"},\"className\":\"x:mx-auto x:flex x:max-w-(--nextra-content-width) x:items-center x:gap-4 x:pl-[max(env(safe-area-inset-left),1.5rem)] x:pr-[max(env(safe-area-inset-right),1.5rem)] x:justify-end\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:flex x:items-center x:max-md:me-auto\",\"children\":[\"$\",\"$L18\",null,{\"label\":\"Svelte Flow\"}]}],[\"$\",\"$L19\",null,{\"className\":\"x:me-auto\",\"children\":[\"$undefined\",\"$undefined\",[[\"$\",\"$L1a\",null,{}],[\"$\",\"a\",null,{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"https://github.com/xyflow/xyflow\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"nav-github-logo\",\"fill\":\"currentColor\",\"viewBox\":\"3 3 18 18\",\"width\":\"20\",\"children\":[[\"$\",\"title\",null,{\"children\":\"GitHub\"}],[\"$\",\"path\",null,{\"d\":\"$1b\"}]]}]}],[\"$\",\"a\",null,{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"https://discord.gg/RVmnytFmGW\",\"rel\":\"noreferrer\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"nav-github-logo\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 130 90\",\"width\":\"23\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Discord\"}],[\"$\",\"path\",null,{\"d\":\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"}]]}]}],[\"$\",\"$L1c\",null,{\"href\":\"/support-us\",\"children\":\"Support Us\",\"className\":\"items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6 hidden lg:block\",\"ref\":null}]]]}]]}]]}],\"footer\":[\"$\",\"footer\",null,{\"className\":\"print:bg-transparent py-12 lg:py-18 bg-black text-white\",\"ref\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto lg:flex x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:max-w-[300px] md:max-w-[600px] lg:mr-24 shrink-0\",\"children\":[[[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mb-2\",\"ref\":\"$undefined\",\"children\":\"A project by the xyflow team\"}],[\"$\",\"div\",null,{\"className\":\"font-black text-3xl tracking-tight leading-none mb-6 lg:mb-10\",\"children\":\"We are building and maintaining open source software for node-based UIs since 2019.\"}]],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"grow\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col grow h-[100%]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 lg:grid-cols-4 grid-gap-4\",\"children\":[[\"$\",\"div\",\"Docs\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Docs\"}],[[\"$\",\"$L1c\",\"/learn\",{\"href\":\"/learn\",\"className\":\"block\",\"children\":\"Quickstart Guide\"}],[\"$\",\"$L1c\",\"/api-reference\",{\"href\":\"/api-reference\",\"className\":\"block\",\"children\":\"API Reference\"}],[\"$\",\"$L1c\",\"/examples\",{\"href\":\"/examples\",\"className\":\"block\",\"children\":\"Examples\"}],[\"$\",\"$L1c\",\"/showcase\",{\"href\":\"/showcase\",\"className\":\"block\",\"children\":\"Showcase\"}],[\"$\",\"$L1c\",\"/support-us\",{\"href\":\"/support-us\",\"className\":\"block\",\"children\":\"Support Us\"}]]]}],[\"$\",\"div\",\"Social\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Social\"}],[[\"$\",\"$L1c\",\"https://discord.gg/RVmnytFmGW\",{\"href\":\"https://discord.gg/RVmnytFmGW\",\"className\":\"block\",\"children\":\"Discord\"}],[\"$\",\"$L1c\",\"https://github.com/xyflow\",{\"href\":\"https://github.com/xyflow\",\"className\":\"block\",\"children\":\"Github\"}],[\"$\",\"$L1c\",\"https://x.com/xyflowdev\",{\"href\":\"https://x.com/xyflowdev\",\"className\":\"block\",\"children\":\"X / Twitter\"}],[\"$\",\"$L1c\",\"https://bsky.app/profile/xyflow.com\",{\"href\":\"https://bsky.app/profile/xyflow.com\",\"className\":\"block\",\"children\":\"Bluesky\"}]]]}],[\"$\",\"div\",\"xyflow\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"xyflow\"}],[[\"$\",\"$L1c\",\"https://xyflow.com/blog\",{\"href\":\"https://xyflow.com/blog\",\"className\":\"block\",\"children\":\"Blog\"}],[\"$\",\"$L1c\",\"https://xyflow.com/open-source\",{\"href\":\"https://xyflow.com/open-source\",\"className\":\"block\",\"children\":\"Open Source\"}],[\"$\",\"$L1c\",\"https://xyflow.com/about\",{\"href\":\"https://xyflow.com/about\",\"className\":\"block\",\"children\":\"About\"}],[\"$\",\"$L1c\",\"https://xyflow.com/contact\",{\"href\":\"https://xyflow.com/contact\",\"className\":\"block\",\"children\":\"Contact\"}],[\"$\",\"$L1c\",\"https://xyflow.com/careers\",{\"href\":\"https://xyflow.com/careers\",\"className\":\"block\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1\",\"children\":[\"Careers\",\" \",[\"$\",\"span\",null,{\"className\":\"bg-primary-foreground text-primary rounded-full text-xs px-1 py-0.5\",\"children\":\"hiring\"}]]}]}]]]}],[\"$\",\"div\",\"Legal\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Legal\"}],[[\"$\",\"$L1c\",\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",\"className\":\"block\",\"children\":\"MIT License\"}],[\"$\",\"$L1c\",\"https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md\",\"className\":\"block\",\"children\":\"Code of Conduct\"}]]]}]]}],[\"$\",\"p\",null,{\"className\":\"text-light pt-6 text-sm mt-auto\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"a\",null,{\"href\":\"mailto:info@xyflow.com\",\"children\":\"info@xyflow.com\"}],\" — Copyright © \",2025,\" \",[\"$\",\"a\",null,{\"href\":\"https://webkid.io\",\"target\":\"_blank\",\"children\":\"webkid GmbH\"}],\". All rights reserved\",[\" \",\"— website design by\",\" \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"href\":\"https://facumontanaro.com/\",\"children\":\"Facu Montanaro\"}]]]}]]}]}]]}]}],\"children\":[[\"$\",\"$L1d\",null,{}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[],[\"$\",\"$L1e\",null,{}]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"12:[\"$\",\"div\",null,{\"className\":\"grid gap-2 x:text-xs x:font-medium\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://xyflow.com/contact\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus xy-link-gray\",\"children\":[\"Question? Give us feedback\",[\" \",[\"$\",\"svg\",null,{\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.7,\"viewBox\":\"0 0 24 24\",\"height\":\"1em\",\"className\":\"x:inline x:align-baseline x:shrink-0\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 17L17 7\"}],[\"$\",\"path\",null,{\"d\":\"M7 7h10v10\"}]]}]]]}],[\"$\",\"p\",null,{\"className\":\"font-bold mt-4\",\"children\":\"What's new?\"}],[[\"$\",\"$L1c\",\"/whats-new/2025-02-12\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-02-12\",\"children\":\"Svelte Flow 0.1.30\"}],[\"$\",\"$L1c\",\"/whats-new/2025-01-21\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-01-21\",\"children\":\"Svelte Flow 0.1.29\"}],[\"$\",\"$L1c\",\"/whats-new/2025-01-16\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-01-16\",\"children\":\"Svelte Flow 0.1.28\"}],[\"$\",\"$L1c\",\"/whats-new\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new\",\"children\":\"...and more!\"}]]]}]\n"])</script><script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"9:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"The Node-Based UI for Svelte - Svelte Flow\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"A customizable Svelte component for building node-based editors and interactive diagrams\"}],[\"$\",\"meta\",\"3\",{\"name\":\"application-name\",\"content\":\"Svelte Flow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"generator\",\"content\":\"Next.js\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"svelte,node-based UI,graph,diagram,workflow,svelte-flow,xyflow\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index,follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"docsearch:site\",\"content\":\"svelte\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://svelteflow.dev\"}],[\"$\",\"meta\",\"9\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"10\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Svelte Flow\"}],[\"$\",\"meta\",\"11\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"The Node-Based UI for Svelte - Svelte Flow\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"A customizable Svelte component for building node-based editors and interactive diagrams\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://svelteflow.dev\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:site_name\",\"content\":\"Svelte Flow\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:height\",\"content\":\"640\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image\",\"content\":\"https://svelteflow.dev/opengraph-image.jpg?5efa60eac9b47bcb\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:site\",\"content\":\"https://x.com/xyflowdev\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:creator\",\"content\":\"@xyflowdev\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:title\",\"content\":\"The Node-Based UI for Svelte - Svelte Flow\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:description\",\"content\":\"A customizable Svelte component for building node-based editors and interactive diagrams\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image:height\",\"content\":\"640\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:image\",\"content\":\"https://svelteflow.dev/opengraph-image.jpg?5efa60eac9b47bcb\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"256x256\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/icon.svg?6866c81275915474\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}],[\"$\",\"link\",\"33\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?153fbcdef0df2a3a\",\"type\":\"image/png\",\"sizes\":\"180x180\"}]]\n"])</script><script>self.__next_f.push([1,"7:null\n"])</script><script>self.__next_f.push([1,"1f:I[90809,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"default\"]\n20:I[68795,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Features\"]\n21:I[9084,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"ReactFlow\"]\n22:I[9084,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Background\"]\n23:I[9084,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\""])</script><script>self.__next_f.push([1,"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Controls\"]\n24:I[5404,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"default\"]\n25:I[93005,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"default\"]\n26:I[39208,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"default\"]\n27:I[27774,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"6796\",\"static/chunks/69debb3d-ff430e1d53429f24.js\",\"3218\",\"static/chunks/3218-a44a2af964e8a69c.js\",\"4913\",\"static/chunks/4913-b36520b9465168e1.js\",\"7502\",\"static/chunks/7502-9d7fbe7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"Logo\"]\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"main\",null,{\"className\":\"pt-10 lg:pt-14 2xl:pt-18 pb-24 mx-auto x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] h-[600px] lg:h-[550px] xl:h-[600px] -mt-10 lg:-mt-14 2xl:-mt-18\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pointer-events-none x:max-w-(--nextra-content-width) w-full absolute left-1/2 top-8 lg:top-[130px] -translate-x-1/2 z-10\",\"children\":[\"$\",\"div\",null,{\"style\":{\"pointerEvents\":\"all\"},\"className\":\"text-center mx-auto lg:mx-0 lg:text-left max-w-lg relative bg-white/10 backdrop-blur-[2px] px-3 lg:px-[35px]\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"tracking-[-0.02rem] text-5xl lg:text-6xl mb-4 font-black\",\"ref\":\"$undefined\",\"children\":[\"Wire Your Ideas with \",[\"$\",\"span\",null,{\"className\":\"text-primary\",\"children\":\"Svelte Flow\"}]]}],[\"$\",\"h2\",null,{\"className\":\"mb-4 lg:mb-6 text-xl\",\"ref\":\"$undefined\",\"children\":\"A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center lg:justify-start\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex\",\"children\":[[\"$\",\"$L1c\",null,{\"href\":\"/learn\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"}]]}],\"Quickstart\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 px-6 h-10 text-md rounded-full mr-3\",\"ref\":null}],[\"$\",\"$L1c\",null,{\"href\":\"/support-us\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\"}]]}],\" Support Us\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full\",\"ref\":null}]]}]}]]}]}],[\"$\",\"$L1f\",null,{\"initialColor\":\"#ff4000\"}]]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24 mt-6 lg:mt-10\",\"children\":[\"$\",\"div\",null,{\"className\":\"lg:grid lg:grid-cols-7 lg:gap-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:col-span-4 flex place-content-between lg:space-x-24 grow\",\"children\":[[\"$\",\"div\",\"Current Version-0.1.34\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"0.1.34\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"Current Version\"}]]}],[\"$\",\"div\",\"Weekly Installs-30k\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"30k\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"Weekly Installs\"}]]}],[\"$\",\"div\",\"License-MIT\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"MIT\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"License\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"lg:col-span-3 mt-8 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-light text-lg leading-tight\",\"ref\":\"$undefined\",\"children\":\"Svelte Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by supporting us.\"}],[\"$\",\"$L1c\",null,{\"href\":\"/support-us\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z\"}]]}],\" Support Us\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full max-md:w-full mt-5\",\"ref\":null}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] x:max-w-(--nextra-content-width) lg:ml-0 lg:mr-0 lg:right-0 lg:left-0 lg:w-full !mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex border border-gray-700 text-white bg-black rounded-none border-none p-0 mt-16 lg:mt-24 lg:p-1.5 lg:rounded-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"shadow-md relative overflow-hidden flex-grow border border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-none border-none lg:rounded-[18px] lg:border-solid lg:border-gray-700\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-4 pt-12 pb-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-lg leading-tight font-bold mb-2 text-center text-primary\",\"ref\":\"$undefined\",\"children\":[\"Getting Started with \",\"Svelte Flow\"]}],[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-center max-w-lg mx-auto mb-6 lg:mb-8\",\"ref\":\"$undefined\",\"children\":[\"Make sure you’ve installed npm, pnpm or yarn. Then you can install\",\" \",\"Svelte Flow\",\" via:\"]}],[\"$\",\"div\",null,{\"className\":\"border border-solid border-gray-700 rounded-md max-w-3xl mx-auto bg-black/90\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex p-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-red-400 rounded-full mr-2\"}],[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-yellow-400 rounded-full mr-2\"}],[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-green-400 rounded-full mr-2\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pl-8 pb-6 py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"!pl-0 inline text-md font-mono\",\"children\":[\"npm install \",[\"$\",\"span\",null,{\"className\":\"text-primary\",\"children\":\"@xyflow/svelte\"}]]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center mt-5 py-3 bg-black/90 border-t border-gray-700\",\"children\":[\"$\",\"$L1c\",null,{\"href\":\"/learn\",\"children\":[\"See full Quickstart guide\",\" \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-2 w-4 h-4 stroke-2\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3\"}]]}]],\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline shadow-none !px-0 py-2 h-9 px-6 text-white font-bold\",\"ref\":null}]}]]}]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24\",\"children\":[\"$\",\"$L20\",null,{\"features\":[{\"title\":\"Ready out-of-the-box\",\"text\":\"The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing edges are all built-in.\",\"route\":\"/learn\",\"linkLabel\":\"Get started\",\"flowComponent\":[\"$\",\"$L21\",null,{\"id\":\"a\",\"defaultNodes\":[{\"id\":\"1\",\"type\":\"input\",\"data\":{\"label\":\"Hello\"},\"position\":{\"x\":0,\"y\":0},\"style\":{\"fontWeight\":\"bold\"}},{\"id\":\"2\",\"data\":{\"label\":\"World\"},\"position\":{\"x\":150,\"y\":100},\"style\":{\"fontWeight\":\"bold\"}}],\"defaultEdges\":[{\"id\":\"e1-2\",\"source\":\"1\",\"target\":\"2\"}],\"fitView\":true,\"fitViewOptions\":{\"padding\":0.4},\"proOptions\":{\"hideAttribution\":true},\"preventScrolling\":false,\"children\":[[\"$\",\"$L22\",null,{}],[\"$\",\"$L23\",null,{\"showInteractive\":false}]]}]},{\"title\":[\"Powered by us.\",[\"$\",\"br\",null,{}],\"Designed by you.\"],\"text\":\"We play nice with Tailwind and good old CSS. Svelte Flow nodes are just Svelte components. Create custom nodes to have full control with interactive components.\",\"route\":\"/learn/guides/custom-nodes\",\"linkLabel\":\"Custom nodes guide\",\"flowComponent\":[\"$\",\"$L24\",null,{}]},{\"title\":\"All the right plugins\",\"text\":\"Make more advanced apps with the Background, Minimap, Controls, and Panel components.\",\"route\":\"/learn\",\"flowComponent\":[\"$\",\"$L25\",null,{}]}]}]}],[\"$\",\"div\",null,{\"className\":\"p-2 flex border border-solid border-gray-700 text-white bg-black rounded-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"shadow-md relative overflow-hidden flex-grow border border-solid border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-[22px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 md:p-8 lg:p-14\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid lg:grid-cols-2 lg:gap-40\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed font-bold mb-2 text-accent tracking-wide\",\"ref\":\"$undefined\",\"children\":\"Interactive Examples\"}],[\"$\",\"h2\",null,{\"className\":\"text-5xl lg:text-6xl font-black leading mb-4 tracking-normal\",\"ref\":\"$undefined\",\"children\":\"See Svelte Flow in action\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed mt-4 mb-4\",\"ref\":\"$undefined\",\"children\":\"To see all the capabilities of Svelte Flow, check out the interactive examples which are regularly updated.\"}],[\"$\",\"$L1c\",null,{\"href\":\"/examples\",\"children\":\"See all examples\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-secondary text-secondary-foreground hover:bg-gray-50 border border-solid border-gray-100 py-2 h-9 px-6\",\"ref\":null}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[\"$\",\"$L26\",null,{\"items\":[{\"name\":\"Feature Overview\",\"text\":\"Many features of Svelte Flow require zero configuration\",\"content\":[\"$\",\"iframe\",null,{\"src\":\"https://example-apps.xyflow.com/svelte/examples/misc/feature-overview/index.html\",\"loading\":\"lazy\",\"width\":\"100%\",\"height\":\"100%\",\"className\":\"rounded-xl overflow-hidden pointer-events-none\"}]},{\"name\":\"Subflows\",\"text\":\"Svelte Flow supports nested graphs out of the box\",\"content\":[\"$\",\"iframe\",null,{\"src\":\"https://example-apps.xyflow.com/svelte/examples/layout/subflows/index.html\",\"loading\":\"lazy\",\"width\":\"100%\",\"height\":\"100%\",\"className\":\"rounded-xl overflow-hidden pointer-events-none\"}]},{\"name\":\"Edge Types\",\"text\":\"The component comes with a set of common edge types\",\"content\":[\"$\",\"iframe\",null,{\"src\":\"https://example-apps.xyflow.com/svelte/examples/edges/edge-types/index.html\",\"loading\":\"lazy\",\"width\":\"100%\",\"height\":\"100%\",\"className\":\"rounded-xl overflow-hidden pointer-events-none\"}]}],\"duration\":5000,\"start\":\"Feature Overview\"}]}]]}]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-2\",\"ref\":\"$undefined\",\"children\":\"A project by the xyflow team\"}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed text-center max-w-xl mx-auto mb-6\",\"ref\":\"$undefined\",\"children\":\"We are Christopher, Peter, Abbey and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap justify-center space-x-8 mb-16\",\"children\":[[\"$\",\"$L1c\",null,{\"href\":\"https://xyflow.com/blog\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Blog \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1c\",null,{\"href\":\"https://xyflow.com/about\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"About us \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1c\",null,{\"href\":\"https://xyflow.com/open-source\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Open Source \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1c\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Contact Us \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}]]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"grid border-t border-solid border-gray-100 grid-cols-1 lg:grid-cols-2 mt-16 lg:mt-24\",\"children\":[[\"$\",\"a\",\"reactflow\",{\"href\":\"https://reactflow.dev\",\"className\":\"lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L27\",null,{\"className\":\"mr-2 text-[#ff0071]\"}],\" \",\"React Flow\"]}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mt-2 mb-4\",\"ref\":\"$undefined\",\"children\":\"A customizable React component for building node-based editors and interactive diagrams\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center text-[#ff0071]\",\"children\":[\"Visit Website \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-1 w-4 h-4\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]]}]],\"target\":\"_blank\",\"rel\":\"noopener noreferrer\"}],[\"$\",\"a\",\"xyflow\",{\"href\":\"https://xyflow.com\",\"className\":\"lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L27\",null,{\"className\":\"mr-2 text-[#000]\"}],\" \",\"xyflow\"]}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mt-2 mb-4\",\"ref\":\"$undefined\",\"children\":\"The team behind React Flow and Svelte Flow. Read updates and blog posts from us and about how we approach open source development.\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center text-[#000]\",\"children\":[\"Visit Website \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-1 w-4 h-4\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]]}]],\"target\":\"_blank\",\"rel\":\"noopener noreferrer\"}]]}]]}]\n"])</script></body></html>