CINXE.COM

<!DOCTYPE html><html class="__className_f35434" dir="ltr" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/08c48d09be6639e0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/63429a2b6aa41def-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/8465cd5ac5565d9c-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/8e4fa9519f0b1748-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/346c8d13d90d8145.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/e54dab27a5b3bf74.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/8d0afe8b4225d80e.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-934bf796b5ad2aea.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/69debb3d-a28ce2dd44e3bdd5.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/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/8456-dd184f4314730770.js" async=""></script><script src="/_next/static/chunks/4047-de6dd70d3ea81044.js" async=""></script><script src="/_next/static/chunks/2417-85f239f6f318d69e.js" async=""></script><script src="/_next/static/chunks/2461-3e9a46a5c41bd958.js" async=""></script><script src="/_next/static/chunks/6145-24966611a005b79c.js" async=""></script><script src="/_next/static/chunks/7658-11d5a2a7ab7a75c6.js" async=""></script><script src="/_next/static/chunks/4303-8047094c81b026c9.js" async=""></script><script src="/_next/static/chunks/8171-a7785ff5315c9ebb.js" async=""></script><script src="/_next/static/chunks/4720-12866fa50b89d58a.js" async=""></script><script src="/_next/static/chunks/6246-1ded9ddf081235ef.js" async=""></script><script src="/_next/static/chunks/4821-4d4243742d57f0be.js" async=""></script><script src="/_next/static/chunks/app/layout-4372103b1864c4cb.js" async=""></script><script src="/_next/static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js" async=""></script><script src="/_next/static/chunks/350-6aebeaaf1444c430.js" async=""></script><script src="/_next/static/chunks/app/(content-pages)/layout-b130605a7014ebcf.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>Node-Based UIs in React - React Flow</title><meta name="description" content="Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more"/><meta name="application-name" content="React Flow"/><meta name="generator" content="Next.js"/><meta name="keywords" content="react,node-based UI,graph,diagram,workflow,react-flow,xyflow"/><meta name="robots" content="index,follow"/><meta name="docsearch:site" content="react"/><link rel="canonical" href="https://reactflow.dev"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="React Flow"/><meta name="apple-mobile-web-app-status-bar-style" content="default"/><meta property="og:title" content="Node-Based UIs in React - React Flow"/><meta property="og:description" content="Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more"/><meta property="og:url" content="https://reactflow.dev"/><meta property="og:site_name" content="React 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://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a"/><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="Node-Based UIs in React - React Flow"/><meta name="twitter:description" content="Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more"/><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://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="256x256"/><link rel="icon" href="/icon.svg?cdcb199d9e2211be" type="image/svg+xml" sizes="any"/><link rel="apple-touch-icon" href="/apple-icon.png?fd280f37a7ca70a3" type="image/png" sizes="180x180"/><style>:root { --nextra-primary-hue: 333deg; --nextra-primary-saturation: 80%; --nextra-primary-lightness: 45%; --nextra-bg: 250,250,250; --nextra-content-width: 90rem; } .dark { --nextra-primary-hue: 333deg; --nextra-primary-saturation: 80%; --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><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 mr-5 md:max-lg:hidden">React Flow</p></a></div><div class="x:flex x:gap-4 x:overflow-x-auto nextra-scrollbar x:py-1.5 x:max-md:hidden x:me-auto"><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/learn">Learn</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/api-reference">Reference</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/examples">Examples</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-gray-800 x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/components">Components</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-:Rthkunlb:" 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" target="_blank" rel="noreferrer"><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" target="_blank" rel="noreferrer"><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-4 flex gap-1" href="/pro"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"></path></svg><span class="max-[1100px]:hidden">React Flow</span>Pro</a><button class="x:transition x:cursor-pointer nextra-hamburger x:md:hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" height="24" class=""><g><path d="M4 6h16"></path></g><path d="M4 12h16"></path><g><path d="M4 18h16"></path></g></svg></button></nav></header><aside class="nextra-mobile-nav x:flex x:flex-col x:fixed x:inset-0 x:pt-(--nextra-navbar-height) x:z-20 x:overscroll-contain x:[contain:layout_style] x:md:hidden x:[.nextra-banner:not([class$=hidden])~&]:pt-[calc(var(--nextra-banner-height)+var(--nextra-navbar-height))] x:bg-nextra-bg x:[transform:translate3d(0,-100%,0)]"><ul class="x:grid x:gap-1 x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask"><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn" type="button" data-headlessui-state="">Learn<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn">Quickstart</a></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/concepts" type="button" data-headlessui-state="">Concepts<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/concepts/introduction">Introduction</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/concepts/terms-and-definitions">Terms and Definitions</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/concepts/core-concepts">Core Concepts</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/concepts/the-viewport">The 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="/learn/concepts/built-in-components">Built-In Components</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/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-and-requirements">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><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/adding-interactivity">Adding Interactivity</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/customization" type="button" data-headlessui-state="">Customizing React Flow<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/customization/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/customization/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="/learn/customization/theming">Theming</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/layouting" type="button" data-headlessui-state="">Layouting<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/layouting/layouting">Layouting Libraries</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/layouting/sub-flows">Sub Flows</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/advanced-use" type="button" data-headlessui-state="">Advanced Use<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/advanced-use/accessibility">Accessibility</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/advanced-use/testing">Testing</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/advanced-use/typescript">TypeScript</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/advanced-use/uncontrolled-flow">Uncontrolled 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="/learn/advanced-use/state-management">State Management</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/advanced-use/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="/learn/advanced-use/ssr-ssg-configuration">Server Side Rendering</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/advanced-use/devtools-and-debugging">Devtools</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="/learn/tutorials">Tutorials<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="/learn/tutorials/slide-shows-with-react-flow">Slideshow App</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/tutorials/react-flow-and-the-web-audio-api">Web Audio API</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/tutorials/mind-map-app-with-react-flow">Mind Map App</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/tutorials/getting-started-with-react-flow-components">React Flow Components</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/troubleshooting" type="button" data-headlessui-state="">Troubleshooting<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/troubleshooting">Common Errors</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/troubleshooting/remove-attribution">Remove Attribution</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/troubleshooting/migrate-to-v12">Migrate to v12</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/troubleshooting/migrate-to-v11">Migrate to v11</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/troubleshooting/migrate-to-v10">Migrate to v10</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/react-flow"><ReactFlow /></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/react-flow-provider"><ReactFlowProvider /></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"><div class="sidebar-title"><Background /></div></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"><div class="sidebar-title"><BaseEdge /></div></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"><div class="sidebar-title"><ControlButton /></div></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"><div class="sidebar-title"><Controls /></div></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"><div class="sidebar-title"><EdgeLabelRenderer /></div></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-text"><div class="sidebar-title"><EdgeText /></div></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"><div class="sidebar-title"><Handle /></div></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/minimap"><div class="sidebar-title"><MiniMap /></div></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"><div class="sidebar-title"><NodeResizeControl /></div></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"><div class="sidebar-title"><NodeResizer /></div></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"><div class="sidebar-title"><NodeToolbar /></div></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"><div class="sidebar-title"><Panel /></div></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/viewport-portal"><div class="sidebar-title"><ViewportPortal /></div></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"><div class="sidebar-title">useConnection()</div></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"><div class="sidebar-title">useEdges()</div></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-state"><div class="sidebar-title">useEdgesState()</div></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"><div class="sidebar-title">useHandleConnections()</div></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"><div class="sidebar-title">useInternalNode()</div></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-key-press"><div class="sidebar-title">useKeyPress()</div></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"><div class="sidebar-title">useNodeConnections()</div></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-id"><div class="sidebar-title">useNodeId()</div></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"><div class="sidebar-title">useNodes()</div></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"><div class="sidebar-title">useNodesData()</div></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"><div class="sidebar-title">useNodesInitialized()</div></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-state"><div class="sidebar-title">useNodesState()</div></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-on-selection-change"><div class="sidebar-title">useOnSelectionChange()</div></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-on-viewport-change"><div class="sidebar-title">useOnViewportChange()</div></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-react-flow"><div class="sidebar-title">useReactFlow()</div></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"><div class="sidebar-title">useStore()</div></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-api"><div class="sidebar-title">useStoreApi()</div></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"><div class="sidebar-title">useUpdateNodeInternals()</div></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-viewport"><div class="sidebar-title">useViewport()</div></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"><div class="sidebar-title">BackgroundVariant</div></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"><div class="sidebar-title">Connection</div></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-component-props"><div class="sidebar-title">ConnectionLineComponentProps</div></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"><div class="sidebar-title">ConnectionLineType</div></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-state"><div class="sidebar-title">ConnectionState</div></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"><div class="sidebar-title">CoordinateExtent</div></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"><div class="sidebar-title">DefaultEdgeOptions</div></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/delete-elements"><div class="sidebar-title">DeleteElements</div></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"><div class="sidebar-title">Edge</div></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-change"><div class="sidebar-title">EdgeChange</div></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"><div class="sidebar-title">EdgeMarker</div></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"><div class="sidebar-title">EdgeProps</div></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"><div class="sidebar-title">FitViewOptions</div></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/handle"><div class="sidebar-title">Handle</div></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/handle-connection"><div class="sidebar-title">HandleConnection</div></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"><div class="sidebar-title">InternalNode</div></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"><div class="sidebar-title">MarkerType</div></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/mini-map-node-props"><div class="sidebar-title">MiniMapNodeProps</div></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"><div class="sidebar-title">Node</div></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-change"><div class="sidebar-title">NodeChange</div></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"><div class="sidebar-title">NodeConnection</div></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-handle"><div class="sidebar-title">NodeHandle</div></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"><div class="sidebar-title">NodeOrigin</div></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"><div class="sidebar-title">NodeProps</div></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/on-edges-change"><div class="sidebar-title">OnEdgesChange</div></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/on-nodes-change"><div class="sidebar-title">OnNodesChange</div></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/pan-on-scroll-mode"><div class="sidebar-title">PanOnScrollMode</div></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"><div class="sidebar-title">PanelPosition</div></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"><div class="sidebar-title">Position</div></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/pro-options"><div class="sidebar-title">ProOptions</div></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/react-flow-instance"><div class="sidebar-title">ReactFlowInstance</div></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/react-flow-json-object"><div class="sidebar-title">ReactFlowJsonObject</div></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/resize-params"><div class="sidebar-title">ResizeParams</div></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"><div class="sidebar-title">Viewport</div></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"><div class="sidebar-title">XYPosition</div></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"><div class="sidebar-title">addEdge()</div></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/apply-edge-changes"><div class="sidebar-title">applyEdgeChanges()</div></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/apply-node-changes"><div class="sidebar-title">applyNodeChanges()</div></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"><div class="sidebar-title">getBezierPath()</div></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"><div class="sidebar-title">getConnectedEdges()</div></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"><div class="sidebar-title">getIncomers()</div></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"><div class="sidebar-title">getNodesBounds()</div></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"><div class="sidebar-title">getOutgoers()</div></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"><div class="sidebar-title">getSimpleBezierPath()</div></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"><div class="sidebar-title">getSmoothStepPath()</div></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"><div class="sidebar-title">getStraightPath()</div></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-transform-for-bounds"><div class="sidebar-title">getTransformForBounds()</div></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"><div class="sidebar-title">getViewportForBounds()</div></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"><div class="sidebar-title">isEdge()</div></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"><div class="sidebar-title">isNode()</div></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/reconnect-edge"><div class="sidebar-title">reconnectEdge()</div></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/add-node-on-edge-drop"><div class="sidebar-title">Add Node on Edge Drop</div></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"><div class="sidebar-title">Connection Limit</div></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/custom-node"><div class="sidebar-title">Custom Node</div></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/delete-middle-node"><div class="sidebar-title">Delete Middle Node</div></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"><div class="sidebar-title">Drag Handle</div></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"><div class="sidebar-title">Easy Connect</div></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/hidden"><div class="sidebar-title">Hidden</div></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"><div class="sidebar-title">Intersections</div></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"><div class="sidebar-title">Node Resizer</div></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-toolbar"><div class="sidebar-title">Node Toolbar</div></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"><div class="sidebar-title">Proximity Connect</div></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/rotatable-node"><div class="sidebar-title">Rotatable Node</div></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"><div class="sidebar-title">Stress</div></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"><div class="sidebar-title">Update Node</div></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/shapes"><div class="sidebar-title pro pill">Shapes</div></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/dynamic-grouping"><div class="sidebar-title pro pill">Dynamic Grouping</div></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/animating-edges"><div class="sidebar-title">Animating Edges</div></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-connectionline"><div class="sidebar-title">Custom Connectionline</div></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"><div class="sidebar-title">Custom Edges</div></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/delete-edge-on-drop"><div class="sidebar-title">Delete Edge on Drop</div></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"><div class="sidebar-title">Edge Label Renderer</div></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-intersection"><div class="sidebar-title">Edge Intersection</div></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"><div class="sidebar-title">Edge Types</div></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/floating-edges"><div class="sidebar-title">Floating Edges</div></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/markers"><div class="sidebar-title">Markers</div></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/multi-connection-line"><div class="sidebar-title">Multi Connection Line</div></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/reconnect-edge"><div class="sidebar-title">Reconnect Edge</div></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"><div class="sidebar-title">Simple Floating Edges</div></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/temporary-edges"><div class="sidebar-title">Temporary Edges</div></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/editable-edge"><div class="sidebar-title pro pill">Editable Edge</div></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"><div class="sidebar-title">Computing Flows</div></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/connection-events"><div class="sidebar-title">Connection Events</div></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"><div class="sidebar-title">Context Menu</div></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"><div class="sidebar-title">Contextual Zoom</div></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"><div class="sidebar-title">Drag and Drop</div></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/interaction-props"><div class="sidebar-title">Interaction Props</div></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/prevent-cycles"><div class="sidebar-title">Prevent Cycles</div></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/save-and-restore"><div class="sidebar-title">Save and Restore</div></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/touch-device"><div class="sidebar-title">Touch Device</div></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"><div class="sidebar-title">Validation</div></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/zoom-transitions"><div class="sidebar-title">Zoom Transitions</div></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/collaborative"><div class="sidebar-title pro pill">Collaborative</div></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/copy-paste"><div class="sidebar-title pro pill">Copy Paste</div></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/helper-lines"><div class="sidebar-title pro free pill">Helper Lines</div></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/undo-redo"><div class="sidebar-title pro pill">Undo Redo</div></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"><div class="sidebar-title">Dagre</div></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"><div class="sidebar-title">Elkjs</div></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-multiple-handles"><div class="sidebar-title">Elkjs Multiple Handles</div></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/entitree-flex"><div class="sidebar-title">Entitree Flex</div></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"><div class="sidebar-title">Horizontal</div></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/sub-flows"><div class="sidebar-title">Sub Flows</div></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/dynamic-layouting"><div class="sidebar-title pro pill">Dynamic Layouting</div></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/auto-layout"><div class="sidebar-title pro pill">Auto Layout</div></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/expand-collapse"><div class="sidebar-title pro pill">Expand Collapse</div></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/force-layout"><div class="sidebar-title pro pill">Force Layout</div></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"><div class="sidebar-title">Base Style</div></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"><div class="sidebar-title">Dark Mode</div></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/styled-components"><div class="sidebar-title">Styled Components</div></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"><div class="sidebar-title">Tailwind</div></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"><div class="sidebar-title">Turbo Flow</div></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"><div class="sidebar-title">Download Image</div></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/provider"><div class="sidebar-title">Provider</div></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-react-flow-hook"><div class="sidebar-title">Use React Flow Hook</div></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/static-server-side-generation"><div class="sidebar-title pro pill">Static Server Side Generation</div></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="/components" type="button" data-headlessui-state="">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 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="/components">Introduction</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="/components/templates" type="button" data-headlessui-state="">Templates<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="/components/templates/workflow-editor"><div class="sidebar-title pro pill">Workflow Editor</div></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="/components/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="/components/nodes/tooltip-node"><div class="sidebar-title">Tooltip</div></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="/components/nodes/placeholder-node"><div class="sidebar-title">Placeholder</div></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="/components/nodes/database-schema-node"><div class="sidebar-title">Database Schema</div></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="/components/nodes/annotation-node"><div class="sidebar-title">Annotation</div></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="/components/nodes/labeled-group-node"><div class="sidebar-title">Group with Label</div></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="/components/nodes/node-header"><div class="sidebar-title">Node Header</div></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="/components/nodes/base-node"><div class="sidebar-title">Base Node</div></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="/components/nodes/node-status-indicator"><div class="sidebar-title">Node Status Indicator</div></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="/components/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="/components/edges/button-edge"><div class="sidebar-title">Edge with Button</div></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="/components/edges/data-edge"><div class="sidebar-title">Edge with Node Data</div></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="/components/edges/animated-svg-edge"><div class="sidebar-title">Animated SVG Edge</div></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="/components/controls" type="button" data-headlessui-state="">Controls<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="/components/controls/zoom-slider"><div class="sidebar-title">Zoom Slider</div></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="/components/controls/zoom-select"><div class="sidebar-title">Zoom Select</div></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="/components/handles" type="button" data-headlessui-state="">Handles<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="/components/handles/labeled-handle"><div class="sidebar-title">Handle with Label</div></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="/components/handles/base-handle"><div class="sidebar-title">Base Handle</div></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="/components/handles/button-handle"><div class="sidebar-title">Button Handle</div></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="/components/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="/components/misc/devtools"><div class="sidebar-title">DevTools</div></a></li></ul></div></li><li class="[word-break:break-word] x:my-4"><hr class="x:mx-2 x:border-t nextra-border"/></li><li class=""><a href="https://github.com/xyflow/web/discussions/new?category=ui-component-requests" 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">Request a Component <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><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/showcase">Showcase</a></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" type="button" data-headlessui-state="">More<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/whats-new">Changelog</a></li><li class=""><a href="https://xyflow.com/blog" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Blog <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li><li class=""><a href="https://xyflow.com/contact" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Contact Us <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li></ul></div></li></ul></aside><main class="pt-10 lg:pt-14 2xl:pt-18 pb-24 mx-auto x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] h-[600px] lg:h-[550px] xl:h-[600px] -mt-10 lg:-mt-14 2xl:-mt-18"><div class="pointer-events-none x:max-w-(--nextra-content-width) w-full absolute left-1/2 top-8 lg:top-[130px] -translate-x-1/2 z-10"><div style="pointer-events:all" class="text-center mx-auto lg:mx-0 lg:text-left max-w-lg relative bg-white/10 backdrop-blur-[2px] px-3 lg:px-[35px]"><h1 class="tracking-[-0.02rem] text-5xl lg:text-6xl mb-4 font-black">Wire Your Ideas with <span class="text-primary">React Flow</span></h1><h2 class="mb-4 lg:mb-6 text-xl">A customizable React component for building node-based editors and interactive diagrams</h2><div class="flex justify-center lg:justify-start"><div class="flex"><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 px-6 h-10 text-md rounded-full mr-3" href="/learn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"></path></svg>Quickstart</a><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full" href="/pro"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"></path></svg> React Flow Pro</a></div></div></div></div><div class="w-full h-full bg-gradient bg-no-repeat bg-[center_120px] lg:bg-[65%_center] lg:bg-[length:35%]"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" id="hero"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div id="react-flow__node-desc-hero" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-hero" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-hero" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div></div><div class="my-16 lg:my-24 mt-6 lg:mt-10 lg:px-10"><div class="lg:grid lg:grid-cols-7 lg:gap-20"><div class="lg:col-span-4 flex place-content-between lg:space-x-24 grow"><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">28.7K</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">Github Stars</p></div><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">1.32M</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">Weekly Installs</p></div><div class="text-center"><h2 class="tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl">MIT</h2><p class="whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg">License</p></div></div><div class="lg:col-span-3 mt-8 lg:mt-0"><p class="text-light text-lg leading-tight">React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro.</p><a class="inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full max-md:w-full mt-5" href="/pro"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-5 h-5 mr-1"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"></path></svg> React Flow Pro</a></div></div></div><div class="relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] x:max-w-(--nextra-content-width) lg:ml-0 lg:mr-0 lg:right-0 lg:left-0 lg:w-full !mt-0"><div class="flex border border-gray-700 text-white bg-black rounded-none border-none p-0 mt-16 lg:mt-24 lg:p-1.5 lg:rounded-3xl"><div class="shadow-md relative overflow-hidden flex-grow border border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-none border-none lg:rounded-[18px] lg:border-solid lg:border-gray-700"><div class="px-4 pt-12 pb-4"><p class="text-lg leading-tight font-bold mb-2 text-center text-primary">Getting Started with React Flow</p><p class="text-base leading-relaxed text-center max-w-lg mx-auto mb-6 lg:mb-8">Make sure you’ve installed npm, pnpm or yarn. Then you can install React Flow via:</p><div class="border border-solid border-gray-700 rounded-md max-w-3xl mx-auto bg-black/90"><div class="flex p-4"><div class="w-3 h-3 bg-red-400 rounded-full mr-2"></div><div class="w-3 h-3 bg-yellow-400 rounded-full mr-2"></div><div class="w-3 h-3 bg-green-400 rounded-full mr-2"></div></div><div class="px-4 pl-8 pb-6 py-2"><div class="!pl-0 inline text-md font-mono">npm install <span class="text-primary">@xyflow/react</span></div></div></div></div><div class="flex justify-center mt-5 py-3 bg-black/90 border-t border-gray-700"><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline shadow-none !px-0 py-2 h-9 px-6 text-white font-bold" href="/learn">See full Quickstart guide <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="ml-2 w-4 h-4 stroke-2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"></path></svg></a></div></div></div></div><div class="my-16 lg:my-24"><div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[3] mb-16 md:mb-24"><div class="flex flex-col justify-center mb-4 order-1"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">Ready out-of-the-box</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing elements are all built-in.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn">Get started</a></div></div><div class="order-2"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow light" id="a"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0" data-testid="rf__background"><pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="translate(-11,-11)"><circle cx="0.5" cy="0.5" r="0.5" class="react-flow__background-pattern dots"></circle></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1)"></rect></svg><div class="react-flow__panel react-flow__controls vertical bottom left" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="fit view" aria-label="fit view"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button></div><div id="react-flow__node-desc-a" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-a" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-a" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="source-0" data-position="bottom" data-to="target-1" class="port absolute hidden w-[18px] h-[18px] -bottom-[18px] right-10 md:left-1/2 md:right-auto source"><div class="bg-gray-50 rounded-b-full shadow-md absolute w-10 h-7 left-1/2 -translate-x-1/2 top-0"></div><div data-portid="source-0" data-position="bottom" data-to="target-1" class="absolute rounded-full border-2 border-solid bg-white z-20 border-primary w-[18px] h-[18px] shadow-md"></div><svg class="absolute pointer-events-none overflow-visible"><path class="fill-none stroke-2 stroke-primary" style="stroke-dasharray:4 2"></path></svg></div></div></div></div></div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[2] mb-16 md:mb-24"><div class="flex flex-col justify-center mb-4 order-2"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">Powered by us.<br/>Designed by you.</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">React Flow nodes are simply React components, ready for your interactive elements. We play nice with Tailwind and plain old CSS.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn/customization/custom-nodes">Custom nodes guide</a></div></div><div class="order-1"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow darkflow home-flow-b light" id="b"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><div class="react-flow__panel react-flow__controls vertical top right" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button></div><div id="react-flow__node-desc-b" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-b" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-b" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="target-1" data-position="top" class="port absolute hidden w-[18px] h-[18px] -top-4 left-10 md:left-1/2 target"><div data-portid="target-1" data-position="top" class="absolute rounded-full border-2 z-20 border-primary w-[18px] h-[18px] border-none bg-transparent"></div></div><div data-portid="source-1" data-position="bottom" data-to="target-2" class="port absolute hidden w-[18px] h-[18px] -bottom-[18px] right-10 md:left-1/2 md:right-auto source"><div class="bg-gray-50 rounded-b-full shadow-md absolute w-10 h-7 left-1/2 -translate-x-1/2 top-0"></div><div data-portid="source-1" data-position="bottom" data-to="target-2" class="absolute rounded-full border-2 border-solid bg-white z-20 border-primary w-[18px] h-[18px] shadow-md"></div><svg class="absolute pointer-events-none overflow-visible"><path class="fill-none stroke-2 stroke-primary" style="stroke-dasharray:4 2"></path></svg></div></div></div></div></div><div class="relative md:grid md:grid-cols-2 md:gap-8 z-[1]"><div class="flex flex-col justify-center mb-4 order-1"><div><h2 class="tracking-[-0.02rem] text-4xl lg:text-5xl font-bold mb-4">All the right plugins</h2><p class="text-light text-base leading-relaxed mb-8 mt-2 max-w-md">Make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.</p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6" href="/learn/concepts/built-in-components">Read more</a></div></div><div class="order-2"><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl relative"><div class="shadow-md relative flex-grow border border-solid border-gray-100 bg-white rounded-[22px] overflow-visible"><div class="h-[300px] md:h-[400px] rounded-[18px] overflow-hidden bg-gradient-to-br from-white to-gray-50"><div data-testid="rf__wrapper" style="width:100%;height:100%;overflow:hidden;position:relative;z-index:0" class="react-flow home-flow-c light" id="c"><div class="react-flow__renderer" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__pane draggable" style="position:absolute;width:100%;height:100%;top:0;left:0"><div class="react-flow__viewport xyflow__viewport react-flow__container" style="transform:translate(0px,0px) scale(1)"><div class="react-flow__edges"></div><div class="react-flow__edgelabel-renderer"></div><div class="react-flow__nodes" style="position:absolute;width:100%;height:100%;top:0;left:0"></div><div class="react-flow__viewport-portal"></div></div></div></div><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:#f2f2f2" data-testid="rf__background"><pattern id="pattern-1b-1" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="translate(-6,-6)"><path stroke-width="1" d="M5 0 V10 M0 5 H10" class="react-flow__background-pattern lines"></path></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1b-1)"></rect></svg><svg class="react-flow__background" style="position:absolute;width:100%;height:100%;top:0;left:0;--xy-background-pattern-color-props:#eee" data-testid="rf__background"><pattern id="pattern-1b-2" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(-51,-51)"><path stroke-width="2" d="M50 0 V100 M0 50 H100" class="react-flow__background-pattern lines"></path></pattern><rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1b-2)"></rect></svg><div class="react-flow__panel react-flow__controls vertical bottom left" style="pointer-events:all" data-testid="rf__controls" aria-label="React Flow controls"><button type="button" class="react-flow__controls-button react-flow__controls-zoomin" title="zoom in" aria-label="zoom in"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-zoomout" title="zoom out" aria-label="zoom out"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg></button><button type="button" class="react-flow__controls-button react-flow__controls-fitview" title="fit view" aria-label="fit view"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg></button></div><div class="react-flow__panel react-flow__minimap bottom right" style="height:100px;pointer-events:all" data-testid="rf__minimap"><svg width="200" height="100" viewBox="0 0 0 0" class="react-flow__minimap-svg" role="img" aria-labelledby="react-flow__minimap-desc-1"><title id="react-flow__minimap-desc-1">React Flow mini map</title><path class="react-flow__minimap-mask" d="M0,0h0v0h0z M0,0h0v0h0z" fill-rule="evenodd" pointer-events="none"></path></svg></div><div id="react-flow__node-desc-c" style="display:none">Press enter or space to select a node.You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel. </div><div id="react-flow__edge-desc-c" style="display:none">Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.</div><div id="react-flow__aria-live-c" aria-live="assertive" aria-atomic="true" style="position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);clip-path:inset(100%)"></div></div></div><div data-portid="target-2" data-position="top" class="port absolute hidden w-[18px] h-[18px] -top-4 left-10 md:left-1/2 target"><div data-portid="target-2" data-position="top" class="absolute rounded-full border-2 z-20 border-primary w-[18px] h-[18px] border-none bg-transparent"></div></div></div></div></div></div></div></div><div class="my-16 lg:my-24"><div class="flex flex-col items-center w-full"><p class="text-light text-base leading-relaxed mb-8">Used By</p><div class="grid md:grid-cols-4 grid-cols-2 md:gap-12 gap-8 place-items-center"><img alt="zapier" loading="lazy" width="105" height="28" decoding="async" data-nimg="1" class="h-7 w-auto" style="color:transparent" src="/_next/static/media/zapier.b5b0dc13.svg"/><img alt="stripe" loading="lazy" width="54" height="23" decoding="async" data-nimg="1" class="h-7 w-auto" style="color:transparent" src="/_next/static/media/stripe.af951a3e.svg"/><img alt="carto workflows" loading="lazy" width="78" height="30" decoding="async" data-nimg="1" class="h-9 w-auto" style="color:transparent" src="/_next/static/media/carto.d497813c.svg"/><img alt="close" loading="lazy" width="237" height="64" decoding="async" data-nimg="1" class="h-7 w-auto" style="color:transparent" src="/_next/static/media/close.d4b07d68.svg"/><img alt="railway" loading="lazy" width="3733" height="1024" decoding="async" data-nimg="1" class="h-9 w-auto" style="color:transparent" src="/_next/static/media/railway.ab3a3093.svg"/><img alt="retool" loading="lazy" width="112" height="24" decoding="async" data-nimg="1" class="h-6 w-auto" style="color:transparent" src="/_next/static/media/retool.0d8c5632.svg"/><img alt="doubleloop" loading="lazy" width="128" height="24" decoding="async" data-nimg="1" class="h-7 w-auto" style="color:transparent" src="/_next/static/media/doubleloop.30d66616.svg"/><img alt="onesignal" loading="lazy" width="172" height="40" decoding="async" data-nimg="1" class="h-7 w-auto" style="color:transparent" src="/_next/static/media/onesignal.ce83a95c.svg"/></div></div></div><div class="p-2 flex border border-solid border-gray-700 text-white bg-black rounded-3xl"><div class="shadow-md relative overflow-hidden flex-grow border border-solid border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-[22px]"><div class="p-4 md:p-8 lg:p-14"><div class="grid lg:grid-cols-2 lg:gap-40"><div><p class="text-base leading-relaxed font-bold mb-2 text-accent tracking-wide">Project Showcase</p><h2 class="text-5xl lg:text-6xl font-black leading mb-4 tracking-normal">Used by thousands of people</h2></div><div><p class="text-base leading-relaxed mt-4 mb-4"> From solo open-source developers, to companies like Stripe and Typeform. We’ve seen the library used for data processing tools, chatbot builders, machine learning, musical synthesizers, and more. </p><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-secondary text-secondary-foreground hover:bg-gray-50 border border-solid border-gray-100 py-2 h-9 px-6" href="/showcase">See all projects</a></div></div><div class="mt-8"><div dir="ltr" data-orientation="horizontal" class="relative"><div class="relative mx-auto aspect-video sm:aspect-auto sm:h-[40vh]"><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R9jtenlb:-trigger-Stripe Docs" id="radix-:R9jtenlb:-content-Stripe Docs" tabindex="0" class="h-full w-full absolute" style="animation-duration:0s"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-out opacity-100"><img alt="Stripe Docs" loading="lazy" decoding="async" data-nimg="fill" class="rounded-xl object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Ffeatured%2Fstripe.png&w=3840&q=75"/></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R9jtenlb:-trigger-DoubleLoop" id="radix-:R9jtenlb:-content-DoubleLoop" tabindex="0" class="h-full w-full absolute"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-in opacity-0"><img alt="DoubleLoop" loading="lazy" decoding="async" data-nimg="fill" class="rounded-xl object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Ffeatured%2Fdoubleloop.png&w=3840&q=75"/></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R9jtenlb:-trigger-TypeForm" id="radix-:R9jtenlb:-content-TypeForm" tabindex="0" class="h-full w-full absolute"><div class="transition duration-300 motion-reduce:transition-none h-full relative ease-in opacity-0"><img alt="TypeForm" loading="lazy" decoding="async" data-nimg="fill" class="rounded-xl object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Ffeatured%2Ftypeform.png&w=3840&q=75"/></div></div></div><div role="tablist" aria-orientation="horizontal" class="mb-4 border-b border-gray-200 flex justify-around gap-8 mt-8 bg-transparent border-none" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-:R9jtenlb:-content-Stripe Docs" data-state="active" id="radix-:R9jtenlb:-trigger-Stripe Docs" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none flex" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"><div class="h-full rounded bg-gradient-to-r from-accent/40 to-accent/70 transition-all duration-200 ease-linear" style="width:0%"></div></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-100"><p class="text-base leading-relaxed my-2 font-mono">Stripe Docs</p><p class="text-base leading-snug opacity-80">Diagrams for process documentation with interactive nodes</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R9jtenlb:-content-DoubleLoop" data-state="inactive" id="radix-:R9jtenlb:-trigger-DoubleLoop" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none hidden" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-40"><p class="text-base leading-relaxed my-2 font-mono">DoubleLoop</p><p class="text-base leading-snug opacity-80">Node-based dashboard builder to monitor business metrics</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R9jtenlb:-content-TypeForm" data-state="inactive" id="radix-:R9jtenlb:-trigger-TypeForm" class="p-2 font-medium border-b-2 border-transparent rounded-none -mb-px data-[state=active]:border-primary data-[state=active]:text-primary hover:text-primary w-full sm:flex flex-col group border-none hidden" tabindex="-1" data-orientation="horizontal" data-radix-collection-item=""><div class="h-1.5 rounded bg-black/20 w-full"></div><div class="text-muted transition duration-300 motion-reduce:transition-none group-hover:opacity-100 px-2 md:px-4 opacity-40"><p class="text-base leading-relaxed my-2 font-mono">TypeForm</p><p class="text-base leading-snug opacity-80">Interactive tool to build and visualize complex survey logic</p></div></button></div></div></div></div></div></div><div class="my-16 lg:my-24 relative"><ol class="grid grid-cols-1 lg:grid-cols-2 rounded-3xl border border-gray-100 gap-x-8 p-8 w-full"><li role="article" class="row-span-2 h-full flex items-center p-4 py-8"><div class="space-y-4"><header class="space-y-2"><p class="text-sm text-light"><time class="">1 week ago</time></p><h1 class="text-2xl font-semibold"><a href="/whats-new/2025-03-27">React Flow 12.5.0</a></h1><div class="flex flex-wrap"><div class="flex items-center mr-4 mb-4"><div class="inline-flex items-end gap-2 text-sm"><a href="https://twitter.com/xyflowdev">xyflow team</a><span class="user-select-none text-light"> – </span><div class="text-light">✌️</div></div></div></div></header><p>Changelog for React Flow version 12.5.0</p><footer><p class="text-primary text-sm mt-4 inline-flex items-center"><a class="hover:underline" href="/whats-new/2025-03-27">Check it out here</a><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z" clip-rule="evenodd"></path></svg></p></footer></div></li><li role="article" class="border-b border-gray-100 p-4 py-8"><div class="space-y-4"><header class="space-y-2"><p class="text-sm text-light"><time class="">1 month ago</time></p><h1 class="text-lg font-semibold"><a href="/whats-new/2025-02-12">React Flow 12.4.3</a></h1><div class="flex flex-wrap"><div class="flex items-center mr-4 mb-4"><div class="inline-flex items-end gap-2 text-sm"><a href="https://twitter.com/xyflowdev">xyflow team</a><span class="user-select-none text-light"> – </span><div class="text-light">✌️</div></div></div></div></header><p>Changelog for React Flow version 12.4.3</p></div></li><li role="article" class="p-4 py-8"><div class="space-y-4"><header class="space-y-2"><p class="text-sm text-light"><time class="">2 months ago</time></p><h1 class="text-lg font-semibold"><a href="/whats-new/2025-01-21">React Flow 12.4.2</a></h1><div class="flex flex-wrap"><div class="flex items-center mr-4 mb-4"><div class="inline-flex items-end gap-2 text-sm"><a href="https://twitter.com/xyflowdev">xyflow team</a><span class="user-select-none text-light"> – </span><div class="text-light">✌️</div></div></div></div></header><p>Changelog for React Flow version 12.4.2</p></div></li></ol><div class="lg:hidden h-[50%] w-full bg-gradient-to-b from-transparent via-white/70 to-white absolute bottom-0 pointer-events-none"></div></div><div class="my-16 lg:my-24"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-2">A project by the xyflow team</h2><p class="text-light text-base leading-relaxed text-center max-w-xl mx-auto mb-6">We are Christopher, Peter, Abbey and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them</p><div class="flex flex-wrap justify-center space-x-8 mb-16"><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/blog">Blog <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/about">About us <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/open-source">Open Source <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a><a class="inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center" href="https://xyflow.com/contact">Contact Us <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4 ml-1"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></a></div></div><div class="grid border-t border-solid border-gray-100 grid-cols-1 lg:grid-cols-2 mt-16 lg:mt-24"><a href="https://svelteflow.dev" class="lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer" target="_blank" rel="noopener noreferrer"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center"><div class="w-8 h-8 mr-2 text-[#ff4000]"><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> Svelte Flow</h2><p class="text-light text-base leading-relaxed mt-2 mb-4">A customizable Svelte component for building node-based editors and interactive diagrams</p><span class="flex items-center text-[#ff4000]">Visit Website <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="ml-1 w-4 h-4"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></span></a><a href="https://xyflow.com" class="lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer" target="_blank" rel="noopener noreferrer"><h2 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center"><div class="w-8 h-8 mr-2 text-[#000]"><svg width="100%" height="100%" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35 3H25C23.8954 3 23 3.89543 23 5V15C23 16.1046 23.8954 17 25 17H35C36.1046 17 37 16.1046 37 15V5C37 3.89543 36.1046 3 35 3Z" stroke-width="2" fill="none" stroke="currentColor" data-path="animation"></path><path d="M35 23H25C23.8954 23 23 23.8954 23 25V35C23 36.1046 23.8954 37 25 37H35C36.1046 37 37 36.1046 37 35V25C37 23.8954 36.1046 23 35 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 23H5C3.89543 23 3 23.8954 3 25V35C3 36.1046 3.89543 37 5 37H15C16.1046 37 17 36.1046 17 35V25C17 23.8954 16.1046 23 15 23Z" stroke="#1A192B" stroke-width="2"></path><path d="M15 3H5C3.89543 3 3 3.89543 3 5V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V5C17 3.89543 16.1046 3 15 3Z" stroke="#1A192B" stroke-width="2"></path><path d="M17 13C18.6569 13 20 11.6569 20 10C20 8.34315 18.6569 7 17 7C15.3431 7 14 8.34315 14 10C14 11.6569 15.3431 13 17 13Z" fill="white"></path><path d="M23 13C24.6569 13 26 11.6569 26 10C26 8.34315 24.6569 7 23 7C21.3431 7 20 8.34315 20 10C20 11.6569 21.3431 13 23 13Z" fill="white"></path><path d="M30 20C31.6569 20 33 18.6569 33 17C33 15.3431 31.6569 14 30 14C28.3431 14 27 15.3431 27 17C27 18.6569 28.3431 20 30 20Z" fill="white"></path><path d="M30 26C31.6569 26 33 24.6569 33 23C33 21.3431 31.6569 20 30 20C28.3431 20 27 21.3431 27 23C27 24.6569 28.3431 26 30 26Z" fill="white"></path><path d="M17 33C18.6569 33 20 31.6569 20 30C20 28.3431 18.6569 27 17 27C15.3431 27 14 28.3431 14 30C14 31.6569 15.3431 33 17 33Z" fill="white"></path><path d="M23 33C24.6569 33 26 31.6569 26 30C26 28.3431 24.6569 27 23 27C21.3431 27 20 28.3431 20 30C20 31.6569 21.3431 33 23 33Z" fill="white"></path><path d="M30 25C31.1046 25 32 24.1046 32 23C32 21.8954 31.1046 21 30 21C28.8954 21 28 21.8954 28 23C28 24.1046 28.8954 25 30 25Z" fill="#1A192B"></path><path d="M17 32C18.1046 32 19 31.1046 19 30C19 28.8954 18.1046 28 17 28C15.8954 28 15 28.8954 15 30C15 31.1046 15.8954 32 17 32Z" fill="#1A192B"></path><path d="M23 32C24.1046 32 25 31.1046 25 30C25 28.8954 24.1046 28 23 28C21.8954 28 21 28.8954 21 30C21 31.1046 21.8954 32 23 32Z" fill="#1A192B"></path><path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" fill="#1A192B"></path><path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" fill="#1A192B"></path><path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" fill="#1A192B"></path><path d="M17 12C18.1046 12 19 11.1046 19 10C19 8.89543 18.1046 8 17 8C15.8954 8 15 8.89543 15 10C15 11.1046 15.8954 12 17 12Z" fill="#1A192B"></path><path d="M23 12C24.1046 12 25 11.1046 25 10C25 8.89543 24.1046 8 23 8C21.8954 8 21 8.89543 21 10C21 11.1046 21.8954 12 23 12Z" fill="currentColor"></path><path d="M30 19C31.1046 19 32 18.1046 32 17C32 15.8954 31.1046 15 30 15C28.8954 15 28 15.8954 28 17C28 18.1046 28.8954 19 30 19Z" fill="currentColor"></path></svg></div> xyflow</h2><p class="text-light text-base leading-relaxed mt-2 mb-4">The team behind React Flow and Svelte Flow. Read updates and blog posts from us and about how we approach open source development.</p><span class="flex items-center text-[#000]">Visit Website <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="ml-1 w-4 h-4"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clip-rule="evenodd"></path></svg></span></a></div></main><footer class="print:bg-transparent py-12 lg:py-18 bg-black text-white"><div class="mx-auto lg:flex x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="lg:max-w-[300px] md:max-w-[600px] lg:mr-24 shrink-0"><p class="text-light text-base leading-relaxed mb-2">A project by the xyflow team</p><div class="font-black text-3xl tracking-tight leading-none mb-6 lg:mb-10">We are building and maintaining open source software for node-based UIs since 2019.</div></div><div class="grow"><div class="flex flex-col grow h-[100%]"><div class="grid grid-cols-2 lg:grid-cols-4 grid-gap-4"><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Docs</p><a class="block" href="/learn">Getting Started</a><a class="block" href="/api-reference">API Reference</a><a class="block" href="/examples">Examples</a><a class="block" href="/showcase">Showcase</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><a class="block" href="https://xyflow.com/imprint">Imprint</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-934bf796b5ad2aea.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n5:I[22520,[],\"OutletBoundary\"]\n7:I[22520,[],\"MetadataBoundary\"]\n9:I[22520,[],\"ViewportBoundary\"]\nb: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/8d0afe8b4225d80e.css\",\"style\"]\n:HL[\"/_next/static/css/d60be7727a3ad5a8.css\",\"style\"]\n0:{\"P\":null,\"b\":\"RVhj74_zYOZK7hSRq6oqW\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(content-pages)\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/346c8d13d90d8145.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e54dab27a5b3bf74.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/8d0afe8b4225d80e.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\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L4\",null,[\"$\",\"$L5\",null,{\"children\":\"$L6\"}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"wsiXFXtBG7KcBlE7CYXwj\",{\"children\":[[\"$\",\"$L7\",null,{\"children\":\"$L8\"}],[\"$\",\"$L9\",null,{\"children\":\"$La\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$b\",\""])</script><script>self.__next_f.push([1,"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"c:I[51555,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"7177\",\"static/chunks/app/layout-4372103b1864c4cb.js\"],\"Html\"]\nd:I[75356,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Fathom\"]\ne:I[72499,[],\"\"]\nf:I[2671,[],\"\"]\n"])</script><script>self.__next_f.push([1,"2:[\"$\",\"$Lc\",null,{\"children\":[[\"$\",\"head\",null,{\"children\":[\"$undefined\",[\"$\",\"style\",null,{\"children\":\":root {\\n --nextra-primary-hue: 333deg;\\n --nextra-primary-saturation: 80%;\\n --nextra-primary-lightness: 45%;\\n --nextra-bg: 250,250,250;\\n --nextra-content-width: 90rem;\\n}\\n.dark {\\n --nextra-primary-hue: 333deg;\\n --nextra-primary-saturation: 80%;\\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)\"}],\"$undefined\"]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$Ld\",null,{\"id\":\"LXMRMWLB\",\"domains\":[\"reactflow.dev\"]}],[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[],[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"8:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Node-Based UIs in React - React Flow\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more\"}],[\"$\",\"meta\",\"3\",{\"name\":\"application-name\",\"content\":\"React Flow\"}],[\"$\",\"meta\",\"4\",{\"name\":\"generator\",\"content\":\"Next.js\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"react,node-based UI,graph,diagram,workflow,react-flow,xyflow\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index,follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"docsearch:site\",\"content\":\"react\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://reactflow.dev\"}],[\"$\",\"meta\",\"9\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"10\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"React Flow\"}],[\"$\",\"meta\",\"11\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:title\",\"content\":\"Node-Based UIs in React - React Flow\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://reactflow.dev\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:site_name\",\"content\":\"React 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://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a\"}],[\"$\",\"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\":\"Node-Based UIs in React - React Flow\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:description\",\"content\":\"Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more\"}],[\"$\",\"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://reactflow.dev/opengraph-image.jpg?41910ad66a20ba6a\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"256x256\"}],[\"$\",\"link\",\"32\",{\"rel\":\"icon\",\"href\":\"/icon.svg?cdcb199d9e2211be\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}],[\"$\",\"link\",\"33\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?fd280f37a7ca70a3\",\"type\":\"image/png\",\"sizes\":\"180x180\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script><script>self.__next_f.push([1,"10:I[29812,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"ThemeConfigProvider\"]\n11:I[18246,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"LastUpdated\"]\n13:I[48855,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\","])</script><script>self.__next_f.push([1,"\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"350\",\"static/chunks/350-6aebeaaf1444c430.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"3237\",\"static/chunks/app/(content-pages)/layout-b130605a7014ebcf.js\"],\"ThemeProvider\"]\n14:I[16368,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"SkipNavLink\"]\n15:I[23922,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/"])</script><script>self.__next_f.push([1,"1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"ConfigProvider\"]\n16:I[27774,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"LogoLabel\"]\n17:I[68027,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98"])</script><script>self.__next_f.push([1,"993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"ClientNavbar\"]\n18:I[23023,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Search\"]\n1a:I[21962,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"stati"])</script><script>self.__next_f.push([1,"c/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"\"]\n1b:I[96876,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"MobileNav\"]\n1c:I[22156,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d"])</script><script>self.__next_f.push([1,"9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"NotFoundLayout\"]\n19: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,"3:[\"$\",\"$L10\",null,{\"value\":{\"darkMode\":false,\"docsRepositoryBase\":\"https://github.com/xyflow/web/tree/main/sites/reactflow.dev\",\"editLink\":\"Edit this page on GitHub\",\"feedback\":{\"content\":null,\"labels\":\"feedback\"},\"i18n\":[],\"lastUpdated\":[\"$\",\"$L11\",null,{}],\"navigation\":{\"next\":true,\"prev\":true},\"search\":null,\"sidebar\":{\"defaultMenuCollapseLevel\":2,\"defaultOpen\":true,\"toggleButton\":false},\"themeSwitch\":{\"dark\":\"Dark\",\"light\":\"Light\",\"system\":\"System\"},\"toc\":{\"backToTop\":null,\"extraContent\":\"$L12\",\"float\":true,\"title\":\"On This Page\"}},\"children\":[\"$\",\"$L13\",null,{\"attribute\":\"class\",\"defaultTheme\":\"light\",\"disableTransitionOnChange\":true,\"forcedTheme\":\"light\",\"children\":[[\"$\",\"$L14\",null,{}],\"$undefined\",[\"$\",\"$L15\",null,{\"pageMap\":[{\"data\":{\"*\":{\"type\":\"page\"},\"learn\":{},\"api-reference\":{\"title\":\"Reference\"},\"examples\":{\"theme\":{\"layout\":\"full\",\"toc\":false}},\"components\":{},\"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\"}}},\"pro\":{\"title\":\"Pricing\",\"display\":\"hidden\"},\"pro-examples\":{\"href\":\"/pro/examples\",\"display\":\"hidden\"},\"case-studies\":{\"href\":\"/pro/case-studies\",\"display\":\"hidden\"},\"contact-us\":{\"href\":\"https://xyflow.com/contact\",\"display\":\"hidden\"},\"index\":{\"display\":\"hidden\"},\"developer-survey-2023\":{\"display\":\"hidden\",\"theme\":{\"footer\":false}},\"developer-survey-2024\":{\"display\":\"hidden\"},\"whats-new\":{\"display\":\"hidden\"}}},{\"name\":\"learn\",\"route\":\"/learn\",\"children\":[{\"data\":{\"index\":{\"title\":\"\"},\"concepts\":{},\"getting-started\":{},\"customization\":{\"title\":\"Customizing React Flow\"},\"layouting\":{\"title\":\"Layouting\"},\"advanced-use\":{},\"tutorials\":{\"theme\":{\"toc\":false}},\"troubleshooting\":{},\"api-reference\":{\"href\":\"/api-reference\"}}},{\"name\":\"index\",\"route\":\"/learn\",\"frontMatter\":{\"description\":\"React Flow quickstart that shows how to install the package, use it and where to find example apps\",\"pagination_next\":null,\"title\":\"Quickstart\",\"filePath\":\"src/content/learn/index.mdx\",\"timestamp\":1742980223000},\"title\":\"Quickstart\"},{\"name\":\"concepts\",\"route\":\"/learn/concepts\",\"children\":[{\"data\":{\"introduction\":{\"title\":\"\"},\"terms-and-definitions\":{\"title\":\"\"},\"core-concepts\":{\"title\":\"\"},\"the-viewport\":{\"title\":\"\"}}},{\"name\":\"introduction\",\"route\":\"/learn/concepts/introduction\",\"frontMatter\":{\"description\":\"React Flow is a library for building node-based applications from static diagrams to complex editors. It comes with built-in plugins like a mini map and graph controls, and nodes and edges are highly customizable.\",\"title\":\"Introduction\",\"filePath\":\"src/content/learn/concepts/introduction.mdx\",\"timestamp\":1742980223000},\"title\":\"Introduction\"},{\"name\":\"terms-and-definitions\",\"route\":\"/learn/concepts/terms-and-definitions\",\"frontMatter\":{\"description\":\"Learn about the basic terms and definitions of React Flow\",\"title\":\"Terms and Definitions\",\"filePath\":\"src/content/learn/concepts/terms-and-definitions.mdx\",\"timestamp\":1742980223000},\"title\":\"Terms and Definitions\"},{\"name\":\"core-concepts\",\"route\":\"/learn/concepts/core-concepts\",\"frontMatter\":{\"description\":\"We'll show you the basic functionality of React Flow including connecting nodes and making controlled and uncontrolled flows.\",\"title\":\"Core Concepts\",\"filePath\":\"src/content/learn/concepts/core-concepts.mdx\",\"timestamp\":1742980223000},\"title\":\"Core Concepts\"},{\"name\":\"the-viewport\",\"route\":\"/learn/concepts/the-viewport\",\"frontMatter\":{\"sidebarTitle\":\"The Viewport\",\"description\":\"Learn how to customize the panning and zooming behavior of React Flow.\",\"title\":\"Panning and Zooming\",\"filePath\":\"src/content/learn/concepts/the-viewport.mdx\",\"timestamp\":1742980223000},\"title\":\"The Viewport\"},{\"name\":\"built-in-components\",\"route\":\"/learn/concepts/built-in-components\",\"frontMatter\":{\"description\":\"React Flow comes with several built-in components. Here's an overview of the minimap, controls, background, and panel components.\",\"title\":\"Built-In Components\",\"filePath\":\"src/content/learn/concepts/built-in-components.mdx\",\"timestamp\":1742980223000},\"title\":\"Built-In Components\"}],\"title\":\"Concepts\"},{\"name\":\"getting-started\",\"route\":\"/learn/getting-started\",\"children\":[{\"data\":{\"installation-and-requirements\":{\"title\":\"\"},\"building-a-flow\":{\"title\":\"\"}}},{\"name\":\"installation-and-requirements\",\"route\":\"/learn/getting-started/installation-and-requirements\",\"frontMatter\":{\"sidebarTitle\":\"Installation\",\"description\":\"You can install React Flow using npm, pnpm, or yarn.\",\"title\":\"Installation and Requirements\",\"filePath\":\"src/content/learn/getting-started/installation-and-requirements.mdx\",\"timestamp\":1742980223000},\"title\":\"Installation\"},{\"name\":\"building-a-flow\",\"route\":\"/learn/getting-started/building-a-flow\",\"frontMatter\":{\"description\":\"Learn how to build your first static flow with React Flow.\",\"title\":\"Building a Flow\",\"filePath\":\"src/content/learn/getting-started/building-a-flow.mdx\",\"timestamp\":1742980223000},\"title\":\"Building a Flow\"},{\"name\":\"adding-interactivity\",\"route\":\"/learn/getting-started/adding-interactivity\",\"frontMatter\":{\"description\":\"This guide will show you how to add basic interactivity to your flow.\",\"title\":\"Adding Interactivity\",\"filePath\":\"src/content/learn/getting-started/adding-interactivity.mdx\",\"timestamp\":1742980223000},\"title\":\"Adding Interactivity\"}],\"title\":\"Getting Started\"},{\"name\":\"customization\",\"route\":\"/learn/customization\",\"children\":[{\"data\":{\"custom-nodes\":{\"title\":\"\"},\"custom-edges\":{\"title\":\"\"}}},{\"name\":\"custom-nodes\",\"route\":\"/learn/customization/custom-nodes\",\"frontMatter\":{\"description\":\"Custom nodes in React Flow are just React components. This guide shows you how to implement your own nodes complete with target/source handles.\",\"title\":\"Custom Nodes\",\"filePath\":\"src/content/learn/customization/custom-nodes.mdx\",\"timestamp\":1742980223000},\"title\":\"Custom Nodes\"},{\"name\":\"custom-edges\",\"route\":\"/learn/customization/custom-edges\",\"frontMatter\":{\"description\":\"Like custom nodes, parts of a custom edge in React Flow are just React components. This guide shows you how to implement a custom edge with some additional controls.\",\"title\":\"Custom Edges\",\"filePath\":\"src/content/learn/customization/custom-edges.mdx\",\"timestamp\":1742980223000},\"title\":\"Custom Edges\"},{\"name\":\"theming\",\"route\":\"/learn/customization/theming\",\"frontMatter\":{\"description\":\"React 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 TailwindCSS or Styled Components.\",\"title\":\"Theming\",\"filePath\":\"src/content/learn/customization/theming.mdx\",\"timestamp\":1742980223000},\"title\":\"Theming\"}],\"title\":\"Customizing React Flow\"},{\"name\":\"layouting\",\"route\":\"/learn/layouting\",\"children\":[{\"name\":\"layouting\",\"route\":\"/learn/layouting/layouting\",\"frontMatter\":{\"sidebarTitle\":\"Layouting Libraries\",\"description\":\"React Flow doesn't include any layouting algorithms out of the box. This guide surveys some of the options out there and shows you how to use them with React Flow.\",\"title\":\"Layouting\",\"filePath\":\"src/content/learn/layouting/layouting.mdx\",\"timestamp\":1742980223000},\"title\":\"Layouting Libraries\"},{\"name\":\"sub-flows\",\"route\":\"/learn/layouting/sub-flows\",\"frontMatter\":{\"description\":\"Learn how to use sub flows to group nodes together in a flow.\",\"title\":\"Sub Flows\",\"filePath\":\"src/content/learn/layouting/sub-flows.mdx\",\"timestamp\":1742980223000},\"title\":\"Sub Flows\"}],\"title\":\"Layouting\"},{\"name\":\"advanced-use\",\"route\":\"/learn/advanced-use\",\"children\":[{\"data\":{\"accessibility\":{\"title\":\"\"},\"testing\":{\"title\":\"\"},\"typescript\":{\"title\":\"\"},\"uncontrolled-flow\":{\"title\":\"\"},\"state-management\":{\"title\":\"\"},\"computing-flows\":{\"title\":\"\"},\"ssr-ssg-configuration\":{\"title\":\"\"}}},{\"name\":\"accessibility\",\"route\":\"/learn/advanced-use/accessibility\",\"frontMatter\":{\"description\":\"React Flow is designed to be both keyboard and screen reader accessible.\",\"title\":\"Accessibility\",\"filePath\":\"src/content/learn/advanced-use/accessibility.mdx\",\"timestamp\":1742980223000},\"title\":\"Accessibility\"},{\"name\":\"testing\",\"route\":\"/learn/advanced-use/testing\",\"frontMatter\":{\"description\":\"How to test React Flow applications with Cypress, Playwright or Jest.\",\"title\":\"Testing\",\"filePath\":\"src/content/learn/advanced-use/testing.mdx\",\"timestamp\":1742980223000},\"title\":\"Testing\"},{\"name\":\"typescript\",\"route\":\"/learn/advanced-use/typescript\",\"frontMatter\":{\"sidebarTitle\":\"TypeScript\",\"description\":\"In this guide we explain how to work with React Flow and TypeScript.\",\"title\":\"Usage with TypeScript\",\"filePath\":\"src/content/learn/advanced-use/typescript.mdx\",\"timestamp\":1743625197000},\"title\":\"TypeScript\"},{\"name\":\"uncontrolled-flow\",\"route\":\"/learn/advanced-use/uncontrolled-flow\",\"frontMatter\":{\"description\":\"Uncontrolled inputs in React manage their own state internally. This guide shows you how to set up and use an uncontrolled flow.\",\"title\":\"Uncontrolled Flow\",\"filePath\":\"src/content/learn/advanced-use/uncontrolled-flow.mdx\",\"timestamp\":1742980223000},\"title\":\"Uncontrolled Flow\"},{\"name\":\"state-management\",\"route\":\"/learn/advanced-use/state-management\",\"frontMatter\":{\"sidebarTitle\":\"State Management\",\"description\":\"Learn how to use React Flow with a state management library like Zustand, Redux, Recoil or Jotai.\",\"title\":\"Using a State Management Library\",\"filePath\":\"src/content/learn/advanced-use/state-management.mdx\",\"timestamp\":1742980223000},\"title\":\"State Management\"},{\"name\":\"computing-flows\",\"route\":\"/learn/advanced-use/computing-flows\",\"frontMatter\":{\"description\":\"Learn how to extend React Flow to compute data going through flow graphs.\",\"title\":\"Computing Flows\",\"filePath\":\"src/content/learn/advanced-use/computing-flows.mdx\",\"timestamp\":1742980223000},\"title\":\"Computing Flows\"},{\"name\":\"ssr-ssg-configuration\",\"route\":\"/learn/advanced-use/ssr-ssg-configuration\",\"frontMatter\":{\"title\":\"Server Side Rendering\",\"description\":\"Step-by-step guide render React Flow apps on the server for displaying static flows, dynamically generating images from flows, or rendering graphs in non-javascript environments\",\"filePath\":\"src/content/learn/advanced-use/ssr-ssg-configuration.mdx\",\"timestamp\":1742980223000},\"title\":\"Server Side Rendering\"},{\"name\":\"devtools-and-debugging\",\"route\":\"/learn/advanced-use/devtools-and-debugging\",\"frontMatter\":{\"sidebarTitle\":\"Devtools\",\"description\":\"Copy pastable devtools for React Flow\",\"title\":\"Devtools and Debugging\",\"filePath\":\"src/content/learn/advanced-use/devtools-and-debugging.mdx\",\"timestamp\":1742980223000},\"title\":\"Devtools\"}],\"title\":\"Advanced Use\"},{\"name\":\"tutorials\",\"route\":\"/learn/tutorials\",\"children\":[{\"data\":{\"slide-shows-with-react-flow\":{\"title\":\"\"},\"react-flow-and-the-web-audio-api\":{\"title\":\"\"},\"mind-map-app-with-react-flow\":{\"title\":\"\"}}},{\"name\":\"slide-shows-with-react-flow\",\"route\":\"/learn/tutorials/slide-shows-with-react-flow\",\"frontMatter\":{\"sidebarTitle\":\"Slideshow App\",\"title\":\"Create a slide show presentation with React Flow\",\"intro\":\"We recently published the results of our 2023 end of year survey using React Flow. This tutorial is an opportunity to share what we learned and show you how to build something similar!\",\"date\":\"2024/01/07\",\"authors\":[\"hayleigh\"],\"tags\":[\"react-flow\",\"presentation\",\"slide-show\"],\"image\":\"/img/tutorials/presentation/slideshow-thumb.png\",\"filePath\":\"src/content/learn/tutorials/slide-shows-with-react-flow.mdx\",\"timestamp\":1742980223000},\"title\":\"Slideshow App\"},{\"name\":\"react-flow-and-the-web-audio-api\",\"route\":\"/learn/tutorials/react-flow-and-the-web-audio-api\",\"frontMatter\":{\"sidebarTitle\":\"Web Audio API\",\"title\":\"Integrating React Flow and the Web Audio API\",\"intro\":\"Today we'll be looking at how to create an interactive audio playground using React Flow and the Web Audio API. We'll start from scratch, first learning about the Web Audio API before looking at how to handle many common scenarios in React Flow: state management, implementing custom nodes, and adding interactivity.\",\"date\":\"2023/04/14\",\"authors\":[\"hayleigh\"],\"tags\":[\"react-flow\",\"web-audio-api\",\"how-to\"],\"image\":\"/img/tutorials/webaudio/web-audio-blog-thumb.png\",\"filePath\":\"src/content/learn/tutorials/react-flow-and-the-web-audio-api.mdx\",\"timestamp\":1742980223000},\"title\":\"Web Audio API\"},{\"name\":\"mind-map-app-with-react-flow\",\"route\":\"/learn/tutorials/mind-map-app-with-react-flow\",\"frontMatter\":{\"sidebarTitle\":\"Mind Map App\",\"title\":\"Build a Mind Map App with React Flow\",\"intro\":\"In this tutorial, you will learn to create a simple mind map tool with React Flow that can be used for brainstorming, organizing an idea, or mapping your thoughts in a visual way. To build this app, we'll be using state management, custom nodes and edges, and more.\",\"date\":\"2023/01/10\",\"authors\":[\"moritz\"],\"tags\":[\"react-flow\",\"how-to\",\"mind-map\"],\"image\":\"/img/tutorials/mindmap/mindmap.png\",\"filePath\":\"src/content/learn/tutorials/mind-map-app-with-react-flow.mdx\",\"timestamp\":1742980223000},\"title\":\"Mind Map App\"},{\"name\":\"getting-started-with-react-flow-components\",\"route\":\"/learn/tutorials/getting-started-with-react-flow-components\",\"frontMatter\":{\"sidebarTitle\":\"React Flow Components\",\"title\":\"Getting started with React Flow Components\",\"intro\":\"words\",\"date\":\"2024/01/20\",\"authors\":[\"hayleigh\"],\"tags\":[\"react-flow\",\"components\",\"shadcn\",\"computational\"],\"image\":\"\",\"filePath\":\"src/content/learn/tutorials/getting-started-with-react-flow-components.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow Components\"}],\"frontMatter\":{\"asIndexPage\":true,\"sidebarTitle\":\"Tutorials\",\"description\":\"Tutorials and in-depth guides on how to build with React Flow.\"},\"title\":\"Tutorials\"},{\"name\":\"troubleshooting\",\"route\":\"/learn/troubleshooting\",\"children\":[{\"data\":{\"index\":{\"title\":\"\"},\"remove-attribution\":{\"title\":\"\"},\"migrate-to-v12\":{\"title\":\"\"},\"migrate-to-v11\":{\"title\":\"\"},\"migrate-to-v10\":{\"title\":\"\"}}},{\"name\":\"index\",\"route\":\"/learn/troubleshooting\",\"frontMatter\":{\"sidebarTitle\":\"Common Errors\",\"description\":\"Troubleshooting and fixes for common issues with React Flow.\",\"title\":\"Troubleshooting\",\"filePath\":\"src/content/learn/troubleshooting/index.mdx\",\"timestamp\":1742980223000},\"title\":\"Common Errors\"},{\"name\":\"remove-attribution\",\"route\":\"/learn/troubleshooting/remove-attribution\",\"frontMatter\":{\"description\":\"When and how to remove the React Flow attribution from your flows.\",\"title\":\"Remove Attribution\",\"filePath\":\"src/content/learn/troubleshooting/remove-attribution.mdx\",\"timestamp\":1742980223000},\"title\":\"Remove Attribution\"},{\"name\":\"migrate-to-v12\",\"route\":\"/learn/troubleshooting/migrate-to-v12\",\"frontMatter\":{\"sidebarTitle\":\"Migrate to v12\",\"description\":\"Use this guide to migrate from React Flow 11 to 12.\",\"created_at\":\"2024-07-15\",\"title\":\"Migrate to React Flow 12\",\"filePath\":\"src/content/learn/troubleshooting/migrate-to-v12.mdx\",\"timestamp\":1742980223000},\"title\":\"Migrate to v12\"},{\"name\":\"migrate-to-v11\",\"route\":\"/learn/troubleshooting/migrate-to-v11\",\"frontMatter\":{\"sidebarTitle\":\"Migrate to v11\",\"description\":\"Use this guide to migrate from React Flow v10 to v11.\",\"title\":\"Migrate to React Flow v11\",\"filePath\":\"src/content/learn/troubleshooting/migrate-to-v11.mdx\",\"timestamp\":1742980223000},\"title\":\"Migrate to v11\"},{\"name\":\"migrate-to-v10\",\"route\":\"/learn/troubleshooting/migrate-to-v10\",\"frontMatter\":{\"sidebarTitle\":\"Migrate to v10\",\"description\":\"Use this guide to migrate from React Flow v9 to v10.\",\"title\":\"Migrate to React Flow v10\",\"filePath\":\"src/content/learn/troubleshooting/migrate-to-v10.mdx\",\"timestamp\":1742980223000},\"title\":\"Migrate to v10\"}],\"title\":\"Troubleshooting\"},{\"name\":\"api-reference\",\"href\":\"/api-reference\",\"title\":\"API Reference\"}],\"title\":\"Learn\"},{\"name\":\"api-reference\",\"route\":\"/api-reference\",\"children\":[{\"data\":{\"index\":{\"title\":\"\"},\"react-flow\":{\"title\":\"\"},\"react-flow-provider\":{\"title\":\"\"}}},{\"name\":\"index\",\"route\":\"/api-reference\",\"frontMatter\":{\"title\":\"API Reference\",\"filePath\":\"src/content/api-reference/index.mdx\",\"timestamp\":1742980223000},\"title\":\"API Reference\"},{\"name\":\"react-flow\",\"route\":\"/api-reference/react-flow\",\"frontMatter\":{\"title\":\"The ReactFlow component\",\"sidebarTitle\":\"\u003cReactFlow /\u003e\",\"filePath\":\"src/content/api-reference/react-flow.mdx\",\"timestamp\":1742980223000},\"title\":\"\u003cReactFlow /\u003e\"},{\"name\":\"react-flow-provider\",\"route\":\"/api-reference/react-flow-provider\",\"frontMatter\":{\"title\":\"The ReactFlowProvider component\",\"sidebarTitle\":\"\u003cReactFlowProvider /\u003e\",\"filePath\":\"src/content/api-reference/react-flow-provider.mdx\",\"timestamp\":1742980223000},\"title\":\"\u003cReactFlowProvider /\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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cBaseEdge /\u003e\"}]},{\"name\":\"control-button\",\"route\":\"/api-reference/components/control-button\",\"frontMatter\":{\"title\":\"The ControlButton component\",\"sidebarTitle\":\"\u003cControlButton /\u003e\",\"description\":\"You can add buttons to the control panel by using the ControlButton component and pass it as a child to the Controls component.\",\"filePath\":\"src/content/api-reference/components/control-button.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\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 contains convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.\",\"filePath\":\"src/content/api-reference/components/controls.mdx\",\"timestamp\":1743520491000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cControls /\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. You can see an example usage of the component in the edge label renderer example.\",\"filePath\":\"src/content/api-reference/components/edge-label-renderer.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cEdgeLabelRenderer /\u003e\"}]},{\"name\":\"edge-text\",\"route\":\"/api-reference/components/edge-text\",\"frontMatter\":{\"title\":\"The EdgeText component\",\"sidebarTitle\":\"\u003cEdgeText /\u003e\",\"description\":\"You can use the EdgeText component as a helper component to display text within your custom edges.\",\"filePath\":\"src/content/api-reference/components/edge-text.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cEdgeText /\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\":1743699364000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cHandle /\u003e\"}]},{\"name\":\"minimap\",\"route\":\"/api-reference/components/minimap\",\"frontMatter\":{\"title\":\"The MiniMap component\",\"sidebarTitle\":\"\u003cMiniMap /\u003e\",\"description\":\"The MiniMap component can be used to render 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/minimap.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cMiniMap /\u003e\"}]},{\"name\":\"node-resize-control\",\"route\":\"/api-reference/components/node-resize-control\",\"frontMatter\":{\"title\":\"The NodeResizeControl component\",\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cNodeResizer /\u003e\"}]},{\"name\":\"node-toolbar\",\"route\":\"/api-reference/components/node-toolbar\",\"frontMatter\":{\"title\":\"The NodeToolbar component\",\"sidebarTitle\":\"\u003cNodeToolbar /\u003e\",\"description\":\"The NodeToolbar component can render a toolbar or tooltip to one side of a custom node. This toolbar doesn't scale with the viewport so that the content is always visible.\",\"filePath\":\"src/content/api-reference/components/node-toolbar.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cPanel /\u003e\"}]},{\"name\":\"viewport-portal\",\"route\":\"/api-reference/components/viewport-portal\",\"frontMatter\":{\"title\":\"The ViewportPortal component\",\"sidebarTitle\":\"\u003cViewportPortal /\u003e\",\"description\":\"The ViewportPortal component can be used to add components to the same viewport of the flow where nodes and edges are rendered. This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes \u0026 edges and are also affected by zooming and panning\",\"created_at\":\"2024-02-21\",\"filePath\":\"src/content/api-reference/components/viewport-portal.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cViewportPortal /\u003e\"}]}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Components\",\"filePath\":\"src/content/api-reference/components/index.mdx\",\"timestamp\":1742980223000},\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useConnection()\"}]},{\"name\":\"use-edges\",\"route\":\"/api-reference/hooks/use-edges\",\"frontMatter\":{\"description\":\"This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.\",\"title\":\"useEdges()\",\"filePath\":\"src/content/api-reference/hooks/use-edges.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useEdges()\"}]},{\"name\":\"use-edges-state\",\"route\":\"/api-reference/hooks/use-edges-state\",\"frontMatter\":{\"description\":\"This hook makes it easy to prototype a controlled flow where you manage the state of nodes and edges outside the ReactFlowInstance. You can think of it like React's `useState` hook with an additional helper callback.\",\"title\":\"useEdgesState()\",\"filePath\":\"src/content/api-reference/hooks/use-edges-state.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useEdgesState()\"}]},{\"name\":\"use-handle-connections\",\"route\":\"/api-reference/hooks/use-handle-connections\",\"frontMatter\":{\"description\":\"This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.\",\"created_at\":\"2024-07-09\",\"title\":\"useHandleConnections()\",\"filePath\":\"src/content/api-reference/hooks/use-handle-connections.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useHandleConnections()\"}]},{\"name\":\"use-internal-node\",\"route\":\"/api-reference/hooks/use-internal-node\",\"frontMatter\":{\"description\":\"This hook returns an InternalNode object for the given node ID.\",\"title\":\"useInternalNode()\",\"filePath\":\"src/content/api-reference/hooks/use-internal-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useInternalNode()\"}]},{\"name\":\"use-key-press\",\"route\":\"/api-reference/hooks/use-key-press\",\"frontMatter\":{\"description\":\"This hook lets you listen for specific key codes and tells you whether they are currently pressed or not.\",\"title\":\"useKeyPress()\",\"filePath\":\"src/content/api-reference/hooks/use-key-press.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useKeyPress()\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodeConnections()\"}]},{\"name\":\"use-node-id\",\"route\":\"/api-reference/hooks/use-node-id\",\"frontMatter\":{\"description\":\"You can use this hook to get the id of the node it is used inside. It is useful if you need the node's id deeper in the render tree but don't want to manually drill down the id as a prop.\",\"title\":\"useNodeId()\",\"filePath\":\"src/content/api-reference/hooks/use-node-id.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodeId()\"}]},{\"name\":\"use-nodes\",\"route\":\"/api-reference/hooks/use-nodes\",\"frontMatter\":{\"description\":\"This hook returns an array of the current nodes. Components that use this hook will re-render whenever any node changes, including when a node is selected or moved.\",\"title\":\"useNodes()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodes()\"}]},{\"name\":\"use-nodes-data\",\"route\":\"/api-reference/hooks/use-nodes-data\",\"frontMatter\":{\"description\":\"With this hook you can subscribe to changes of a node data of a specific node.\",\"created_at\":\"2024-07-09\",\"title\":\"useNodesData()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes-data.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesData()\"}]},{\"name\":\"use-nodes-initialized\",\"route\":\"/api-reference/hooks/use-nodes-initialized\",\"frontMatter\":{\"description\":\"This hook tells you whether all the nodes in a flow have been measured and given a width and height. When you add a node to the flow, this hook will return false and then true again once the node has been measured.\",\"title\":\"useNodesInitialized()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes-initialized.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesInitialized()\"}]},{\"name\":\"use-nodes-state\",\"route\":\"/api-reference/hooks/use-nodes-state\",\"frontMatter\":{\"description\":\"This hook makes it easy to prototype a controlled flow where you manage the state of nodes and edges outside the ReactFlowInstance. You can think of it like React's `useState` hook with an additional helper callback.\",\"title\":\"useNodesState()\",\"filePath\":\"src/content/api-reference/hooks/use-nodes-state.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesState()\"}]},{\"name\":\"use-on-selection-change\",\"route\":\"/api-reference/hooks/use-on-selection-change\",\"frontMatter\":{\"description\":\"This hook lets you listen for changes to both node and edge selection. As the name implies, the callback you provide will be called whenever the selection of either nodes or edges changes.\",\"title\":\"useOnSelectionChange()\",\"filePath\":\"src/content/api-reference/hooks/use-on-selection-change.mdx\",\"timestamp\":1743699364000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useOnSelectionChange()\"}]},{\"name\":\"use-on-viewport-change\",\"route\":\"/api-reference/hooks/use-on-viewport-change\",\"frontMatter\":{\"description\":\"The useOnViewportChange hook lets you listen for changes to the viewport such as panning and zooming. You can provide a callback for each phase of a viewport change: onStart, onChange, and onEnd.\",\"title\":\"useOnViewportChange()\",\"filePath\":\"src/content/api-reference/hooks/use-on-viewport-change.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useOnViewportChange()\"}]},{\"name\":\"use-react-flow\",\"route\":\"/api-reference/hooks/use-react-flow\",\"frontMatter\":{\"description\":\"This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.\",\"title\":\"useReactFlow()\",\"filePath\":\"src/content/api-reference/hooks/use-react-flow.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useReactFlow()\"}]},{\"name\":\"use-store\",\"route\":\"/api-reference/hooks/use-store\",\"frontMatter\":{\"description\":\"This hook can be used to subscribe to internal state changes of the React Flow component. The useStore hook is re-exported from the Zustand state management library, so you should check out their docs for more details.\",\"title\":\"useStore()\",\"filePath\":\"src/content/api-reference/hooks/use-store.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useStore()\"}]},{\"name\":\"use-store-api\",\"route\":\"/api-reference/hooks/use-store-api\",\"frontMatter\":{\"description\":\"In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.\",\"title\":\"useStoreApi()\",\"filePath\":\"src/content/api-reference/hooks/use-store-api.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useStoreApi()\"}]},{\"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 let React Flow know about it 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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useUpdateNodeInternals()\"}]},{\"name\":\"use-viewport\",\"route\":\"/api-reference/hooks/use-viewport\",\"frontMatter\":{\"description\":\"The useViewport hook is a convenient way to read the current state of the Viewport in a component. Components that use this hook will re-render whenever the viewport changes.\",\"title\":\"useViewport()\",\"filePath\":\"src/content/api-reference/hooks/use-viewport.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useViewport()\"}]}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Hooks\",\"filePath\":\"src/content/api-reference/hooks/index.mdx\",\"timestamp\":1742980223000},\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"BackgroundVariant\"}]},{\"name\":\"connection\",\"route\":\"/api-reference/types/connection\",\"frontMatter\":{\"description\":\"The Connection type is the basic minimal description of an Edge between two nodes. The addEdge util can be used to upgrade a Connection to an Edge.\",\"title\":\"Connection\",\"filePath\":\"src/content/api-reference/types/connection.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection\"}]},{\"name\":\"connection-line-component-props\",\"route\":\"/api-reference/types/connection-line-component-props\",\"frontMatter\":{\"description\":\"If you want to render a custom component for connection lines, you can set the connectionLineComponent prop on the ReactFlow component. The ConnectionLineComponentProps are passed to your custom component.\",\"title\":\"ConnectionLineComponentProps\",\"filePath\":\"src/content/api-reference/types/connection-line-component-props.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionLineComponentProps\"}]},{\"name\":\"connection-line-type\",\"route\":\"/api-reference/types/connection-line-type\",\"frontMatter\":{\"description\":\"If you set the connectionLineType prop on your ReactFlow component, it will dictate the style of connection line rendered when creating new edges.\",\"title\":\"ConnectionLineType\",\"filePath\":\"src/content/api-reference/types/connection-line-type.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionLineType\"}]},{\"name\":\"connection-state\",\"route\":\"/api-reference/types/connection-state\",\"frontMatter\":{\"description\":\"Data about an ongoing connection.\",\"title\":\"ConnectionState\",\"filePath\":\"src/content/api-reference/types/connection-state.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionState\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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 ReactFlow component.\",\"title\":\"DefaultEdgeOptions\",\"filePath\":\"src/content/api-reference/types/default-edge-options.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DefaultEdgeOptions\"}]},{\"name\":\"delete-elements\",\"route\":\"/api-reference/types/delete-elements\",\"frontMatter\":{\"description\":\"DeleteElements deletes nodes and edges from the flow and return the deleted edges and nodes asynchronously.\",\"title\":\"DeleteElements\",\"filePath\":\"src/content/api-reference/types/delete-elements.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DeleteElements\"}]},{\"name\":\"edge\",\"route\":\"/api-reference/types/edge\",\"frontMatter\":{\"description\":\"Where a Connection is the minimal description of an edge between two nodes, an `Edge` is the complete description with everything React Flow needs to know in order to render it.\",\"title\":\"Edge\",\"filePath\":\"src/content/api-reference/types/edge.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge\"}]},{\"name\":\"edge-change\",\"route\":\"/api-reference/types/edge-change\",\"frontMatter\":{\"description\":\"The onEdgesChange callback takes an array of EdgeChange objects that you should use to update your flow's state. The EdgeChange type is a union of four different object types that represent that various ways an edge can change in a flow.\",\"title\":\"EdgeChange\",\"filePath\":\"src/content/api-reference/types/edge-change.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeChange\"}]},{\"name\":\"edge-marker\",\"route\":\"/api-reference/types/edge-marker\",\"frontMatter\":{\"description\":\"Edges can optionally have markers at the start and end of an edge. The EdgeMarker type is used to configure those markers! Check the docs for MarkerType for details on what types of edge marker are available.\",\"title\":\"EdgeMarker\",\"filePath\":\"src/content/api-reference/types/edge-marker.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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. Your custom edge component receives the following props:\",\"title\":\"EdgeProps\",\"filePath\":\"src/content/api-reference/types/edge-props.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"FitViewOptions\"}]},{\"name\":\"handle\",\"route\":\"/api-reference/types/handle\",\"frontMatter\":{\"description\":\"Handle attributes like id, position, and type.\",\"title\":\"Handle\",\"filePath\":\"src/content/api-reference/types/handle.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Handle\"}]},{\"name\":\"handle-connection\",\"route\":\"/api-reference/types/handle-connection\",\"frontMatter\":{\"description\":\"The HandleConnection type is a Connection that includes the edgeId.\",\"title\":\"HandleConnection\",\"filePath\":\"src/content/api-reference/types/handle-connection.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"HandleConnection\"}]},{\"name\":\"internal-node\",\"route\":\"/api-reference/types/internal-node\",\"frontMatter\":{\"description\":\"The InternalNode is an extension of the base Node type with additional properties React Flow uses internally for rendering.\",\"title\":\"InternalNode\",\"filePath\":\"src/content/api-reference/types/internal-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"InternalNode\"}]},{\"name\":\"marker-type\",\"route\":\"/api-reference/types/marker-type\",\"frontMatter\":{\"description\":\"Edges may optionally have a marker on either end. The MarkerType type enumerates the options available to you when configuring a given marker.\",\"title\":\"MarkerType\",\"filePath\":\"src/content/api-reference/types/marker-type.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"MarkerType\"}]},{\"name\":\"mini-map-node-props\",\"route\":\"/api-reference/types/mini-map-node-props\",\"frontMatter\":{\"description\":\"\",\"title\":\"MiniMapNodeProps\",\"filePath\":\"src/content/api-reference/types/mini-map-node-props.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"MiniMapNodeProps\"}]},{\"name\":\"node\",\"route\":\"/api-reference/types/node\",\"frontMatter\":{\"description\":\"The Node type represents everything React Flow needs to know about a given node. Many of these properties can be manipulated both by React Flow or by you, but some such as width and height should be considered read-only.\",\"title\":\"Node\",\"filePath\":\"src/content/api-reference/types/node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node\"}]},{\"name\":\"node-change\",\"route\":\"/api-reference/types/node-change\",\"frontMatter\":{\"description\":\"The onNodesChange callback takes an array of NodeChange objects that you should use to update your flow's state. The NodeChange type is a union of six different object types that represent that various ways an node can change in a flow.\",\"title\":\"NodeChange\",\"filePath\":\"src/content/api-reference/types/node-change.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeChange\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeConnection\"}]},{\"name\":\"node-handle\",\"route\":\"/api-reference/types/node-handle\",\"frontMatter\":{\"description\":\"Edges may optionally have a marker on either end. The MarkerType type enumerates the options available to you when configuring a given marker.\",\"title\":\"NodeHandle\",\"filePath\":\"src/content/api-reference/types/node-handle.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeHandle\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeOrigin\"}]},{\"name\":\"node-props\",\"route\":\"/api-reference/types/node-props\",\"frontMatter\":{\"title\":\"NodeProps\",\"description\":\"When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props:\",\"filePath\":\"src/content/api-reference/types/node-props.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeProps\"}]},{\"name\":\"on-edges-change\",\"route\":\"/api-reference/types/on-edges-change\",\"frontMatter\":{\"description\":\"\",\"title\":\"OnEdgesChange\",\"filePath\":\"src/content/api-reference/types/on-edges-change.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnEdgesChange\"}]},{\"name\":\"on-nodes-change\",\"route\":\"/api-reference/types/on-nodes-change\",\"frontMatter\":{\"description\":\"\",\"title\":\"OnNodesChange\",\"filePath\":\"src/content/api-reference/types/on-nodes-change.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnNodesChange\"}]},{\"name\":\"pan-on-scroll-mode\",\"route\":\"/api-reference/types/pan-on-scroll-mode\",\"frontMatter\":{\"description\":\"This enum is used to set the different modes of panning the viewport when the user scrolls.\",\"title\":\"PanOnScrollMode\",\"filePath\":\"src/content/api-reference/types/pan-on-scroll-mode.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"PanOnScrollMode\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Position\"}]},{\"name\":\"pro-options\",\"route\":\"/api-reference/types/pro-options\",\"frontMatter\":{\"description\":\"By default, we render a small attribution in the corner of your flows that links back to the project. Anyone is free to remove this attribution whether they're a Pro subscriber or not but we ask that you take a quick look at our removing attribution guide before doing so.\",\"title\":\"ProOptions\",\"filePath\":\"src/content/api-reference/types/pro-options.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ProOptions\"}]},{\"name\":\"react-flow-instance\",\"route\":\"/api-reference/types/react-flow-instance\",\"frontMatter\":{\"description\":\"The ReactFlowInstance provides a collection of methods to query and manipulate the internal state of your flow. You can get an instance by using the useReactFlow hook or attaching a listener to the onInit event.\",\"title\":\"ReactFlowInstance\",\"filePath\":\"src/content/api-reference/types/react-flow-instance.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ReactFlowInstance\"}]},{\"name\":\"react-flow-json-object\",\"route\":\"/api-reference/types/react-flow-json-object\",\"frontMatter\":{\"description\":\"A JSON-compatible representation of your flow. You can use this to save the flow to a database for example and load it back in later.\",\"title\":\"ReactFlowJsonObject\",\"filePath\":\"src/content/api-reference/types/react-flow-json-object.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ReactFlowJsonObject\"}]},{\"name\":\"resize-params\",\"route\":\"/api-reference/types/resize-params\",\"frontMatter\":{\"description\":\"The ResizeParams type is used to type the various events that are emitted by the NodeResizer component. You'll sometimes see this type extended with an additional direction field too.\",\"title\":\"ResizeParams\",\"filePath\":\"src/content/api-reference/types/resize-params.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ResizeParams\"}]},{\"name\":\"viewport\",\"route\":\"/api-reference/types/viewport\",\"frontMatter\":{\"description\":\"Internally, React Flow maintains a coordinate system that is independent of the rest of the page. The Viewport type tells you where in that 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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"XYPosition\"}]}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Types\",\"filePath\":\"src/content/api-reference/types/index.mdx\",\"timestamp\":1742980223000},\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"addEdge()\"}]},{\"name\":\"apply-edge-changes\",\"route\":\"/api-reference/utils/apply-edge-changes\",\"frontMatter\":{\"description\":\"Various events on the ReactFlow component can produce an EdgeChange that describes how to update the edges of your flow in some way. If you don't need any custom behavior, this util can be used to take an array of these changes and apply them to your edges.\",\"title\":\"applyEdgeChanges()\",\"filePath\":\"src/content/api-reference/utils/apply-edge-changes.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"applyEdgeChanges()\"}]},{\"name\":\"apply-node-changes\",\"route\":\"/api-reference/utils/apply-node-changes\",\"frontMatter\":{\"description\":\"Various events on the ReactFlow component can produce a NodeChange that describes how to update the nodes of your flow in some way. If you don't need any custom behavior, this util can be used to take an array of these changes and apply them to your nodes.\",\"title\":\"applyNodeChanges()\",\"filePath\":\"src/content/api-reference/utils/apply-node-changes.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"applyNodeChanges()\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getStraightPath()\"}]},{\"name\":\"get-transform-for-bounds\",\"route\":\"/api-reference/utils/get-transform-for-bounds\",\"frontMatter\":{\"description\":\"This util tells you what to set the viewport to in order to fit 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\":\"getTransformForBounds()\",\"filePath\":\"src/content/api-reference/utils/get-transform-for-bounds.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getTransformForBounds()\"}]},{\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"isEdge()\"}]},{\"name\":\"is-node\",\"route\":\"/api-reference/utils/is-node\",\"frontMatter\":{\"description\":\"Test whether an object is useable as a 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\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"isNode()\"}]},{\"name\":\"reconnect-edge\",\"route\":\"/api-reference/utils/reconnect-edge\",\"frontMatter\":{\"description\":\"A handy utility to reconnect an existing Edge with new properties. This searches your edge array for an edge with a matching id and updates its properties with the connection you provide.\",\"title\":\"reconnectEdge()\",\"filePath\":\"src/content/api-reference/utils/reconnect-edge.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"reconnectEdge()\"}]}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Utils\",\"filePath\":\"src/content/api-reference/utils/index.mdx\",\"timestamp\":1742980223000},\"title\":\"Utils\"}],\"title\":\"Reference\"},{\"name\":\"examples\",\"route\":\"/examples\",\"children\":[{\"data\":{\"index\":{\"theme\":{\"breadcrumb\":false}},\"overview\":{\"title\":\"\"},\"nodes\":{},\"edges\":{},\"interaction\":{},\"layout\":{},\"styling\":{},\"misc\":{}}},{\"name\":\"index\",\"route\":\"/examples\",\"frontMatter\":{\"description\":\"Overview of React Flow examples for practical copy-paste solutions to common use cases.\",\"title\":\"Examples\",\"filePath\":\"src/app/(content-pages)/examples/page.mdx\",\"timestamp\":1742980223000},\"title\":\"Examples\"},{\"name\":\"overview\",\"route\":\"/examples/overview\",\"frontMatter\":{\"description\":\"The most used features of React Flow - controls, MiniMap, node types, edge types, edge labels, and custom styling.\",\"title\":\"Feature Overview\",\"filePath\":\"src/app/(content-pages)/examples/overview/page.mdx\",\"timestamp\":1742980223000},\"title\":\"Feature Overview\"},{\"name\":\"nodes\",\"route\":\"/examples/nodes\",\"children\":[{\"data\":{\"add-node-on-edge-drop\":{\"title\":\"Add Node on Edge Drop\"},\"connection-limit\":{\"title\":\"Connection Limit\"},\"custom-node\":{\"title\":\"Custom Node\"},\"delete-middle-node\":{\"title\":\"Delete Middle Node\"},\"drag-handle\":{\"title\":\"Drag Handle\"},\"easy-connect\":{\"title\":\"Easy Connect\"},\"hidden\":{\"title\":\"Hidden\"},\"intersections\":{\"title\":\"Intersections\"},\"node-resizer\":{\"title\":\"Node Resizer\"},\"node-toolbar\":{\"title\":\"Node Toolbar\"},\"proximity-connect\":{\"title\":\"Proximity Connect\"},\"rotatable-node\":{\"title\":\"Rotatable Node\"},\"stress\":{\"title\":\"Stress\"},\"update-node\":{\"title\":\"Update Node\"},\"shapes\":{\"title\":\"Shapes\"}},\"title\":\"$undefined\"},{\"name\":\"add-node-on-edge-drop\",\"route\":\"/examples/nodes/add-node-on-edge-drop\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Add Node on Edge Drop\"}],\"frontMatter\":{\"title\":\"Add Node On Edge Drop\",\"description\":\"A new node appears wherever you drop the connection line\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/add-node-on-edge-drop/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"connection-limit\",\"route\":\"/examples/nodes/connection-limit\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection Limit\"}],\"frontMatter\":{\"title\":\"Connection Limit\",\"description\":\"Use the `isConnectable` prop to limit the number of connections a handle can have\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/connection-limit/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"custom-node\",\"route\":\"/examples/nodes/custom-node\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Node\"}],\"frontMatter\":{\"title\":\"Custom Nodes\",\"description\":\"Display any content inside of a node\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/custom-node/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"delete-middle-node\",\"route\":\"/examples/nodes/delete-middle-node\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Delete Middle Node\"}],\"frontMatter\":{\"title\":\"Delete Middle Node\",\"description\":\"Remove a node without breaking the flow\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/delete-middle-node/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"drag-handle\",\"route\":\"/examples/nodes/drag-handle\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Drag Handle\"}],\"frontMatter\":{\"title\":\"Drag Handle\",\"description\":\"Restrict dragging to a specific part of node\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/drag-handle/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"easy-connect\",\"route\":\"/examples/nodes/easy-connect\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Easy Connect\"}],\"frontMatter\":{\"title\":\"Easy Connect\",\"description\":\"Make the whole node into a handle\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/easy-connect/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"hidden\",\"route\":\"/examples/nodes/hidden\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Hidden\"}],\"frontMatter\":{\"title\":\"Hidden\",\"description\":\"Hide a node or edge for expandable/collapsible diagrams\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/hidden/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"intersections\",\"route\":\"/examples/nodes/intersections\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Intersections\"}],\"frontMatter\":{\"title\":\"Intersections\",\"description\":\"Detect when a node overlaps with another node\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/intersections/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"node-resizer\",\"route\":\"/examples/nodes/node-resizer\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Resizer\"}],\"frontMatter\":{\"title\":\"Node Resizer\",\"created_at\":\"2024-01-11\",\"description\":\"Change the size of a node with a bounding box or draggable icon\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/node-resizer/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"node-toolbar\",\"route\":\"/examples/nodes/node-toolbar\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Toolbar\"}],\"frontMatter\":{\"title\":\"Node Toolbar\",\"description\":\"A toolbar with buttons appears next to the selected node\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/node-toolbar/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"proximity-connect\",\"route\":\"/examples/nodes/proximity-connect\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Proximity Connect\"}],\"frontMatter\":{\"title\":\"Proximity Connect\",\"description\":\"Automatically create edges when nodes get close to each other\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/proximity-connect/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"rotatable-node\",\"route\":\"/examples/nodes/rotatable-node\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Rotatable Node\"}],\"frontMatter\":{\"title\":\"Rotatable Node\",\"description\":\"A custom node that can be rotated using CSS transforms\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/rotatable-node/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"stress\",\"route\":\"/examples/nodes/stress\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Stress\"}],\"frontMatter\":{\"title\":\"Stress Test\",\"description\":\"Render hundreds of nodes and edges at once\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/stress/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"update-node\",\"route\":\"/examples/nodes/update-node\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Update Node\"}],\"frontMatter\":{\"title\":\"Updating Nodes\",\"description\":\"Update the data field of a specific node\",\"filePath\":\"../../apps/example-apps/react/examples/nodes/update-node/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"shapes\",\"route\":\"/examples/nodes/shapes\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Shapes\"}],\"frontMatter\":{\"title\":\"Shapes\",\"description\":\"Custom node that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/nodes/shapes/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"dynamic-grouping\",\"route\":\"/examples/nodes/dynamic-grouping\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Dynamic Grouping\"}],\"frontMatter\":{\"title\":\"Dynamic Grouping\",\"description\":\"Group nodes together by dragging them into the same container\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/nodes/dynamic-grouping/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Nodes\"},{\"name\":\"edges\",\"route\":\"/examples/edges\",\"children\":[{\"data\":{\"animating-edges\":{\"title\":\"Animating Edges\"},\"custom-connectionline\":{\"title\":\"Custom Connectionline\"},\"custom-edges\":{\"title\":\"Custom Edges\"},\"delete-edge-on-drop\":{\"title\":\"Delete Edge on Drop\"},\"edge-label-renderer\":{\"title\":\"Edge Label Renderer\"},\"edge-intersection\":{\"title\":\"Edge Intersection\"},\"edge-types\":{\"title\":\"Edge Types\"},\"floating-edges\":{\"title\":\"Floating Edges\"},\"markers\":{\"title\":\"Markers\"},\"multi-connection-line\":{\"title\":\"Multi Connection Line\"},\"reconnect-edge\":{\"title\":\"Reconnect Edge\"},\"simple-floating-edges\":{\"title\":\"Simple Floating Edges\"},\"temporary-edges\":{\"title\":\"Temporary Edges\"}},\"title\":\"$undefined\"},{\"name\":\"animating-edges\",\"route\":\"/examples/edges/animating-edges\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Animating Edges\"}],\"frontMatter\":{\"title\":\"Animating Edges\",\"description\":\"Create edge animations that go beyond the built-in animated edge.\",\"preview_path\":\"react/examples/edges/animating-edges-svg/preview.jpg\",\"filePath\":\"../../apps/example-apps/react/examples/edges/animating-edges/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"custom-connectionline\",\"route\":\"/examples/edges/custom-connectionline\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Connectionline\"}],\"frontMatter\":{\"title\":\"Connection Line\",\"description\":\"Change the appearance and behavior of the connection line\",\"filePath\":\"../../apps/example-apps/react/examples/edges/custom-connectionline/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"custom-edges\",\"route\":\"/examples/edges/custom-edges\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Edges\"}],\"frontMatter\":{\"title\":\"Custom Edges\",\"description\":\"Create edges with special routing or controls along the edge\",\"filePath\":\"../../apps/example-apps/react/examples/edges/custom-edges/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"delete-edge-on-drop\",\"route\":\"/examples/edges/delete-edge-on-drop\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Delete Edge on Drop\"}],\"frontMatter\":{\"title\":\"Delete Edge on Drop\",\"description\":\"Delete an edge when it doesn't find a handle\",\"filePath\":\"../../apps/example-apps/react/examples/edges/delete-edge-on-drop/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"edge-label-renderer\",\"route\":\"/examples/edges/edge-label-renderer\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Label Renderer\"}],\"frontMatter\":{\"title\":\"Edge Label Renderer\",\"description\":\"Render edge labels as divs on top of edges\",\"filePath\":\"../../apps/example-apps/react/examples/edges/edge-label-renderer/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"edge-intersection\",\"route\":\"/examples/edges/edge-intersection\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Intersection\"}],\"frontMatter\":{\"title\":\"Edge Intersection\",\"description\":\"Detect edge intersections with nodes while dragging.\",\"filePath\":\"../../apps/example-apps/react/examples/edges/edge-intersection/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"edge-types\",\"route\":\"/examples/edges/edge-types\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Types\"}],\"frontMatter\":{\"title\":\"Edge Types\",\"description\":\"Make edges straight, stepped, smooth-stepped, or bezier curved\",\"filePath\":\"../../apps/example-apps/react/examples/edges/edge-types/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"floating-edges\",\"route\":\"/examples/edges/floating-edges\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Floating Edges\"}],\"frontMatter\":{\"title\":\"Floating Edges\",\"description\":\"Instead of having the handle at a fixed point, let it move with the connected edge\",\"filePath\":\"../../apps/example-apps/react/examples/edges/floating-edges/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"markers\",\"route\":\"/examples/edges/markers\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Markers\"}],\"frontMatter\":{\"title\":\"Edge Markers\",\"description\":\"Make your edges into arrows, add custom icons, or SVGs\",\"filePath\":\"../../apps/example-apps/react/examples/edges/markers/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"multi-connection-line\",\"route\":\"/examples/edges/multi-connection-line\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Multi Connection Line\"}],\"frontMatter\":{\"title\":\"Multi Connection Line\",\"description\":\"Draw multiple connection lines at once from any selected nodes.\",\"filePath\":\"../../apps/example-apps/react/examples/edges/multi-connection-line/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"reconnect-edge\",\"route\":\"/examples/edges/reconnect-edge\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Reconnect Edge\"}],\"frontMatter\":{\"title\":\"Reconnect Edge\",\"description\":\"Click-drag to move an existing edge from one handle to another\",\"filePath\":\"../../apps/example-apps/react/examples/edges/reconnect-edge/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"simple-floating-edges\",\"route\":\"/examples/edges/simple-floating-edges\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Simple Floating Edges\"}],\"frontMatter\":{\"title\":\"Simple Floating Edges\",\"description\":\"Edges connect to the closest available handle\",\"filePath\":\"../../apps/example-apps/react/examples/edges/simple-floating-edges/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"temporary-edges\",\"route\":\"/examples/edges/temporary-edges\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Temporary Edges\"}],\"frontMatter\":{\"title\":\"Temporary Edges\",\"description\":\"Push what React Flow edges are capable of by rendering invisible ghost nodes.\",\"filePath\":\"../../apps/example-apps/react/examples/edges/temporary-edges/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"editable-edge\",\"route\":\"/examples/edges/editable-edge\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Editable Edge\"}],\"frontMatter\":{\"title\":\"Editable Edge\",\"description\":\"Implement a custom edge with draggable control points to change the path of an edge\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/edges/editable-edge/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Edges\"},{\"name\":\"interaction\",\"route\":\"/examples/interaction\",\"children\":[{\"data\":{\"computing-flows\":{\"title\":\"Computing Flows\"},\"connection-events\":{\"title\":\"Connection Events\"},\"context-menu\":{\"title\":\"Context Menu\"},\"contextual-zoom\":{\"title\":\"Contextual Zoom\"},\"drag-and-drop\":{\"title\":\"Drag and Drop\"},\"interaction-props\":{\"title\":\"Interaction Props\"},\"prevent-cycles\":{\"title\":\"Prevent Cycles\"},\"save-and-restore\":{\"title\":\"Save and Restore\"},\"touch-device\":{\"title\":\"Touch Device\"},\"validation\":{\"title\":\"Validation\"},\"zoom-transitions\":{\"title\":\"Zoom Transitions\"}},\"title\":\"$undefined\"},{\"name\":\"computing-flows\",\"route\":\"/examples/interaction/computing-flows\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Computing Flows\"}],\"frontMatter\":{\"title\":\"Computing Flows\",\"description\":\"This examples demonstrates how to use the helpers to handle data flow\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/computing-flows/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"connection-events\",\"route\":\"/examples/interaction/connection-events\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection Events\"}],\"frontMatter\":{\"title\":\"Connection Events\",\"description\":\"React Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/connection-events/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"context-menu\",\"route\":\"/examples/interaction/context-menu\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Context Menu\"}],\"frontMatter\":{\"title\":\"Context Menu\",\"description\":\"Right-click a node to display custom actions\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/context-menu/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"contextual-zoom\",\"route\":\"/examples/interaction/contextual-zoom\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Contextual Zoom\"}],\"frontMatter\":{\"title\":\"Contextual Zoom\",\"description\":\"Only display the content of a node when you are zoomed in close enough\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/contextual-zoom/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"drag-and-drop\",\"route\":\"/examples/interaction/drag-and-drop\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Drag and Drop\"}],\"frontMatter\":{\"title\":\"Drag and Drop\",\"description\":\"Drag and drop outside of the React Flow pane with native HTML Drag and Drop API or react-draggable.\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/drag-and-drop/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"interaction-props\",\"route\":\"/examples/interaction/interaction-props\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Interaction Props\"}],\"frontMatter\":{\"title\":\"Interaction Props\",\"description\":\"The most popular props used for interactivity of a diagram\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/interaction-props/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"prevent-cycles\",\"route\":\"/examples/interaction/prevent-cycles\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Prevent Cycles\"}],\"frontMatter\":{\"title\":\"Preventing Cycles\",\"description\":\"Check if a new connection would cause a cycle in the graph\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/prevent-cycles/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"save-and-restore\",\"route\":\"/examples/interaction/save-and-restore\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Save and Restore\"}],\"frontMatter\":{\"title\":\"Save and Restore\",\"description\":\"Save the state of the diagram, and reload it after refreshing the page\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/save-and-restore/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"touch-device\",\"route\":\"/examples/interaction/touch-device\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Touch Device\"}],\"frontMatter\":{\"title\":\"Touch Device\",\"description\":\"Tap two handles to connect them, and make handles bigger for smaller devices\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/touch-device/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"validation\",\"route\":\"/examples/interaction/validation\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Validation\"}],\"frontMatter\":{\"title\":\"Validation\",\"description\":\"Check if a new connection is valid and should be added\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/validation/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"zoom-transitions\",\"route\":\"/examples/interaction/zoom-transitions\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Zoom Transitions\"}],\"frontMatter\":{\"title\":\"Zoom Transitions\",\"description\":\"Change the animation speed when the viewport is zoomed or moved\",\"filePath\":\"../../apps/example-apps/react/examples/interaction/zoom-transitions/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"collaborative\",\"route\":\"/examples/interaction/collaborative\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Collaborative\"}],\"frontMatter\":{\"title\":\"Collaborative\",\"description\":\"Build a collaborative graph for multiple users with React Flow and yjs\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/interaction/collaborative/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"copy-paste\",\"route\":\"/examples/interaction/copy-paste\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Copy Paste\"}],\"frontMatter\":{\"title\":\"Copy and Paste\",\"description\":\"Select nodes and edges to cut, copy, and paste\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/interaction/copy-paste/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"helper-lines\",\"route\":\"/examples/interaction/helper-lines\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro free pill\",\"children\":\"Helper Lines\"}],\"frontMatter\":{\"title\":\"Helper Lines\",\"description\":\"Display lines that help to visually align nodes, and enable nodes to be snapped into place when dropped\",\"is_pro_example\":true,\"is_free\":true,\"filePath\":\"../../apps/example-apps/react/examples/interaction/helper-lines/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"undo-redo\",\"route\":\"/examples/interaction/undo-redo\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Undo Redo\"}],\"frontMatter\":{\"title\":\"Undo and Redo\",\"description\":\"Implement an undo and redo functionality for moving, adding, and deleting nodes and edges\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/interaction/undo-redo/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Interaction\"},{\"name\":\"layout\",\"route\":\"/examples/layout\",\"children\":[{\"data\":{\"dagre\":{\"title\":\"Dagre\"},\"elkjs\":{\"title\":\"Elkjs\"},\"elkjs-multiple-handles\":{\"title\":\"Elkjs Multiple Handles\"},\"entitree-flex\":{\"title\":\"Entitree Flex\"},\"horizontal\":{\"title\":\"Horizontal\"},\"sub-flows\":{\"title\":\"Sub Flows\"},\"dynamic-layouting\":{\"title\":\"Dynamic Layouting\"}},\"title\":\"$undefined\"},{\"name\":\"dagre\",\"route\":\"/examples/layout/dagre\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Dagre\"}],\"frontMatter\":{\"title\":\"Dagre Tree\",\"description\":\"Integrate dagre js with React Flow to create simple tree layouts\",\"filePath\":\"../../apps/example-apps/react/examples/layout/dagre/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"elkjs\",\"route\":\"/examples/layout/elkjs\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Elkjs\"}],\"frontMatter\":{\"title\":\"Elkjs Tree\",\"description\":\"For a more powerful alternative to dagre, you can also use elkjs to layout your graphs\",\"filePath\":\"../../apps/example-apps/react/examples/layout/elkjs/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"elkjs-multiple-handles\",\"route\":\"/examples/layout/elkjs-multiple-handles\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Elkjs Multiple Handles\"}],\"frontMatter\":{\"title\":\"Elkjs Multiple Handles\",\"description\":\"Use multiple handles with the elkjs layouting engine to reduce edge crossings\",\"filePath\":\"../../apps/example-apps/react/examples/layout/elkjs-multiple-handles/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"entitree-flex\",\"route\":\"/examples/layout/entitree-flex\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Entitree Flex\"}],\"frontMatter\":{\"title\":\"Entitree Flex Tree\",\"description\":\"Create tree layouts that have sibling nodes and support nodes with different dimensions for family tree type layouts\",\"filePath\":\"../../apps/example-apps/react/examples/layout/entitree-flex/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"horizontal\",\"route\":\"/examples/layout/horizontal\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Horizontal\"}],\"frontMatter\":{\"title\":\"Horizontal Flow\",\"description\":\"A diagram that flows from left to right\",\"filePath\":\"../../apps/example-apps/react/examples/layout/horizontal/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"sub-flows\",\"route\":\"/examples/layout/sub-flows\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Sub Flows\"}],\"frontMatter\":{\"title\":\"Sub Flow\",\"description\":\"Render nested graphs and group nodes, and configure the behavior of child nodes\",\"filePath\":\"../../apps/example-apps/react/examples/layout/sub-flows/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"dynamic-layouting\",\"route\":\"/examples/layout/dynamic-layouting\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Dynamic Layouting\"}],\"frontMatter\":{\"title\":\"Dynamic Layouting\",\"description\":\"Add and auto-layout new nodes in a vertical tree flow\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/layout/dynamic-layouting/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"auto-layout\",\"route\":\"/examples/layout/auto-layout\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Auto Layout\"}],\"frontMatter\":{\"title\":\"Auto Layout\",\"description\":\"Automatically arrange nodes after adding items from a sidebar.\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/layout/auto-layout/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"expand-collapse\",\"route\":\"/examples/layout/expand-collapse\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Expand Collapse\"}],\"frontMatter\":{\"title\":\"Expand and Collapse\",\"description\":\"Click on parent nodes to toggle the visibility of their children\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/layout/expand-collapse/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"force-layout\",\"route\":\"/examples/layout/force-layout\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Force Layout\"}],\"frontMatter\":{\"title\":\"Force Layout\",\"description\":\"Newly added nodes never overlap with existing nodes using d3-force\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/layout/force-layout/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Layout\"},{\"name\":\"styling\",\"route\":\"/examples/styling\",\"children\":[{\"data\":{\"base-style\":{\"title\":\"Base Style\"},\"dark-mode\":{\"title\":\"Dark Mode\"},\"styled-components\":{\"title\":\"Styled Components\"},\"tailwind\":{\"title\":\"Tailwind\"},\"turbo-flow\":{\"title\":\"Turbo Flow\"}},\"title\":\"$undefined\"},{\"name\":\"base-style\",\"route\":\"/examples/styling/base-style\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Style\"}],\"frontMatter\":{\"title\":\"Base Style\",\"description\":\"Show the bare-bones base style that is built into React Flow, but is not used by default\",\"filePath\":\"../../apps/example-apps/react/examples/styling/base-style/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"dark-mode\",\"route\":\"/examples/styling/dark-mode\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Dark Mode\"}],\"frontMatter\":{\"title\":\"Dark Mode\",\"description\":\"React Flow comes with a color mode prop that allows you to switch between dark, light and system mode.\",\"created_at\":\"2024-07-15\",\"filePath\":\"../../apps/example-apps/react/examples/styling/dark-mode/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"styled-components\",\"route\":\"/examples/styling/styled-components\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Styled Components\"}],\"frontMatter\":{\"title\":\"Styled Components\",\"description\":\"Change the color of the background and nodes with the Styled Components library\",\"filePath\":\"../../apps/example-apps/react/examples/styling/styled-components/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"tailwind\",\"route\":\"/examples/styling/tailwind\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Tailwind\"}],\"frontMatter\":{\"title\":\"Tailwind\",\"description\":\"Use Tailwind CDN to easily make nice looking flows\",\"filePath\":\"../../apps/example-apps/react/examples/styling/tailwind/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"turbo-flow\",\"route\":\"/examples/styling/turbo-flow\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Turbo Flow\"}],\"frontMatter\":{\"title\":\"Turbo Flow\",\"description\":\"Nodes with glowing animated gradient borders, inspired by the turbo.build website\",\"filePath\":\"../../apps/example-apps/react/examples/styling/turbo-flow/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Styling\"},{\"name\":\"misc\",\"route\":\"/examples/misc\",\"children\":[{\"data\":{\"download-image\":{\"title\":\"Download Image\"},\"provider\":{\"title\":\"Provider\"},\"use-react-flow-hook\":{\"title\":\"Use React Flow Hook\"},\"static-server-side-generation\":{\"title\":\"Static Server Side Generation\"}},\"title\":\"$undefined\"},{\"name\":\"download-image\",\"route\":\"/examples/misc/download-image\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Download Image\"}],\"frontMatter\":{\"title\":\"Download Image\",\"description\":\"Save a flow as a png with the html-to-image library\",\"filePath\":\"../../apps/example-apps/react/examples/misc/download-image/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"provider\",\"route\":\"/examples/misc/provider\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Provider\"}],\"frontMatter\":{\"title\":\"ReactFlowProvider\",\"description\":\"For working with multiple flows on a page, so that each has a separate store instance\",\"filePath\":\"../../apps/example-apps/react/examples/misc/provider/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"use-react-flow-hook\",\"route\":\"/examples/misc/use-react-flow-hook\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Use React Flow Hook\"}],\"frontMatter\":{\"title\":\"useReactFlow\",\"description\":\"A hook with useful helpers for your nodes, edges, and the viewport\",\"filePath\":\"../../apps/example-apps/react/examples/misc/use-react-flow-hook/README.mdx\",\"timestamp\":1742980223000}},{\"name\":\"static-server-side-generation\",\"route\":\"/examples/misc/static-server-side-generation\",\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Static Server Side Generation\"}],\"frontMatter\":{\"title\":\"Static Server Side Generation\",\"description\":\"A full-stack app that demonstrates how to use React Flow to statically generate a flow on the server.\",\"is_pro_example\":true,\"filePath\":\"../../apps/example-apps/react/examples/misc/static-server-side-generation/README.mdx\",\"timestamp\":1742980223000}}],\"title\":\"Misc\"}],\"title\":\"Examples\"},{\"name\":\"components\",\"route\":\"/components\",\"children\":[{\"data\":{\"index\":{\"title\":\"Introduction\",\"theme\":{\"layout\":\"full\",\"toc\":false}},\"templates\":{\"theme\":{\"layout\":\"full\",\"toc\":false}},\"nodes\":{},\"edges\":{},\"controls\":{},\"handles\":{},\"misc\":{\"title\":\"Misc\"},\"_\":{\"type\":\"separator\"},\"request-a-component\":{\"href\":\"https://github.com/xyflow/web/discussions/new?category=ui-component-requests\"}}},{\"name\":\"index\",\"route\":\"/components\",\"frontMatter\":{\"title\":\"React Flow Components\",\"filePath\":\"src/content/components/index.mdx\",\"timestamp\":1742980223000},\"title\":\"Introduction\"},{\"name\":\"templates\",\"route\":\"/components/templates\",\"children\":[{\"name\":\"workflow-editor\",\"route\":\"/components/templates/workflow-editor\",\"frontMatter\":{\"title\":\"Workflow Editor\",\"description\":\"A Next.js-based application designed to help you quickly create, manage, and visualize workflows.\",\"is_pro_example\":true,\"filePath\":\"src/content/components/templates/workflow-editor.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Workflow Editor\"}]}],\"title\":\"Templates\"},{\"name\":\"nodes\",\"route\":\"/components/nodes\",\"children\":[{\"data\":{\"tooltip-node\":{\"title\":\"\"},\"placeholder-node\":{\"title\":\"\"},\"database-schema-node\":{\"title\":\"\"},\"annotation-node\":{\"title\":\"\"},\"labeled-group-node\":{\"title\":\"\"},\"node-header\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"tooltip-node\",\"route\":\"/components/nodes/tooltip-node\",\"frontMatter\":{\"sidebarTitle\":\"Tooltip\",\"description\":\"A node that displays a tooltip when hovered\",\"title\":\"Tooltip Node\",\"filePath\":\"src/content/components/nodes/tooltip-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Tooltip\"}]},{\"name\":\"placeholder-node\",\"route\":\"/components/nodes/placeholder-node\",\"frontMatter\":{\"sidebarTitle\":\"Placeholder\",\"description\":\"A custom node that can be clicked to create a new node.\",\"title\":\"Placeholder Node\",\"filePath\":\"src/content/components/nodes/placeholder-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Placeholder\"}]},{\"name\":\"database-schema-node\",\"route\":\"/components/nodes/database-schema-node\",\"frontMatter\":{\"sidebarTitle\":\"Database Schema\",\"description\":\"A node that can be used to visualize a database schema\",\"title\":\"Database Schema Node\",\"filePath\":\"src/content/components/nodes/database-schema-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Database Schema\"}]},{\"name\":\"annotation-node\",\"route\":\"/components/nodes/annotation-node\",\"frontMatter\":{\"sidebarTitle\":\"Annotation\",\"description\":\"A node for adding descriptions, tutorials, visual notes and custom annotations.\",\"title\":\"Annotation Node\",\"filePath\":\"src/content/components/nodes/annotation-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Annotation\"}]},{\"name\":\"labeled-group-node\",\"route\":\"/components/nodes/labeled-group-node\",\"frontMatter\":{\"sidebarTitle\":\"Group with Label\",\"description\":\"A group node with an optional label.\",\"title\":\"Labeled Group Node\",\"filePath\":\"src/content/components/nodes/labeled-group-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Group with Label\"}]},{\"name\":\"node-header\",\"route\":\"/components/nodes/node-header\",\"frontMatter\":{\"description\":\"A header block for custom nodes.\",\"title\":\"Node Header\",\"filePath\":\"src/content/components/nodes/node-header.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Header\"}]},{\"name\":\"base-node\",\"route\":\"/components/nodes/base-node\",\"frontMatter\":{\"description\":\"A node component with basic styling\",\"title\":\"Base Node\",\"filePath\":\"src/content/components/nodes/base-node.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Node\"}]},{\"name\":\"node-status-indicator\",\"route\":\"/components/nodes/node-status-indicator\",\"frontMatter\":{\"description\":\"A node wrapper that has multiple states for indicating the status of a node.\",\"title\":\"Node Status Indicator\",\"filePath\":\"src/content/components/nodes/node-status-indicator.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Status Indicator\"}]}],\"title\":\"Nodes\"},{\"name\":\"edges\",\"route\":\"/components/edges\",\"children\":[{\"data\":{\"button-edge\":{\"title\":\"\"},\"data-edge\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"button-edge\",\"route\":\"/components/edges/button-edge\",\"frontMatter\":{\"sidebarTitle\":\"Edge with Button\",\"description\":\"A custom edge component with a button\",\"title\":\"Button Edge\",\"filePath\":\"src/content/components/edges/button-edge.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge with Button\"}]},{\"name\":\"data-edge\",\"route\":\"/components/edges/data-edge\",\"frontMatter\":{\"sidebarTitle\":\"Edge with Node Data\",\"description\":\"A custom edge component that shows a value from the source node's data.\",\"title\":\"Data Edge\",\"filePath\":\"src/content/components/edges/data-edge.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge with Node Data\"}]},{\"name\":\"animated-svg-edge\",\"route\":\"/components/edges/animated-svg-edge\",\"frontMatter\":{\"description\":\"An edge that animates a custom SVG element along the edge's path.\",\"title\":\"Animated SVG Edge\",\"filePath\":\"src/content/components/edges/animated-svg-edge.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Animated SVG Edge\"}]}],\"title\":\"Edges\"},{\"name\":\"controls\",\"route\":\"/components/controls\",\"children\":[{\"data\":{\"zoom-slider\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"zoom-slider\",\"route\":\"/components/controls/zoom-slider\",\"frontMatter\":{\"description\":\"A slider component that can be used to zoom in and out\",\"title\":\"Zoom Slider\",\"filePath\":\"src/content/components/controls/zoom-slider.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Zoom Slider\"}]},{\"name\":\"zoom-select\",\"route\":\"/components/controls/zoom-select\",\"frontMatter\":{\"description\":\"A zoom control that lets you zoom in and out seamlessly using a select dropdown.\",\"title\":\"Zoom Select\",\"filePath\":\"src/content/components/controls/zoom-select.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Zoom Select\"}]}],\"title\":\"Controls\"},{\"name\":\"handles\",\"route\":\"/components/handles\",\"children\":[{\"data\":{\"labeled-handle\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"labeled-handle\",\"route\":\"/components/handles/labeled-handle\",\"frontMatter\":{\"sidebarTitle\":\"Handle with Label\",\"description\":\"A handle component with a label\",\"title\":\"Labeled Handle\",\"filePath\":\"src/content/components/handles/labeled-handle.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Handle with Label\"}]},{\"name\":\"base-handle\",\"route\":\"/components/handles/base-handle\",\"frontMatter\":{\"description\":\"A handle component with basic styling\",\"title\":\"Base Handle\",\"filePath\":\"src/content/components/handles/base-handle.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Handle\"}]},{\"name\":\"button-handle\",\"route\":\"/components/handles/button-handle\",\"frontMatter\":{\"description\":\"A handle component that lets you add new nodes with a dropdown.\",\"title\":\"Button Handle\",\"filePath\":\"src/content/components/handles/button-handle.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Button Handle\"}]}],\"title\":\"Handles\"},{\"name\":\"misc\",\"route\":\"/components/misc\",\"children\":[{\"name\":\"devtools\",\"route\":\"/components/misc/devtools\",\"frontMatter\":{\"title\":\"DevTools\",\"description\":\"A debugging tool that provides data on the viewport, the state of each node, and logs change events.\",\"filePath\":\"src/content/components/misc/devtools.mdx\",\"timestamp\":1742980223000},\"title\":[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DevTools\"}]}],\"title\":\"Misc\"},{\"name\":\"_\",\"type\":\"separator\"},{\"name\":\"request-a-component\",\"href\":\"https://github.com/xyflow/web/discussions/new?category=ui-component-requests\",\"title\":\"Request a Component\"}],\"title\":\"Components\"},{\"name\":\"showcase\",\"route\":\"/showcase\",\"frontMatter\":{\"title\":\"Showcase\",\"description\":\"Projects and examples using React Flow\"},\"title\":\"Showcase\"},{\"name\":\"more\",\"type\":\"menu\",\"items\":\"$3:props:children:props:children:2:props:pageMap:0:data:more:items\",\"title\":\"More\"},{\"name\":\"pro\",\"route\":\"/pro\",\"children\":[{\"data\":{\"case-studies\":{\"theme\":{\"breadcrumb\":false,\"layout\":\"full\",\"sidebar\":false,\"toc\":false}}}},{\"name\":\"index\",\"route\":\"/pro\",\"frontMatter\":{\"title\":\"React Flow Pro\",\"description\":\"Subscribe to React Flow Pro to get access to exclusive features of React Flow, a highly customizable library for building node-based editors, interactive graphs and flow charts\"},\"title\":\"React Flow Pro\"},{\"name\":\"case-studies\",\"route\":\"/pro/case-studies\",\"children\":[{\"name\":\"index\",\"route\":\"/pro/case-studies\",\"frontMatter\":{\"title\":\"React Flow Pro Case Studies\",\"description\":\"Case studies and success stories from some of our React Flow Pro subscribers.\"},\"title\":\"React Flow Pro Case Studies\"},{\"name\":\"carto-case-study\",\"route\":\"/pro/case-studies/carto-case-study\",\"frontMatter\":{\"title\":\"Improving Carto's end-user experience with React Flow Pro examples\",\"description\":\"Our customers can solve their spatial problems thanks to our data catalog and analytical tools. We are using React Flow for our Workflows tool, which is our main visual tool to automate data preparation \u0026 analysis pipelines\",\"authors\":[\"jesus\"],\"client\":\"Carto\",\"clientLogo\":\"/img/case-studies/doubleloop-logo.png\",\"image\":\"/img/case-studies/carto-screenshot.png\",\"image_width\":1440,\"image_height\":766,\"project_url\":\"https://carto.com/workflows\",\"filePath\":\"src/content/pro/case-studies/carto-case-study.mdx\",\"timestamp\":1742980223000},\"title\":\"Improving Carto's end-user experience with React Flow Pro examples\"},{\"name\":\"doubleloop-case-study\",\"route\":\"/pro/case-studies/doubleloop-case-study\",\"frontMatter\":{\"title\":\"Tracking business goals with React Flow-powered maps\",\"description\":\"React Flow is the majority of our core user experience. Our users interact with all the of the domain objects in our system via the React Flow pages. We have been leveling up our overall set of to feel as natural as FigJam and Miro.\",\"authors\":[\"sumit\"],\"client\":\"DoubleLoop\",\"clientLogo\":\"/img/case-studies/doubleloop-logo.png\",\"image\":\"/img/case-studies/doubleloop-screenshot.png\",\"image_width\":2880,\"image_height\":1646,\"project_url\":\"https://doubleloop.app\",\"filePath\":\"src/content/pro/case-studies/doubleloop-case-study.mdx\",\"timestamp\":1742980223000},\"title\":\"Tracking business goals with React Flow-powered maps\"},{\"name\":\"hubql-case-study\",\"route\":\"/pro/case-studies/hubql-case-study\",\"frontMatter\":{\"title\":\"Flexible data model visualization with Hubql and React Flow\",\"description\":\"We were seeking a React library that helps us to turn data models into visualization without spending too much time building abstractions and interactive elements. To save time in development we opted for a stable, mature and feature-rich library that we can extend with custom rendering options.\",\"authors\":[\"tobias\"],\"client\":\"Hubql\",\"clientLogo\":\"/img/case-studies/doubleloop-logo.png\",\"image\":\"/img/case-studies/hubql-screenshot.png\",\"image_width\":1920,\"image_height\":1080,\"project_url\":\"https://www.hubql.com\",\"filePath\":\"src/content/pro/case-studies/hubql-case-study.mdx\",\"timestamp\":1742980223000},\"title\":\"Flexible data model visualization with Hubql and React Flow\"},{\"name\":\"onesignal-case-study\",\"route\":\"/pro/case-studies/onesignal-case-study\",\"frontMatter\":{\"title\":\"Automating OneSignal's customer engagement with a React Flow workflow builder\",\"description\":\"OneSignal is a customer engagement platform, we send over 12 billion messages daily... After finding React Flow and creating an early proof of concept, it was a no brainer that we would use this over building something from scratch.\",\"authors\":[\"lee\"],\"client\":\"OneSignal\",\"clientLogo\":\"/img/case-studies/onesignal-logo.png\",\"interviewee\":\"Lee Munroe, Head of Design\",\"intervieweeImage\":\"/img/case-studies/onesignal-leemunroe.jpeg\",\"image\":\"/img/case-studies/onesignal-screenshot.png\",\"image_width\":1377,\"image_height\":918,\"project_url\":\"https://onesignal.com/journeys\",\"filePath\":\"src/content/pro/case-studies/onesignal-case-study.mdx\",\"timestamp\":1742980223000},\"title\":\"Automating OneSignal's customer engagement with a React Flow workflow builder\"}],\"title\":\"Case Studies\"},{\"name\":\"examples\",\"route\":\"/pro/examples\",\"frontMatter\":{\"title\":\"React Flow Pro Examples\",\"description\":\"Advanced React Flow code examples to use in your node-based UIs, crafted by the React Flow core team.\"},\"title\":\"React Flow Pro Examples\"},{\"name\":\"pricing\",\"route\":\"/pro/pricing\",\"frontMatter\":{\"title\":\"React Flow Pro Pricing\",\"description\":\"Pricing plans for a React Flow Pro subscription.\"},\"title\":\"React Flow Pro Pricing\"},{\"name\":\"quote-request\",\"route\":\"/pro/quote-request\",\"frontMatter\":{\"title\":\"Request a Quote\",\"description\":\"Interested in React Flow Pro for your organization? Use this page to get an official quote.\"},\"title\":\"Request a Quote\"}],\"title\":\"Pricing\"},{\"name\":\"pro-examples\",\"href\":\"/pro/examples\",\"display\":\"hidden\",\"title\":\"Pro Examples\"},{\"name\":\"case-studies\",\"href\":\"/pro/case-studies\",\"display\":\"hidden\",\"title\":\"Case Studies\"},{\"name\":\"contact-us\",\"href\":\"https://xyflow.com/contact\",\"display\":\"hidden\",\"title\":\"Contact Us\"},{\"name\":\"index\",\"route\":\"/\",\"frontMatter\":{\"title\":\"Node-Based UIs in React\",\"description\":\"Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more\"},\"title\":\"Node-Based UIs in React\"},{\"name\":\"developer-survey-2023\",\"route\":\"/developer-survey-2023\",\"frontMatter\":{\"title\":\"React flow Developer Survey 2023\",\"description\":\"Answer some questions how you use React Flow, so we can continue to focus on the most important pieces of the library and its ecosystem going into 2024\"},\"title\":\"React flow Developer Survey 2023\"},{\"name\":\"developer-survey-2024\",\"route\":\"/developer-survey-2024\",\"frontMatter\":{\"title\":\"React flow Developer Survey 2024\"},\"title\":\"React flow Developer Survey 2024\"},{\"name\":\"whats-new\",\"route\":\"/whats-new\",\"children\":[{\"name\":\"2023-11-01\",\"route\":\"/whats-new/2023-11-01\",\"frontMatter\":{\"title\":\"We refreshed our docs!\",\"description\":\"We refreshed the React Flow docs in November 2023, so things might look a little different around here.\",\"authors\":[\"john\"],\"date\":\"2023-11-01\",\"filePath\":\"src/content/whats-new/2023-11-01.mdx\",\"timestamp\":1742980223000},\"title\":\"We refreshed our docs!\"},{\"name\":\"2023-11-02\",\"route\":\"/whats-new/2023-11-02\",\"frontMatter\":{\"title\":\"New \\\"prevent connection cycles\\\" example!\",\"description\":\"This example shows how to use the util to check if a new connection would cause a cycle in the flow.\",\"authors\":[\"hayleigh\"],\"date\":\"2023-11-02\",\"filePath\":\"src/content/whats-new/2023-11-02.mdx\",\"timestamp\":1742980223000},\"title\":\"New \\\"prevent connection cycles\\\" example!\"},{\"name\":\"2023-11-10\",\"route\":\"/whats-new/2023-11-10\",\"frontMatter\":{\"title\":\"New release 11.10.0!\",\"description\":\"We released React Flow v11.10.0 with deprecations and some bugfixes.\",\"authors\":[\"moritz\"],\"date\":\"2023-11-10\",\"filePath\":\"src/content/whats-new/2023-11-10.mdx\",\"timestamp\":1742980223000},\"title\":\"New release 11.10.0!\"},{\"name\":\"2023-11-14\",\"route\":\"/whats-new/2023-11-14\",\"frontMatter\":{\"title\":\"New custom edges guide!\",\"description\":\"We've added a new guide to show folks how to create their own custom edges. This guide breaks down what the BaseEdge and EdgeLabelRenderer components are for, and shows how to use some of the path utilities React Flow provides.\",\"authors\":[\"hayleigh\"],\"date\":\"2023-11-14\",\"filePath\":\"src/content/whats-new/2023-11-14.mdx\",\"timestamp\":1742980223000},\"title\":\"New custom edges guide!\"},{\"name\":\"2023-12-06\",\"route\":\"/whats-new/2023-12-06\",\"frontMatter\":{\"title\":\"React Flow Pro Platform goes open source!\",\"description\":\"We're excited to announce that we just open sourced our Pro Platform! The Pro Platform is where React Flow Pro subscribers can access and view “Pro Examples,” manage their subscription, and give team members access to the platform. We hope that some folks take a look and get inspired for their own projects.\",\"authors\":[\"christopher\",\"john\"],\"date\":\"2023-12-06\",\"filePath\":\"src/content/whats-new/2023-12-06.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow Pro Platform goes open source!\"},{\"name\":\"2023-12-12\",\"route\":\"/whats-new/2023-12-12\",\"frontMatter\":{\"title\":\"The first annual React Flow Developer Survey launches!\",\"description\":\"We want to know what pieces of the library and its ecosystem are most/least helpful to our users (and what is missing) as we slide into the new year. To help us work that out, we've put together a short survey.\",\"authors\":[\"john\",\"hayleigh\"],\"date\":\"2023-12-12\",\"filePath\":\"src/content/whats-new/2023-12-12.mdx\",\"timestamp\":1742980223000},\"title\":\"The first annual React Flow Developer Survey launches!\"},{\"name\":\"2024-01-18\",\"route\":\"/whats-new/2024-01-18\",\"frontMatter\":{\"title\":\"New node toolbar example!\",\"description\":\"Buried away in our API reference is the documentation for our NodeToolbar component. We've been missing an example to accompany it though, so we've published a new example to show how it can be used.\",\"authors\":[\"hayleigh\"],\"date\":\"2024-01-18\",\"filePath\":\"src/content/whats-new/2024-01-18.mdx\",\"timestamp\":1742980223000},\"title\":\"New node toolbar example!\"},{\"name\":\"2024-02-05\",\"route\":\"/whats-new/2024-02-05\",\"frontMatter\":{\"title\":\"New ELKjs example!\",\"description\":\"New ELKjs example published to show how to use it with nodes with multiple handles.\",\"authors\":[\"moritz\"],\"date\":\"2024-02-05\",\"filePath\":\"src/content/whats-new/2024-02-05.mdx\",\"timestamp\":1742980223000},\"title\":\"New ELKjs example!\"},{\"name\":\"2024-02-09\",\"route\":\"/whats-new/2024-02-09\",\"frontMatter\":{\"title\":\"New multi-connection line example!\",\"description\":\"Quite a while back, a user opened a GitHub issue asking us to add the ability to draw multiple connection lines to the library. We don't have any plans to add this to the library itself, but we hope this example helps folks who need this functionality in their own apps.\",\"authors\":[\"hayleigh\"],\"date\":\"2024-02-09\",\"filePath\":\"src/content/whats-new/2024-02-09.mdx\",\"timestamp\":1742980223000},\"title\":\"New multi-connection line example!\"},{\"name\":\"2024-03-15\",\"route\":\"/whats-new/2024-03-15\",\"frontMatter\":{\"title\":\"React Flow 12 is finally here\",\"description\":\"React Flow 12 is finally here! Now with SSR support, more helpers for computing flows, dark mode and a better developer experience.\",\"authors\":[\"moritz\"],\"date\":\"2024-03-15\",\"filePath\":\"src/content/whats-new/2024-03-15.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12 is finally here\"},{\"name\":\"2024-04-11\",\"route\":\"/whats-new/2024-04-11\",\"frontMatter\":{\"title\":\"We finally made an editable edge Pro example\",\"description\":\"One of the most common questions we get from users is how to let users edit an edge's path. This Pro example demonstrates how to do exactly that, by cutting up an edge into segments that can be freely moved around.\",\"authors\":[\"peter\",\"hayleigh\"],\"date\":\"2024-04-11\",\"filePath\":\"src/content/whats-new/2024-04-11.mdx\",\"timestamp\":1742980223000},\"title\":\"We finally made an editable edge Pro example\"},{\"name\":\"2024-05-06\",\"route\":\"/whats-new/2024-05-06\",\"frontMatter\":{\"title\":\"Devtools and a fresh overview example\",\"description\":\"Sometimes it's hard to understand what's going on in your React Flow app. That's why we've added a devtools section to the docs. It's a copy pastable example that explains how you can get some insights into your React Flow app. We also published a revised version of the feature overview example.\",\"authors\":[\"moritz\"],\"date\":\"2024-05-06\",\"filePath\":\"src/content/whats-new/2024-05-06.mdx\",\"timestamp\":1742980223000},\"title\":\"Devtools and a fresh overview example\"},{\"name\":\"2024-06-11\",\"route\":\"/whats-new/2024-06-11\",\"frontMatter\":{\"title\":\"Layouting example for Entitree Flex\",\"description\":\"We add a new layouting algorithm to our example lineup with the addition of Entitree Flex. This algorithm is similar to d3-hierarchy but allows for sibling nodes as well as nodes with different dimensions.\",\"authors\":[\"hayleigh\"],\"date\":\"2024-06-11\",\"filePath\":\"src/content/whats-new/2024-06-11.mdx\",\"timestamp\":1742980223000},\"title\":\"Layouting example for Entitree Flex\"},{\"name\":\"2024-07-09\",\"route\":\"/whats-new/2024-07-09\",\"frontMatter\":{\"title\":\"New Release 12.0.0\",\"description\":\"What's new in @xyflow/react 12.0.0\",\"authors\":[\"moritz\"],\"date\":\"2024-07-09\",\"filePath\":\"src/content/whats-new/2024-07-09.mdx\",\"timestamp\":1742980223000},\"title\":\"New Release 12.0.0\"},{\"name\":\"2024-07-22\",\"route\":\"/whats-new/2024-07-22\",\"frontMatter\":{\"title\":\"New tutorial – Create a slide show presentation with React Flow\",\"description\":\"We recently published the findings from our React Flow 2023 end-of-year survey with an interactive presentation of the key findings, using React Flow itself. There were lots of useful bits built into this slideshow app, so we wanted to share how we built it!\",\"authors\":[\"hayleigh\"],\"date\":\"2024-07-22\",\"filePath\":\"src/content/whats-new/2024-07-22.mdx\",\"timestamp\":1742980223000},\"title\":\"New tutorial – Create a slide show presentation with React Flow\"},{\"name\":\"2024-08-14\",\"route\":\"/whats-new/2024-08-14\",\"frontMatter\":{\"title\":\"New edge examples\",\"description\":\"Here's a care drop of new edge examples including how to animate nodes along an edge path, how to create temporary edges, and a demo of every connection event.\",\"authors\":[\"hayleigh\"],\"date\":\"2024-08-14\",\"filePath\":\"src/content/whats-new/2024-08-14.mdx\",\"timestamp\":1742980223000},\"title\":\"New edge examples\"},{\"name\":\"2024-09-12\",\"route\":\"/whats-new/2024-09-12\",\"frontMatter\":{\"title\":\"React Flow 12.3.0\",\"description\":\"Changelog for React Flow version 12.3.0\",\"authors\":[\"xyflow\"],\"date\":\"2024-09-12\",\"filePath\":\"src/content/whats-new/2024-09-12.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.0\"},{\"name\":\"2024-09-26\",\"route\":\"/whats-new/2024-09-26\",\"frontMatter\":{\"title\":\"React Flow 12.3.1\",\"description\":\"Changelog for React Flow version 12.3.1\",\"authors\":[\"xyflow\"],\"date\":\"2024-09-26T10:50:00\",\"filePath\":\"src/content/whats-new/2024-09-26.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.1\"},{\"name\":\"2024-10-10\",\"route\":\"/whats-new/2024-10-10\",\"frontMatter\":{\"title\":\"React Flow 12.3.2\",\"description\":\"Changelog for React Flow version 12.3.2\",\"authors\":[\"xyflow\"],\"date\":\"2024-10-10\",\"filePath\":\"src/content/whats-new/2024-10-10.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.2\"},{\"name\":\"2024-10-16\",\"route\":\"/whats-new/2024-10-16\",\"frontMatter\":{\"title\":\"We've updated our example viewer!\",\"description\":\"An update to how we serve and render examples in the documentation means examples should load faster and require less bandwidth.\",\"authors\":[\"hayleigh\",\"moritz\"],\"date\":\"2024-10-16\",\"filePath\":\"src/content/whats-new/2024-10-16.mdx\",\"timestamp\":1742980223000},\"title\":\"We've updated our example viewer!\"},{\"name\":\"2024-10-30\",\"route\":\"/whats-new/2024-10-30\",\"frontMatter\":{\"title\":\"React Flow 12.3.3\",\"description\":\"Changelog for React Flow version 12.3.3\",\"authors\":[\"xyflow\"],\"date\":\"2024-10-30\",\"filePath\":\"src/content/whats-new/2024-10-30.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.3\"},{\"name\":\"2024-10-31\",\"route\":\"/whats-new/2024-10-31\",\"frontMatter\":{\"title\":\"React Flow 12.3.4\",\"description\":\"Changelog for React Flow version 12.3.4\",\"authors\":[\"xyflow\"],\"date\":\"2024-10-31\",\"filePath\":\"src/content/whats-new/2024-10-31.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.4\"},{\"name\":\"2024-11-04\",\"route\":\"/whats-new/2024-11-04\",\"frontMatter\":{\"title\":\"Introducing React Flow Components - powered by shadcn CLI\",\"description\":\"We've been interested in developing reusable components for React Flow for a while now. With the recent releases of shadcn CLI, we've made that happen!\",\"authors\":[\"xyflow\"],\"date\":\"2024-11-04\",\"filePath\":\"src/content/whats-new/2024-11-04.mdx\",\"timestamp\":1742980223000},\"title\":\"Introducing React Flow Components - powered by shadcn CLI\"},{\"name\":\"2024-11-11\",\"route\":\"/whats-new/2024-11-11\",\"frontMatter\":{\"title\":\"React Flow 12.3.5\",\"description\":\"Changelog for React Flow version 12.3.5\",\"authors\":[\"xyflow\"],\"date\":\"2024-11-11\",\"filePath\":\"src/content/whats-new/2024-11-11.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.5\"},{\"name\":\"2024-11-19\",\"route\":\"/whats-new/2024-11-19\",\"frontMatter\":{\"title\":\"Our examples have a fresh new look\",\"description\":\"We've unified the styles across all examples and added a new theme file to show you how to customize the styles and interactions of your flows.\",\"authors\":[\"xyflow\"],\"date\":\"2024-11-19\",\"filePath\":\"src/content/whats-new/2024-11-19.mdx\",\"timestamp\":1742980223000},\"title\":\"Our examples have a fresh new look\"},{\"name\":\"2024-12-09\",\"route\":\"/whats-new/2024-12-09\",\"frontMatter\":{\"title\":\"React Flow 12.3.6\",\"description\":\"Changelog for React Flow version 12.3.6\",\"authors\":[\"xyflow\"],\"date\":\"2024-12-09\",\"filePath\":\"src/content/whats-new/2024-12-09.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.3.6\"},{\"name\":\"2025-01-15\",\"route\":\"/whats-new/2025-01-15\",\"frontMatter\":{\"title\":\"React Flow 12.4.0\",\"description\":\"Changelog for React Flow version 12.4.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-15\",\"filePath\":\"src/content/whats-new/2025-01-15.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.4.0\"},{\"name\":\"2025-01-16\",\"route\":\"/whats-new/2025-01-16\",\"frontMatter\":{\"title\":\"React Flow 12.4.1\",\"description\":\"Changelog for React Flow version 12.4.1\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-16\",\"filePath\":\"src/content/whats-new/2025-01-16.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.4.1\"},{\"name\":\"2025-01-21\",\"route\":\"/whats-new/2025-01-21\",\"frontMatter\":{\"title\":\"React Flow 12.4.2\",\"description\":\"Changelog for React Flow version 12.4.2\",\"authors\":[\"xyflow\"],\"date\":\"2025-01-21\",\"filePath\":\"src/content/whats-new/2025-01-21.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.4.2\"},{\"name\":\"2025-02-12\",\"route\":\"/whats-new/2025-02-12\",\"frontMatter\":{\"title\":\"React Flow 12.4.3\",\"description\":\"Changelog for React Flow version 12.4.3\",\"authors\":[\"xyflow\"],\"date\":\"2025-02-12\",\"filePath\":\"src/content/whats-new/2025-02-12.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.4.3\"},{\"name\":\"2025-03-27\",\"route\":\"/whats-new/2025-03-27\",\"frontMatter\":{\"title\":\"React Flow 12.5.0\",\"description\":\"Changelog for React Flow version 12.5.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-03-27\",\"filePath\":\"src/content/whats-new/2025-03-27.mdx\",\"timestamp\":1742980223000},\"title\":\"React Flow 12.5.0\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"What's new?\",\"description\":\"We're always working on the React Flow docs and the library. This is a timeline of the things we've added or changed so far.\"},\"title\":\"What's new?\"}],\"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\":[\"$\",\"$L16\",null,{\"label\":\"React Flow\",\"labelClassName\":\"mr-5 md:max-lg:hidden\"}]}],[\"$\",\"$L17\",null,{\"className\":\"x:me-auto\",\"children\":[\"$undefined\",\"$undefined\",[[\"$\",\"$L18\",null,{}],[\"$\",\"a\",null,{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"https://github.com/xyflow/xyflow\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"children\":[\"$\",\"svg\",null,{\"className\":\"nav-github-logo\",\"fill\":\"currentColor\",\"viewBox\":\"3 3 18 18\",\"width\":\"20\",\"children\":[[\"$\",\"title\",null,{\"children\":\"GitHub\"}],[\"$\",\"path\",null,{\"d\":\"$19\"}]]}]}],[\"$\",\"a\",null,{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"https://discord.gg/RVmnytFmGW\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"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\"}]]}]}],[\"$\",\"$L1a\",null,{\"href\":\"/pro\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"height\":\"16\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z\"}]]}],[\"$\",\"span\",null,{\"className\":\"max-[1100px]:hidden\",\"children\":\"React Flow\"}],\"Pro\"],\"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-4 flex gap-1\",\"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\"}],[[\"$\",\"$L1a\",\"/learn\",{\"href\":\"/learn\",\"className\":\"block\",\"children\":\"Getting Started\"}],[\"$\",\"$L1a\",\"/api-reference\",{\"href\":\"/api-reference\",\"className\":\"block\",\"children\":\"API Reference\"}],[\"$\",\"$L1a\",\"/examples\",{\"href\":\"/examples\",\"className\":\"block\",\"children\":\"Examples\"}],[\"$\",\"$L1a\",\"/showcase\",{\"href\":\"/showcase\",\"className\":\"block\",\"children\":\"Showcase\"}]]]}],[\"$\",\"div\",\"Social\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Social\"}],[[\"$\",\"$L1a\",\"https://discord.gg/RVmnytFmGW\",{\"href\":\"https://discord.gg/RVmnytFmGW\",\"className\":\"block\",\"children\":\"Discord\"}],[\"$\",\"$L1a\",\"https://github.com/xyflow\",{\"href\":\"https://github.com/xyflow\",\"className\":\"block\",\"children\":\"Github\"}],[\"$\",\"$L1a\",\"https://x.com/xyflowdev\",{\"href\":\"https://x.com/xyflowdev\",\"className\":\"block\",\"children\":\"X / Twitter\"}],[\"$\",\"$L1a\",\"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\"}],[[\"$\",\"$L1a\",\"https://xyflow.com/blog\",{\"href\":\"https://xyflow.com/blog\",\"className\":\"block\",\"children\":\"Blog\"}],[\"$\",\"$L1a\",\"https://xyflow.com/open-source\",{\"href\":\"https://xyflow.com/open-source\",\"className\":\"block\",\"children\":\"Open Source\"}],[\"$\",\"$L1a\",\"https://xyflow.com/about\",{\"href\":\"https://xyflow.com/about\",\"className\":\"block\",\"children\":\"About\"}],[\"$\",\"$L1a\",\"https://xyflow.com/contact\",{\"href\":\"https://xyflow.com/contact\",\"className\":\"block\",\"children\":\"Contact\"}],[\"$\",\"$L1a\",\"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\"}],[[\"$\",\"$L1a\",\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",\"className\":\"block\",\"children\":\"MIT License\"}],[\"$\",\"$L1a\",\"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\"}],[\"$\",\"$L1a\",\"https://xyflow.com/imprint\",{\"href\":\"https://xyflow.com/imprint\",\"className\":\"block\",\"children\":\"Imprint\"}]]]}]]}],[\"$\",\"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\":[[\"$\",\"$L1b\",null,{}],[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(content-pages)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[],[\"$\",\"$L1c\",null,{}]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"12:[\"$\",\"div\",null,{\"className\":\"grid gap-2 x:text-xs x:font-medium\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://xyflow.com/contact\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus xy-link-gray\",\"children\":[\"Question? Give us feedback\",[\" \",[\"$\",\"svg\",null,{\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.7,\"viewBox\":\"0 0 24 24\",\"height\":\"1em\",\"className\":\"x:inline x:align-baseline x:shrink-0\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 17L17 7\"}],[\"$\",\"path\",null,{\"d\":\"M7 7h10v10\"}]]}]]]}],[\"$\",\"p\",null,{\"className\":\"font-bold mt-4\",\"children\":\"What's new?\"}],[[\"$\",\"$L1a\",\"/whats-new/2025-03-27\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-03-27\",\"children\":\"React Flow 12.5.0\"}],[\"$\",\"$L1a\",\"/whats-new/2025-02-12\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-02-12\",\"children\":\"React Flow 12.4.3\"}],[\"$\",\"$L1a\",\"/whats-new/2025-01-21\",{\"className\":\"xy-link-gray x:focus-visible:nextra-focus\",\"href\":\"/whats-new/2025-01-21\",\"children\":\"React Flow 12.4.2\"}],[\"$\",\"$L1a\",\"/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,"1d:I[90809,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"default\"]\n1e:I[68795,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Features\"]\n1f:I[9084,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/c"])</script><script>self.__next_f.push([1,"hunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"ReactFlow\"]\n20:I[9084,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Background\"]\n21:I[9084,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98"])</script><script>self.__next_f.push([1,"993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Controls\"]\n22:I[98048,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"FlowB\"]\n23:I[93005,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chu"])</script><script>self.__next_f.push([1,"nks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"FlowC\"]\n24:I[82135,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Image\"]\n25:I[39208,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js"])</script><script>self.__next_f.push([1,"\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"default\"]\n26:I[98020,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"TimeAgo\"]\n27:I[27774,[\"6796\",\"static/chunks/69debb3d-a28ce2dd44e3bdd5.js\",\"7281\",\"static/chunks/1ea0f737-cd138e0f105c6296.js\",\"7440\",\"static/chunks/bf06e590-d8b7a60d98993ce1.js\",\"8589\",\"static/chunks/e1cb20ef-8b65f021308aac34.js\",\"7585\",\"static/chunks/6575d434-3e231a337f7ed3af.js\",\"9006\",\"static/chunks/eca16dfc-e4478ccf3b7c05d9.js\",\"9259\",\"static/chunks/d27283b4-10726a3834f6e260.js\",\"8456\",\"static/chunks/8456"])</script><script>self.__next_f.push([1,"-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"2461\",\"static/chunks/2461-3e9a46a5c41bd958.js\",\"6145\",\"static/chunks/6145-24966611a005b79c.js\",\"7658\",\"static/chunks/7658-11d5a2a7ab7a75c6.js\",\"4303\",\"static/chunks/4303-8047094c81b026c9.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"4720\",\"static/chunks/4720-12866fa50b89d58a.js\",\"6246\",\"static/chunks/6246-1ded9ddf081235ef.js\",\"4821\",\"static/chunks/4821-4d4243742d57f0be.js\",\"5962\",\"static/chunks/app/(content-pages)/page-9b5f26ba00a6d07c.js\"],\"Logo\"]\n"])</script><script>self.__next_f.push([1,"4:[\"$\",\"main\",null,{\"className\":\"pt-10 lg:pt-14 2xl:pt-18 pb-24 mx-auto x:max-w-(--nextra-content-width) pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] h-[600px] lg:h-[550px] xl:h-[600px] -mt-10 lg:-mt-14 2xl:-mt-18\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pointer-events-none x:max-w-(--nextra-content-width) w-full absolute left-1/2 top-8 lg:top-[130px] -translate-x-1/2 z-10\",\"children\":[\"$\",\"div\",null,{\"style\":{\"pointerEvents\":\"all\"},\"className\":\"text-center mx-auto lg:mx-0 lg:text-left max-w-lg relative bg-white/10 backdrop-blur-[2px] px-3 lg:px-[35px]\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"tracking-[-0.02rem] text-5xl lg:text-6xl mb-4 font-black\",\"ref\":\"$undefined\",\"children\":[\"Wire Your Ideas with \",[\"$\",\"span\",null,{\"className\":\"text-primary\",\"children\":\"React Flow\"}]]}],[\"$\",\"h2\",null,{\"className\":\"mb-4 lg:mb-6 text-xl\",\"ref\":\"$undefined\",\"children\":\"A customizable React component for building node-based editors and interactive diagrams\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center lg:justify-start\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"/learn\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"}]]}],\"Quickstart\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-primary text-primary-foreground hover:bg-primary/80 px-6 h-10 text-md rounded-full mr-3\",\"ref\":null}],[\"$\",\"$L1a\",null,{\"href\":\"/pro\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z\"}]]}],\" React Flow Pro\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full\",\"ref\":null}]]}]}]]}]}],[\"$\",\"$L1d\",null,{\"initialColor\":\"#ff0071\"}]]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24 mt-6 lg:mt-10 lg:px-10\",\"children\":[\"$\",\"div\",null,{\"className\":\"lg:grid lg:grid-cols-7 lg:gap-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"lg:col-span-4 flex place-content-between lg:space-x-24 grow\",\"children\":[[\"$\",\"div\",\"Github Stars-28.7K\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"28.7K\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"Github Stars\"}]]}],[\"$\",\"div\",\"Weekly Installs-1.32M\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"1.32M\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"Weekly Installs\"}]]}],[\"$\",\"div\",\"License-MIT\",{\"className\":\"text-center\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"tracking-[-0.02rem] leading font-bold tabular-nums whitespace-nowrap text-primary text-4xl md:text-5xl lg:text-6xl\",\"ref\":\"$undefined\",\"children\":\"MIT\"}],[\"$\",\"p\",null,{\"className\":\"whitespace-nowrap mt-2 text-md md:text-lg lg:text-lg\",\"ref\":\"$undefined\",\"children\":\"License\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"lg:col-span-3 mt-8 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-light text-lg leading-tight\",\"ref\":\"$undefined\",\"children\":\"React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro.\"}],[\"$\",\"$L1a\",null,{\"href\":\"/pro\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-5 h-5 mr-1\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z\"}]]}],\" React Flow Pro\"],\"className\":\"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold relative text-primary before:absolute before:rounded-full before:top-0 before:right-0 before:bottom-0 before:left-0 before:-z-[2] after:rounded-full after:top-[1px] after:right-[1px] after:bottom-[1px] after:left-[1px] after:bg-white after:absolute after:-z-[1] pro-button px-6 h-10 text-md rounded-full max-md:w-full mt-5\",\"ref\":null}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"relative right-1/2 left-1/2 ml-[-50vw] mr-[-50vw] max-w-[100vw] w-[100vw] x:max-w-(--nextra-content-width) lg:ml-0 lg:mr-0 lg:right-0 lg:left-0 lg:w-full !mt-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex border border-gray-700 text-white bg-black rounded-none border-none p-0 mt-16 lg:mt-24 lg:p-1.5 lg:rounded-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"shadow-md relative overflow-hidden flex-grow border border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-none border-none lg:rounded-[18px] lg:border-solid lg:border-gray-700\",\"children\":[[\"$\",\"div\",null,{\"className\":\"px-4 pt-12 pb-4\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-lg leading-tight font-bold mb-2 text-center text-primary\",\"ref\":\"$undefined\",\"children\":[\"Getting Started with \",\"React Flow\"]}],[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-center max-w-lg mx-auto mb-6 lg:mb-8\",\"ref\":\"$undefined\",\"children\":[\"Make sure you’ve installed npm, pnpm or yarn. Then you can install\",\" \",\"React Flow\",\" via:\"]}],[\"$\",\"div\",null,{\"className\":\"border border-solid border-gray-700 rounded-md max-w-3xl mx-auto bg-black/90\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex p-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-red-400 rounded-full mr-2\"}],[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-yellow-400 rounded-full mr-2\"}],[\"$\",\"div\",null,{\"className\":\"w-3 h-3 bg-green-400 rounded-full mr-2\"}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pl-8 pb-6 py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"!pl-0 inline text-md font-mono\",\"children\":[\"npm install \",[\"$\",\"span\",null,{\"className\":\"text-primary\",\"children\":\"@xyflow/react\"}]]}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center mt-5 py-3 bg-black/90 border-t border-gray-700\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/learn\",\"children\":[\"See full Quickstart guide\",\" \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-2 w-4 h-4 stroke-2\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3\"}]]}]],\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline shadow-none !px-0 py-2 h-9 px-6 text-white font-bold\",\"ref\":null}]}]]}]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24\",\"children\":[\"$\",\"$L1e\",null,{\"features\":[{\"title\":\"Ready out-of-the-box\",\"text\":\"The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing elements are all built-in.\",\"route\":\"/learn\",\"linkLabel\":\"Get started\",\"flowComponent\":[\"$\",\"$L1f\",null,{\"id\":\"a\",\"defaultNodes\":[{\"id\":\"1\",\"type\":\"input\",\"data\":{\"label\":\"Hello\"},\"position\":{\"x\":0,\"y\":0},\"style\":{\"fontWeight\":\"bold\"}},{\"id\":\"2\",\"data\":{\"label\":\"World\"},\"position\":{\"x\":150,\"y\":100},\"style\":{\"fontWeight\":\"bold\"}}],\"defaultEdges\":[{\"id\":\"e1-2\",\"source\":\"1\",\"target\":\"2\"}],\"fitView\":true,\"fitViewOptions\":{\"padding\":0.4},\"proOptions\":{\"hideAttribution\":true},\"preventScrolling\":false,\"children\":[[\"$\",\"$L20\",null,{}],[\"$\",\"$L21\",null,{\"showInteractive\":false}]]}]},{\"title\":[\"Powered by us.\",[\"$\",\"br\",null,{}],\"Designed by you.\"],\"text\":\"React Flow nodes are simply React components, ready for your interactive elements. We play nice with Tailwind and plain old CSS.\",\"route\":\"/learn/customization/custom-nodes\",\"linkLabel\":\"Custom nodes guide\",\"flowComponent\":[\"$\",\"$L22\",null,{}]},{\"title\":\"All the right plugins\",\"text\":\"Make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.\",\"route\":\"/learn/concepts/built-in-components\",\"flowComponent\":[\"$\",\"$L23\",null,{}]}]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center w-full\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mb-8\",\"ref\":\"$undefined\",\"children\":\"Used By\"}],[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-4 grid-cols-2 md:gap-12 gap-8 place-items-center\",\"children\":[[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/zapier.b5b0dc13.svg\",\"height\":28,\"width\":105,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"zapier\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/stripe.af951a3e.svg\",\"height\":23,\"width\":54,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"stripe\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/carto.d497813c.svg\",\"height\":30,\"width\":78,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"carto workflows\",\"className\":\"h-9 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/close.d4b07d68.svg\",\"height\":64,\"width\":237,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"close\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/railway.ab3a3093.svg\",\"height\":1024,\"width\":3733,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"railway\",\"className\":\"h-9 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/retool.0d8c5632.svg\",\"height\":24,\"width\":112,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"retool\",\"className\":\"h-6 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/doubleloop.30d66616.svg\",\"height\":24,\"width\":128,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"doubleloop\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L24\",null,{\"src\":{\"src\":\"/_next/static/media/onesignal.ce83a95c.svg\",\"height\":40,\"width\":172,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"onesignal\",\"className\":\"h-7 w-auto\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"p-2 flex border border-solid border-gray-700 text-white bg-black rounded-3xl\",\"children\":[\"$\",\"div\",null,{\"className\":\"shadow-md relative overflow-hidden flex-grow border border-solid border-gray-700 text-white bg-gradient-to-br from-black from-15% via-[#311c33] via-65% to-[#1c1826] rounded-[22px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 md:p-8 lg:p-14\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid lg:grid-cols-2 lg:gap-40\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed font-bold mb-2 text-accent tracking-wide\",\"ref\":\"$undefined\",\"children\":\"Project Showcase\"}],[\"$\",\"h2\",null,{\"className\":\"text-5xl lg:text-6xl font-black leading mb-4 tracking-normal\",\"ref\":\"$undefined\",\"children\":\"Used by thousands of people\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed mt-4 mb-4\",\"ref\":\"$undefined\",\"children\":\"\\n From solo open-source developers, to companies like Stripe and\\n Typeform. We’ve seen the library used for data processing tools,\\n chatbot builders, machine learning, musical synthesizers, and\\n more.\\n \"}],[\"$\",\"$L1a\",null,{\"href\":\"/showcase\",\"children\":\"See all projects\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background shadow-md font-bold bg-secondary text-secondary-foreground hover:bg-gray-50 border border-solid border-gray-100 py-2 h-9 px-6\",\"ref\":null}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[\"$\",\"$L25\",null,{\"items\":[{\"name\":\"Stripe Docs\",\"text\":\"Diagrams for process documentation with interactive nodes\",\"content\":[\"$\",\"$L24\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/featured/stripe.png\",\"alt\":\"Stripe Docs\",\"fill\":true}]},{\"name\":\"DoubleLoop\",\"text\":\"Node-based dashboard builder to monitor business metrics\",\"content\":[\"$\",\"$L24\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/featured/doubleloop.png\",\"alt\":\"DoubleLoop\",\"fill\":true}]},{\"name\":\"TypeForm\",\"text\":\"Interactive tool to build and visualize complex survey logic\",\"content\":[\"$\",\"$L24\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/featured/typeform.png\",\"alt\":\"TypeForm\",\"fill\":true}]}],\"duration\":5000,\"start\":\"Stripe Docs\"}]}]]}]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24 relative\",\"children\":[[\"$\",\"ol\",null,{\"className\":\"grid grid-cols-1 lg:grid-cols-2 rounded-3xl border border-gray-100 gap-x-8 p-8 w-full\",\"children\":[[\"$\",\"li\",\"/whats-new/2025-03-27\",{\"role\":\"article\",\"className\":\"row-span-2 h-full flex items-center p-4 py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"header\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-light\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L26\",null,{\"datetime\":\"2025-03-27\"}]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl font-semibold\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/whats-new/2025-03-27\",\"children\":\"React Flow 12.5.0\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap\",\"children\":[[\"$\",\"div\",\"xyflow\",{\"className\":\"flex items-center mr-4 mb-4\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"inline-flex items-end gap-2 text-sm\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"https://twitter.com/xyflowdev\",\"children\":\"xyflow team\"}],[\"$\",\"span\",null,{\"className\":\"user-select-none text-light\",\"children\":\" – \"}],[\"$\",\"div\",null,{\"className\":\"text-light\",\"children\":\"✌️\"}]]}]]}]]}]]}],[\"$\",\"p\",null,{\"children\":\"Changelog for React Flow version 12.5.0\"}],[\"$\",\"footer\",null,{\"children\":[\"$\",\"p\",null,{\"className\":\"text-primary text-sm mt-4 inline-flex items-center\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L1a\",null,{\"className\":\"hover:underline\",\"href\":\"/whats-new/2025-03-27\",\"children\":\"Check it out here\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 20 20\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z\",\"clipRule\":\"evenodd\"}]]}]]}]}]]}]}],[\"$\",\"li\",\"/whats-new/2025-02-12\",{\"role\":\"article\",\"className\":\"border-b border-gray-100 p-4 py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"header\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-light\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L26\",null,{\"datetime\":\"2025-02-12\"}]}],[\"$\",\"h1\",null,{\"className\":\"text-lg font-semibold\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/whats-new/2025-02-12\",\"children\":\"React Flow 12.4.3\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap\",\"children\":[[\"$\",\"div\",\"xyflow\",{\"className\":\"flex items-center mr-4 mb-4\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"inline-flex items-end gap-2 text-sm\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"https://twitter.com/xyflowdev\",\"children\":\"xyflow team\"}],[\"$\",\"span\",null,{\"className\":\"user-select-none text-light\",\"children\":\" – \"}],[\"$\",\"div\",null,{\"className\":\"text-light\",\"children\":\"✌️\"}]]}]]}]]}]]}],[\"$\",\"p\",null,{\"children\":\"Changelog for React Flow version 12.4.3\"}],false]}]}],[\"$\",\"li\",\"/whats-new/2025-01-21\",{\"role\":\"article\",\"className\":\"p-4 py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"header\",null,{\"className\":\"space-y-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-light\",\"ref\":\"$undefined\",\"children\":[\"$\",\"$L26\",null,{\"datetime\":\"2025-01-21\"}]}],[\"$\",\"h1\",null,{\"className\":\"text-lg font-semibold\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/whats-new/2025-01-21\",\"children\":\"React Flow 12.4.2\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap\",\"children\":[[\"$\",\"div\",\"xyflow\",{\"className\":\"flex items-center mr-4 mb-4\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"inline-flex items-end gap-2 text-sm\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"https://twitter.com/xyflowdev\",\"children\":\"xyflow team\"}],[\"$\",\"span\",null,{\"className\":\"user-select-none text-light\",\"children\":\" – \"}],[\"$\",\"div\",null,{\"className\":\"text-light\",\"children\":\"✌️\"}]]}]]}]]}]]}],[\"$\",\"p\",null,{\"children\":\"Changelog for React Flow version 12.4.2\"}],false]}]}]]}],[\"$\",\"div\",null,{\"className\":\"lg:hidden h-[50%] w-full bg-gradient-to-b from-transparent via-white/70 to-white absolute bottom-0 pointer-events-none\"}]]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-2\",\"ref\":\"$undefined\",\"children\":\"A project by the xyflow team\"}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed text-center max-w-xl mx-auto mb-6\",\"ref\":\"$undefined\",\"children\":\"We are Christopher, Peter, Abbey and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap justify-center space-x-8 mb-16\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"https://xyflow.com/blog\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Blog \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1a\",null,{\"href\":\"https://xyflow.com/about\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"About us \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1a\",null,{\"href\":\"https://xyflow.com/open-source\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Open Source \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}],[\"$\",\"$L1a\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"inline-flex items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background underline-offset-4 hover:underline text-primary shadow-none font-normal !px-0 py-2 h-9 px-6 flex items-center\",\"children\":[\"Contact Us \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"w-4 h-4 ml-1\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]],\"ref\":null}]]}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"grid border-t border-solid border-gray-100 grid-cols-1 lg:grid-cols-2 mt-16 lg:mt-24\",\"children\":[[\"$\",\"a\",\"svelteflow\",{\"href\":\"https://svelteflow.dev\",\"className\":\"lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L27\",null,{\"className\":\"mr-2 text-[#ff4000]\"}],\" \",\"Svelte Flow\"]}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mt-2 mb-4\",\"ref\":\"$undefined\",\"children\":\"A customizable Svelte component for building node-based editors and interactive diagrams\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center text-[#ff4000]\",\"children\":[\"Visit Website \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-1 w-4 h-4\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]]}]],\"target\":\"_blank\",\"rel\":\"noopener noreferrer\"}],[\"$\",\"a\",\"xyflow\",{\"href\":\"https://xyflow.com\",\"className\":\"lg:odd:border-r border-b border-gray-100 hover:bg-gray-100/50 border-solid px-8 py-10 lg:py-16 cursor-pointer\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl flex items-center\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"$L27\",null,{\"className\":\"mr-2 text-[#000]\"}],\" \",\"xyflow\"]}],[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mt-2 mb-4\",\"ref\":\"$undefined\",\"children\":\"The team behind React Flow and Svelte Flow. Read updates and blog posts from us and about how we approach open source development.\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center text-[#000]\",\"children\":[\"Visit Website \",[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"className\":\"ml-1 w-4 h-4\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z\",\"clipRule\":\"evenodd\"}]]}]]}]],\"target\":\"_blank\",\"rel\":\"noopener noreferrer\"}]]}]]}]\n"])</script></body></html>