CINXE.COM

<!DOCTYPE html><html class="__className_f35434 learn" 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>Quickstart - Svelte Flow</title><meta name="description" content="How to get tarted with Svelte Flow in your Svelte project"/><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/learn"/><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="Quickstart - Svelte Flow"/><meta property="og:description" content="How to get tarted with Svelte Flow in your Svelte project"/><meta property="og:url" content="https://svelteflow.dev/learn"/><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="Quickstart - Svelte Flow"/><meta name="twitter:description" content="How to get tarted with Svelte Flow in your Svelte project"/><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" aria-current="true" 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 active"><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:bg-primary-100 x:font-semibold x:text-primary-800 x:dark:bg-primary-400/10 x:dark:text-primary-600 x:contrast-more:border-primary-500!" 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="active"><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:bg-primary-100 x:font-semibold x:text-primary-800 x:dark:bg-primary-400/10 x:dark:text-primary-600 x:contrast-more:border-primary-500!" 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><div class="x:mx-auto x:flex x:max-w-(--nextra-content-width)"><aside id=":Rbtttelb:" class="nextra-sidebar x:print:hidden x:transition-all x:ease-in-out x:max-md:hidden x:flex x:flex-col x:h-[calc(100dvh-var(--nextra-menu-height))] x:top-(--nextra-navbar-height) x:shrink-0 x:w-64 x:sticky"><div class="x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask x:grow"><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"><li class="active"><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:bg-primary-100 x:font-semibold x:text-primary-800 x:dark:bg-primary-400/10 x:dark:text-primary-600 x:contrast-more:border-primary-500!" href="/learn">Quickstart</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" 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 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/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="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/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 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/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></div></aside><nav class="nextra-toc x:order-last x:max-xl:hidden x:w-64 x:shrink-0 x:print:hidden" aria-label="table of contents"><div class="x:grid x:grid-rows-[min-content_1fr_min-content] x:sticky x:top-(--nextra-navbar-height) x:text-sm x:max-h-[calc(100vh-var(--nextra-navbar-height))]"><p class="x:pt-6 x:px-4 x:font-semibold x:tracking-tight">On This Page</p><ul class="x:p-4 nextra-scrollbar x:overscroll-y-contain x:overflow-y-auto x:hyphens-auto nextra-mask"><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#play-online" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-500 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Play online</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#vite-template" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-500 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Vite template</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#installation" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-500 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Installation</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#creating-your-first-flow" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-500 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Creating your first flow</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#how-to-contribute" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-500 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">How to Contribute</a></li></ul><div class="x:grid x:gap-2 x:py-4 x:mx-4 x:border-t nextra-border"><a href="https://github.com/xyflow/web/tree/main/sites/svelteflow.dev/src/content/learn/index.mdx" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-xs x:font-medium x:transition x:text-gray-600 x:dark:text-gray-400 x:hover:text-gray-800 x:dark:hover:text-gray-200 x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100">Edit this page on GitHub <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><div class="grid gap-2 x:text-xs x:font-medium"><a href="https://xyflow.com/contact" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus xy-link-gray">Question? Give us feedback <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><p class="font-bold mt-4">What's new?</p><a class="xy-link-gray x:focus-visible:nextra-focus" href="/whats-new/2025-02-12">Svelte Flow 0.1.30</a><a class="xy-link-gray x:focus-visible:nextra-focus" href="/whats-new/2025-01-21">Svelte Flow 0.1.29</a><a class="xy-link-gray x:focus-visible:nextra-focus" href="/whats-new/2025-01-16">Svelte Flow 0.1.28</a><a class="xy-link-gray x:focus-visible:nextra-focus" href="/whats-new">...and more!</a></div></div></div></nav><article class="x:w-full x:min-w-0 x:break-words x:min-h-[calc(100vh-var(--nextra-navbar-height))] x:text-slate-700 x:dark:text-slate-200 x:pb-8 x:px-4 x:pt-4 x:md:px-12"><div class="nextra-breadcrumb x:mt-1.5 x:flex x:items-center x:gap-1 x:overflow-hidden x:text-sm x:text-gray-500 x:dark:text-gray-400 x:contrast-more:text-current"><span class="x:whitespace-nowrap x:transition-colors x:min-w-6 x:overflow-hidden x:text-ellipsis" title="Learn">Learn</span><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="x:shrink-0 x:rtl:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="x:whitespace-nowrap x:transition-colors x:font-medium x:text-gray-700 x:dark:text-gray-100" title="Quickstart">Quickstart</span></div><div id="nextra-skip-nav"></div><main data-pagefind-body="true"><h1 class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-bold x:mt-2 x:text-4xl">Quickstart</h1> <p class="x:not-first:mt-6 x:leading-7">Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow.</p> <div class="nextra-callout x:overflow-x-auto x:mt-6 x:flex x:rounded-lg x:border x:py-2 x:pe-4 x:contrast-more:border-current! x:border-orange-100 x:bg-orange-50 x:text-orange-800 x:dark:border-orange-400/30 x:dark:bg-orange-400/20 x:dark:text-orange-300"><div class="x:select-none x:text-xl x:ps-3 x:pe-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"" data-pagefind-ignore="all">💡</div><div class="x:w-full x:min-w-0 x:leading-7"><p class="x:not-first:mt-6 x:leading-7">This package is currently in an alpha state and under heavy development. The API is likely to change. You can read about the latest changes in the <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/whats-new">“What’s New” section</a>.</p></div></div> <h2 id="play-online" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Play online<a href="#play-online" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="x:not-first:mt-6 x:leading-7">You can try Svelte Flow without setting anything up locally by checking out the starter projects we have on <a href="https://stackblitz.com" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">Stackblitz <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>:</p> <div class="nextra-cards x:mt-4 x:gap-4 x:grid not-prose" style="--rows:2"><a class="x:group x:focus-visible:nextra-focus nextra-card x:flex x:flex-col x:justify-start x:overflow-hidden x:rounded-lg x:border x:border-gray-200 x:text-current x:no-underline x:dark:shadow-none x:hover:shadow-gray-100 x:dark:hover:shadow-none x:shadow-gray-100 x:active:shadow-sm x:active:shadow-gray-200 x:transition-all x:duration-200 x:hover:border-gray-300 x:bg-transparent x:shadow-sm x:dark:border-neutral-800 x:hover:bg-slate-50 x:hover:shadow-md x:dark:hover:border-neutral-700 x:dark:hover:bg-neutral-900" href="https://new.svelteflow.dev/js"><span class="x:flex x:font-semibold x:items-center x:gap-2 x:p-4 x:text-gray-700 x:hover:text-gray-900 x:dark:text-neutral-200 x:dark:hover:text-neutral-50" title="new.svelteflow.dev/js"><div class="rounded-full w-10 h-10 bg-yellow-200 text-gray-700 font-black flex items-center justify-center">JS</div><span class="_truncate">new.svelteflow.dev/js</span></span></a><a class="x:group x:focus-visible:nextra-focus nextra-card x:flex x:flex-col x:justify-start x:overflow-hidden x:rounded-lg x:border x:border-gray-200 x:text-current x:no-underline x:dark:shadow-none x:hover:shadow-gray-100 x:dark:hover:shadow-none x:shadow-gray-100 x:active:shadow-sm x:active:shadow-gray-200 x:transition-all x:duration-200 x:hover:border-gray-300 x:bg-transparent x:shadow-sm x:dark:border-neutral-800 x:hover:bg-slate-50 x:hover:shadow-md x:dark:hover:border-neutral-700 x:dark:hover:bg-neutral-900" href="https://new.svelteflow.dev/ts"><span class="x:flex x:font-semibold x:items-center x:gap-2 x:p-4 x:text-gray-700 x:hover:text-gray-900 x:dark:text-neutral-200 x:dark:hover:text-neutral-50" title="new.svelteflow.dev/ts"><div class="rounded-full w-10 h-10 bg-blue-500 text-white font-black flex items-center justify-center">TS</div><span class="_truncate">new.svelteflow.dev/ts</span></span></a></div> <h2 id="vite-template" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Vite template<a href="#vite-template" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="x:not-first:mt-6 x:leading-7">If you want to get started right away, you can use our <a href="https://github.com/xyflow/vite-svelte-flow-template" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">vite template <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>:</p> <button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div class="nextra-scrollbar x:overflow-x-auto x:overscroll-x-contain x:overflow-y-hidden x:mt-4 x:flex x:w-full x:gap-2 x:border-b x:border-gray-200 x:pb-px x:dark:border-neutral-800 x:focus-visible:nextra-focus" role="tablist" aria-orientation="horizontal"><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-current x:outline-none x:text-primary-600" id="headlessui-tabs-tab-:R5i6ajtttelb:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected="">npm</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:R9i6ajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">pnpm</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:Rdi6ajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">yarn</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:Rhi6ajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">bun</button></div><div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:R6i6ajtttelb:" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> degit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> xyflow/vite-svelte-flow-template</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> app-name</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Rai6ajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> degit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> xyflow/vite-svelte-flow-template</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> app-name</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Rei6ajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> dlx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> degit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> xyflow/vite-svelte-flow-template</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> app-name</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Rii6ajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> degit</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> xyflow/vite-svelte-flow-template</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> app-name</span></span></code></pre></div></div></div> <h2 id="installation" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Installation<a href="#installation" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="x:not-first:mt-6 x:leading-7">The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:</p> <button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div class="nextra-scrollbar x:overflow-x-auto x:overscroll-x-contain x:overflow-y-hidden x:mt-4 x:flex x:w-full x:gap-2 x:border-b x:border-gray-200 x:pb-px x:dark:border-neutral-800 x:focus-visible:nextra-focus" role="tablist" aria-orientation="horizontal"><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-current x:outline-none x:text-primary-600" id="headlessui-tabs-tab-:R5iuajtttelb:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected="">npm</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:R9iuajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">pnpm</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:Rdiuajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">yarn</button><button class="x:whitespace-nowrap x:cursor-pointer x:rounded-t x:p-2 x:font-medium x:leading-5 x:transition-colors x:-mb-0.5 x:select-none x:border-b-2 x:border-transparent x:text-gray-600 x:dark:text-gray-200" id="headlessui-tabs-tab-:Rhiuajtttelb:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">bun</button></div><div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:R6iuajtttelb:" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @xyflow/svelte</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Raiuajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @xyflow/svelte</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Reiuajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @xyflow/svelte</span></span></code></pre></div></div><div class="x:rounded x:mt-6" id="headlessui-tabs-panel-:Riiuajtttelb:" role="tabpanel" tabindex="-1" hidden="" style="display:none" data-headlessui-state=""><div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> @xyflow/svelte</span></span></code></pre></div></div></div> <h2 id="creating-your-first-flow" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Creating your first flow<a href="#creating-your-first-flow" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="x:not-first:mt-6 x:leading-7">We get started by stacking together the most important components of Svelte Flow: <code class="nextra-code" dir="ltr">SvelteFlow</code>, <code class="nextra-code" dir="ltr">Controls</code>, <code class="nextra-code" dir="ltr">Background</code> and <code class="nextra-code" dir="ltr">MiniMap</code>. A basic flow looks like this:</p> <div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-6"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { writable } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 'svelte/store'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> SvelteFlow,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Controls,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> Background,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> BackgroundVariant,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> MiniMap</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@xyflow/svelte'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // 👇 this is important! You need to import the styles for Svelte Flow to work</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '@xyflow/svelte/dist/style.css'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span> <span> </span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> nodes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> writable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">([</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'input'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> data: { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Input Node'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> position: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'default'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> data: { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Node'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> position: { x: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, y: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">150</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ]);</span></span> <span> </span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // same for edges</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> edges</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> writable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">([</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1-2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'default'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> source: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> target: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Edge Text'</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ]);</span></span> <span> </span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> snapGrid</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> [</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">25</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">];</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> <span> </span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">500px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">SvelteFlow</span></span> <span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> {</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">nodes</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">}</span></span> <span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> {</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">edges</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">}</span></span> <span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> {</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">snapGrid</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">}</span></span> <span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> fitView</span></span> <span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">nodeclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'on node click'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, event.detail.node)}</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">Background</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> variant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">={BackgroundVariant.Dots} /></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">MiniMap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> </</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">SvelteFlow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre></div> <h2 id="how-to-contribute" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">How to Contribute<a href="#how-to-contribute" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="x:not-first:mt-6 x:leading-7"><strong>Show us what you make:</strong> Drop it in into our <a href="https://discord.com/invite/Bqt6xrs" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">Discord Server <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>, <a href="https://twitter.com/xyflowdev" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">tweet <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> at us, or email us at <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="mailto:info@xyflow.com">info@xyflow.com</a></p> <p class="x:not-first:mt-6 x:leading-7"><strong>Community Participation:</strong> Ask and answer questions in our <a href="https://discord.com/invite/Bqt6xrs" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">Discord Server <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> or jump in on Github discussions.</p> <p class="x:not-first:mt-6 x:leading-7"><strong>Squash Bugs:</strong> We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.</p> <p class="x:not-first:mt-6 x:leading-7"><strong>Financial Support:</strong> If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="mailto:info@xyflow.com">info@xyflow.com</a></p> <p class="x:not-first:mt-6 x:leading-7">And of course, we love Github stars ⭐</p></main><div class="x:mt-12 x:mb-8 x:text-xs x:text-gray-500 x:text-end x:dark:text-gray-400">Last updated on <time dateTime="2025-03-19T07:50:52.000Z">March 19, 2025</time></div><div class="x:mb-8 x:flex x:items-center x:border-t x:pt-8 nextra-border x:print:hidden"><a title="Installation" class="x:focus-visible:nextra-focus x:text-gray-600 x:dark:text-gray-400 x:hover:text-gray-800 x:dark:hover:text-gray-200 x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:flex x:max-w-[50%] x:items-center x:gap-1 x:py-4 x:text-base x:font-medium x:transition-colors x:[word-break:break-word] x:md:text-lg x:ps-4 x:ms-auto x:text-end" href="/learn/getting-started/installation">Installation<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="20" class="x:inline x:shrink-0 x:rtl:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></article></div><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\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"ysrG8OIPmrxoT8T5HYcI2\",\"p\":\"\",\"c\":[\"\",\"learn\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(content-pages)\",{\"children\":[[\"mdxPath\",\"learn\",\"c\"],{\"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\":[[\"mdxPath\",\"learn\",\"c\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(content-pages)\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",null,[\"$\",\"$L6\",null,{\"children\":\"$L7\"}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"cV_DQoPUHQ_MJ3Km-FwGZ\",{\"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[21292,[\"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\"],\"TOCProvider\"]\n11: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\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"Sidebar\"]\n12:I[19880,[\"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\",\"6"])</script><script>self.__next_f.push([1,"949\",\"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\"],\"ClientWrapper\"]\n5:[\"$\",\"div\",null,{\"className\":\"x:mx-auto x:flex x:max-w-(--nextra-content-width)\",\"children\":[\"$\",\"$L10\",null,{\"value\":[{\"value\":\"Play online\",\"id\":\"play-online\",\"depth\":2},{\"value\":\"Vite template\",\"id\":\"vite-template\",\"depth\":2},{\"value\":\"Installation\",\"id\":\"installation\",\"depth\":2},{\"value\":\"Creating your first flow\",\"id\":\"creating-your-first-flow\",\"depth\":2},{\"value\":\"How to Contribute\",\"id\":\"how-to-contribute\",\"depth\":2}],\"children\":[[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{\"metadata\":{\"description\":\"How to get tarted with Svelte Flow in your Svelte project\",\"title\":\"Quickstart\",\"filePath\":\"src/content/learn/index.mdx\",\"timestamp\":1742370652000},\"bottomContent\":\"$undefined\",\"children\":[[\"$\",\"div\",null,{\"id\":\"nextra-skip-nav\"}],[\"$\",\"main\",null,{\"data-pagefind-body\":true,\"children\":\"$@13\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"14: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\"],\"\"]\n15:I[77967,[\"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\"],\"HeadingAnchor\"]\n16:I[93554,[\"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\"],\"Tabs\"]\n17:I[93554,[\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/"])</script><script>self.__next_f.push([1,"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\"],\"Tab\"]\n18:I[91652,[\"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\"],\"ToggleWordWrapButton\"]\n19:I[48998,[\"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-9d7fbe7c"])</script><script>self.__next_f.push([1,"7f732bff.js\",\"7999\",\"static/chunks/7999-b3231daeca0e28b3.js\",\"4405\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"CopyToClipboard\"]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"h1\",null,{\"id\":\"$undefined\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-bold x:mt-2 x:text-4xl\",\"children\":[\"Quickstart\",\"$undefined\"]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":\"Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow.\"}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"nextra-callout x:overflow-x-auto x:mt-6 x:flex x:rounded-lg x:border x:py-2 x:pe-4 x:contrast-more:border-current! x:border-orange-100 x:bg-orange-50 x:text-orange-800 x:dark:border-orange-400/30 x:dark:bg-orange-400/20 x:dark:text-orange-300\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:select-none x:text-xl x:ps-3 x:pe-2\",\"style\":{\"fontFamily\":\"\\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\"\"},\"data-pagefind-ignore\":\"all\",\"children\":\"💡\"}],[\"$\",\"div\",null,{\"className\":\"x:w-full x:min-w-0 x:leading-7\",\"children\":[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[\"This package is currently in an alpha state and under heavy development. The API is\\nlikely to change. You can read about the latest changes in the \",[\"$\",\"$L14\",null,{\"href\":\"/whats-new\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":\"“What’s New”\\nsection\"}],\".\"]}]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"play-online\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Play online\",[\"$\",\"$L15\",null,{\"id\":\"play-online\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[\"You can try Svelte Flow without setting anything up locally by checking out the starter projects we have on \",[\"$\",\"a\",null,{\"href\":\"https://stackblitz.com\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"Stackblitz\",[\" \",[\"$\",\"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\"}]]}]]]}],\":\"]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"nextra-cards x:mt-4 x:gap-4 x:grid not-prose\",\"style\":{\"--rows\":2},\"children\":[[\"$\",\"$L14\",null,{\"href\":\"https://new.svelteflow.dev/js\",\"className\":\"x:group x:focus-visible:nextra-focus nextra-card x:flex x:flex-col x:justify-start x:overflow-hidden x:rounded-lg x:border x:border-gray-200 x:text-current x:no-underline x:dark:shadow-none x:hover:shadow-gray-100 x:dark:hover:shadow-none x:shadow-gray-100 x:active:shadow-sm x:active:shadow-gray-200 x:transition-all x:duration-200 x:hover:border-gray-300 x:bg-transparent x:shadow-sm x:dark:border-neutral-800 x:hover:bg-slate-50 x:hover:shadow-md x:dark:hover:border-neutral-700 x:dark:hover:bg-neutral-900\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"x:flex x:font-semibold x:items-center x:gap-2 x:p-4 x:text-gray-700 x:hover:text-gray-900 x:dark:text-neutral-200 x:dark:hover:text-neutral-50\",\"title\":\"new.svelteflow.dev/js\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-full w-10 h-10 bg-yellow-200 text-gray-700 font-black flex items-center justify-center\",\"children\":\"JS\"}],[\"$\",\"span\",null,{\"className\":\"_truncate\",\"children\":\"new.svelteflow.dev/js\"}]]}]]}],[\"$\",\"$L14\",null,{\"href\":\"https://new.svelteflow.dev/ts\",\"className\":\"x:group x:focus-visible:nextra-focus nextra-card x:flex x:flex-col x:justify-start x:overflow-hidden x:rounded-lg x:border x:border-gray-200 x:text-current x:no-underline x:dark:shadow-none x:hover:shadow-gray-100 x:dark:hover:shadow-none x:shadow-gray-100 x:active:shadow-sm x:active:shadow-gray-200 x:transition-all x:duration-200 x:hover:border-gray-300 x:bg-transparent x:shadow-sm x:dark:border-neutral-800 x:hover:bg-slate-50 x:hover:shadow-md x:dark:hover:border-neutral-700 x:dark:hover:bg-neutral-900\",\"children\":[\"$undefined\",[\"$\",\"span\",null,{\"className\":\"x:flex x:font-semibold x:items-center x:gap-2 x:p-4 x:text-gray-700 x:hover:text-gray-900 x:dark:text-neutral-200 x:dark:hover:text-neutral-50\",\"title\":\"new.svelteflow.dev/ts\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-full w-10 h-10 bg-blue-500 text-white font-black flex items-center justify-center\",\"children\":\"TS\"}],[\"$\",\"span\",null,{\"className\":\"_truncate\",\"children\":\"new.svelteflow.dev/ts\"}]]}]]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"vite-template\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Vite template\",[\"$\",\"$L15\",null,{\"id\":\"vite-template\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[\"If you want to get started right away, you can use our \",[\"$\",\"a\",null,{\"href\":\"https://github.com/xyflow/vite-svelte-flow-template\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"vite template\",[\" \",[\"$\",\"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\"}]]}]]]}],\":\"]}],\"\\n\",[\"$\",\"$L16\",null,{\"items\":[\"npm\",\"pnpm\",\"yarn\",\"bun\"],\"storageKey\":\"selectedPackageManager\",\"children\":[[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"npx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" degit\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" xyflow/vite-svelte-flow-template\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" app-name\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pnpm\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" dlx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" degit\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" xyflow/vite-svelte-flow-template\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" app-name\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"yarn\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" dlx\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" degit\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" xyflow/vite-svelte-flow-template\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" app-name\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"bun\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" x\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" degit\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" xyflow/vite-svelte-flow-template\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" app-name\"}]]}]}]]}]]}]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"installation\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Installation\",[\"$\",\"$L15\",null,{\"id\":\"installation\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":\"The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:\"}],\"\\n\",[\"$\",\"$L16\",null,{\"items\":[\"npm\",\"pnpm\",\"yarn\",\"bun\"],\"storageKey\":\"selectedPackageManager\",\"children\":[[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"npm\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" install\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @xyflow/svelte\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"pnpm\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" add\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @xyflow/svelte\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"yarn\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" add\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @xyflow/svelte\"}]]}]}]]}]]}]}],[\"$\",\"$L17\",null,{\"children\":[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L19\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"bun\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" add\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" @xyflow/svelte\"}]]}]}]]}]]}]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"creating-your-first-flow\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Creating your first flow\",[\"$\",\"$L15\",null,{\"id\":\"creating-your-first-flow\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[\"We get started by stacking together the most important components of Svelte Flow: \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"SvelteFlow\"}],\", \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"Controls\"}],\", \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"Background\"}],\" and \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"MiniMap\"}],\". A basic flow looks like this:\"]}],\"\\n\",[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-6\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L18\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],false]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"script\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { writable } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" 'svelte/store'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" SvelteFlow,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" Controls,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" Background,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" BackgroundVariant,\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" MiniMap\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '@xyflow/svelte'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // 👇 this is important! You need to import the styles for Svelte Flow to work\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '@xyflow/svelte/dist/style.css'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" nodes\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" writable\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"([\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" id: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'1'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" type: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'input'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" data: { label: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'Input Node'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" position: { x: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", y: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" id: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'2'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" type: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'default'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" data: { label: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'Node'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" },\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" position: { x: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", y: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"150\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ]);\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\" // same for edges\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" edges\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" writable\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"([\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" id: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'1-2'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" type: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'default'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" source: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'1'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" target: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'2'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" label: \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'Edge Text'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" }\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" ]);\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" snapGrid\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" [\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"25\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"25\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"];\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"script\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"\u003c!--\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"👇 By default, the Svelte Flow container has a height of 100%.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"This means that the parent container needs a height to render the flow.\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6A737D\",\"--shiki-dark\":\"#6A737D\"},\"children\":\"--\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" style\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"500px\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"SvelteFlow\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"nodes\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"edges\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"snapGrid\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" fitView\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" on\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"nodeclick\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"={(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"event\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" console.\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"log\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\"'on node click'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\", event.detail.node)}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Controls\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Background\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" variant\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"={BackgroundVariant.Dots} /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"MiniMap\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"SvelteFlow\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}]]}]]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"how-to-contribute\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"How to Contribute\",[\"$\",\"$L15\",null,{\"id\":\"how-to-contribute\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Show us what you make:\"}],\" Drop it in into our \",[\"$\",\"a\",null,{\"href\":\"https://discord.com/invite/Bqt6xrs\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"Discord Server\",[\" \",[\"$\",\"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\"}]]}]]]}],\", \",[\"$\",\"a\",null,{\"href\":\"https://twitter.com/xyflowdev\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"tweet\",[\" \",[\"$\",\"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\"}]]}]]]}],\" at us, or email us at \",[\"$\",\"$L14\",null,{\"href\":\"mailto:info@xyflow.com\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":\"info@xyflow.com\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Community Participation:\"}],\" Ask and answer questions in our \",[\"$\",\"a\",null,{\"href\":\"https://discord.com/invite/Bqt6xrs\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"Discord Server\",[\" \",[\"$\",\"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\"}]]}]]]}],\" or jump in on Github discussions.\"]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Squash Bugs:\"}],\" We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.\"]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Financial Support:\"}],\" If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at \",[\"$\",\"$L14\",null,{\"href\":\"mailto:info@xyflow.com\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":\"info@xyflow.com\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-6 x:leading-7\",\"children\":\"And of course, we love Github stars ⭐\"}]]\n"])</script><script>self.__next_f.push([1,"1a: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\"]\n1b: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\"]\n1d: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\"]\n1e: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\"]\n1f: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\"]\n20: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\"]\n21: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\"]\n22: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\"]\n23: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\"]\n24: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\"]\n26: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\",\"static/chunks/app/(content-pages)/%5B...mdxPath%5D/page-c924acb6dbac1276.js\"],\"MobileNav\"]\n27: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-9d7fb"])</script><script>self.__next_f.push([1,"e7c7f732bff.js\",\"5962\",\"static/chunks/app/(content-pages)/page-f1b6e682acf56a67.js\"],\"NotFoundLayout\"]\n25: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:[\"$\",\"$L1a\",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\":[\"$\",\"$L1b\",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\":\"$L1c\",\"float\":true,\"title\":\"On This Page\"}},\"children\":[\"$\",\"$L1d\",null,{\"attribute\":\"class\",\"defaultTheme\":\"light\",\"disableTransitionOnChange\":true,\"forcedTheme\":\"light\",\"children\":[[\"$\",\"$L1e\",null,{}],[\"$\",\"$L1f\",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!\"}]}],[\"$\",\"$L20\",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\"}]}]]}]]}],[\"$\",\"$L21\",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\":[\"$\",\"$L22\",null,{\"label\":\"Svelte Flow\"}]}],[\"$\",\"$L23\",null,{\"className\":\"x:me-auto\",\"children\":[\"$undefined\",\"$undefined\",[[\"$\",\"$L24\",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\":\"$25\"}]]}]}],[\"$\",\"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\"}]]}]}],[\"$\",\"$L14\",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\"}],[[\"$\",\"$L14\",\"/learn\",{\"href\":\"/learn\",\"className\":\"block\",\"children\":\"Quickstart Guide\"}],[\"$\",\"$L14\",\"/api-reference\",{\"href\":\"/api-reference\",\"className\":\"block\",\"children\":\"API Reference\"}],[\"$\",\"$L14\",\"/examples\",{\"href\":\"/examples\",\"className\":\"block\",\"children\":\"Examples\"}],[\"$\",\"$L14\",\"/showcase\",{\"href\":\"/showcase\",\"className\":\"block\",\"children\":\"Showcase\"}],[\"$\",\"$L14\",\"/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\"}],[[\"$\",\"$L14\",\"https://discord.gg/RVmnytFmGW\",{\"href\":\"https://discord.gg/RVmnytFmGW\",\"className\":\"block\",\"children\":\"Discord\"}],[\"$\",\"$L14\",\"https://github.com/xyflow\",{\"href\":\"https://github.com/xyflow\",\"className\":\"block\",\"children\":\"Github\"}],[\"$\",\"$L14\",\"https://x.com/xyflowdev\",{\"href\":\"https://x.com/xyflowdev\",\"className\":\"block\",\"children\":\"X / Twitter\"}],[\"$\",\"$L14\",\"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\"}],[[\"$\",\"$L14\",\"https://xyflow.com/blog\",{\"href\":\"https://xyflow.com/blog\",\"className\":\"block\",\"children\":\"Blog\"}],[\"$\",\"$L14\",\"https://xyflow.com/open-source\",{\"href\":\"https://xyflow.com/open-source\",\"className\":\"block\",\"children\":\"Open Source\"}],[\"$\",\"$L14\",\"https://xyflow.com/about\",{\"href\":\"https://xyflow.com/about\",\"className\":\"block\",\"children\":\"About\"}],[\"$\",\"$L14\",\"https://xyflow.com/contact\",{\"href\":\"https://xyflow.com/contact\",\"className\":\"block\",\"children\":\"Contact\"}],[\"$\",\"$L14\",\"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\"}],[[\"$\",\"$L14\",\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",\"className\":\"block\",\"children\":\"MIT License\"}],[\"$\",\"$L14\",\"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\":[[\"$\",\"$L26\",null,{}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[],[\"$\",\"$L27\",null,{}]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"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?\"}],[[\"$\",\"$L14\",\"/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\"}],[\"$\",\"$L14\",\"/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\"}],[\"$\",\"$L14\",\"/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\"}],[\"$\",\"$L14\",\"/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\":\"Quickstart - Svelte Flow\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"How to get tarted with Svelte Flow in your Svelte project\"}],[\"$\",\"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/learn\"}],[\"$\",\"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\":\"Quickstart - Svelte Flow\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"How to get tarted with Svelte Flow in your Svelte project\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://svelteflow.dev/learn\"}],[\"$\",\"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\":\"Quickstart - Svelte Flow\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:description\",\"content\":\"How to get tarted with Svelte Flow in your Svelte project\"}],[\"$\",\"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></body></html>