CINXE.COM

<!DOCTYPE html><html class="__className_f35434 pro" 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/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/8171-a7785ff5315c9ebb.js" async=""></script><script src="/_next/static/chunks/app/pro/page-2b6d16e225ee31e4.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/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/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/350-6aebeaaf1444c430.js" async=""></script><script src="/_next/static/chunks/app/pro/layout-3d4350635e311487.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>React Flow Pro - React Flow</title><meta name="description" content="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"/><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/pro"/><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="React Flow Pro - React Flow"/><meta property="og:description" content="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"/><meta property="og:url" content="https://reactflow.dev/pro"/><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="React Flow Pro - React Flow"/><meta name="twitter:description" content="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"/><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" aria-current="true" href="/pro">Pricing</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="/pro/examples">Pro 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="/pro/case-studies">Case Studies</a><a href="https://xyflow.com/contact" target="_blank" rel="noreferrer" 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">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></div><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 ml-auto shrink-0" href="https://pro.reactflow.dev/signup">Sign Up</a><button class="x:transition x:cursor-pointer nextra-hamburger x:md:hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" height="24" class=""><g><path d="M4 6h16"></path></g><path d="M4 12h16"></path><g><path d="M4 18h16"></path></g></svg></button></nav></header><aside class="nextra-mobile-nav x:flex x:flex-col x:fixed x:inset-0 x:pt-(--nextra-navbar-height) x:z-20 x:overscroll-contain x:[contain:layout_style] x:md:hidden x:[.nextra-banner:not([class$=hidden])~&]:pt-[calc(var(--nextra-banner-height)+var(--nextra-navbar-height))] x:bg-nextra-bg x:[transform:translate3d(0,-100%,0)]"><ul class="x:grid x:gap-1 x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask"><li class="open active"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:bg-primary-100 x:font-semibold x:text-primary-800 x:dark:bg-primary-400/10 x:dark:text-primary-600 x:contrast-more:border-primary-500!" data-href="/pro" type="button" data-headlessui-state="">Pricing<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:*:transition-none x:*:origin-center x:*:transition-transform x:*:rtl:-rotate-180 x:*:ltr:rotate-90 x:*:rtl:-rotate-270"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[""] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3"><li class="active"><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:bg-primary-100 x:font-semibold x:text-primary-800 x:dark:bg-primary-400/10 x:dark:text-primary-600 x:contrast-more:border-primary-500!" href="/pro">React Flow Pro</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="/pro/case-studies" type="button" data-headlessui-state="">Case Studies<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="/pro/case-studies">React Flow Pro Case Studies</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/pro/case-studies/carto-case-study">Improving Carto's end-user experience with React Flow Pro 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="/pro/case-studies/doubleloop-case-study">Tracking business goals with React Flow-powered maps</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/pro/case-studies/hubql-case-study">Flexible data model visualization with Hubql and React 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="/pro/case-studies/onesignal-case-study">Automating OneSignal's customer engagement with a React Flow workflow builder</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="/pro/examples">React Flow Pro 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="/pro/pricing">React Flow Pro Pricing</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-500 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/pro/quote-request">Request a Quote</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="/pro/examples">Pro 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="/pro/case-studies">Case Studies</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></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><div class="relative"><div class="absolute w-full h-[50vw] bg-gradient bg-no-repeat bg-contain lg:bg-[length:50%] bg-[90%_top] pointer-events-none -z-10"></div></div><div class="relative z-10 grid lg:grid-cols-2 lg:gap-40"><div class=""><h3 class="text-sm font-bold mb-6 flex items-center uppercase tracking-wider text-primary"><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="inline-block w-6 h-6 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</h3><h1 class="tracking-[-0.02rem] text-5xl lg:text-6xl mb-6 font-black">Build Better Node-Based UIs with <span class="text-primary">React Flow</span></h1><p class="text-lg leading-7 mb-4 lg:mb-6 max-w-3xl">Thanks for checking out React Flow Pro! We are Christopher, Moritz, Abbey and Peter, and we are the team building and maintaining React Flow</p><div><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="https://pro.reactflow.dev"><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-2"><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> Get Started</a></div></div><div><p class="mt-4 mb-2"><strong>React Flow is open-source MIT-licensed software</strong>, and it will be forever. Our library enables thousands of solo developers and organizations like Stripe and Linkedin to build their node-based apps. With so many active users, it takes time and effort to maintain the library, docs, and community. We can’t do that without your support.</p><p><strong>Why Subscribe?</strong> With your subscription, you are ensuring the sustainable maintenance and development of the React Flow library. This is how we make sure React Flow stays MIT-licensed. In return, you get a high-quality, maintained, updated library, along with benefits like direct support, prioritized feature requests, and access to our Pro Examples.</p></div></div></div><div><div class="flex flex-wrap justify-between lg:justify-center relative mb-8 mt-6 lg:mt-10"><div class="rounded-full flex gap-1 bg-gray-100 p-2 "><button 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">Monthly</button><button 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 font-bold hover:bg-gray-50 border border-solid border-gray-100 py-2 h-9 px-6 text-gray-400 bg-gray-100 shadow-none">Yearly</button></div><button type="button" role="combobox" aria-controls="radix-:Rijtenlb:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" class="flex h-10 items-center justify-between rounded-full border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-[100px] absolute right-0"><span style="pointer-events:none"></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 opacity-50"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div><div class="p-2 flex border border-solid border-gray-100 bg-white rounded-3xl"><div class="shadow-md relative overflow-hidden flex-grow border border-solid border-gray-100 bg-white rounded-[22px]"><div class="grid grid-cols-1 lg:grid-cols-3 gap-0"><div class="p-8 md:p-12 lg:p-14"><div class="font-bold text-4xl">Starter</div><div class="text-lg leading-tight h-[120px] relative mt-6">Best for start-ups and businesses who build commercial products with React Flow.</div><div class="mb-8 lg:mb-20"><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-black text-white hover:bg-black/90 px-6 h-10 text-md rounded-full shrink-0" href="https://pro.reactflow.dev/signup">Sign up</a><div class="ml-4 leading-tight"><div class="flex"><div class="font-bold">$139</div></div><div class="text-light">per month</div></div></div></div><div class="mt-8"><div class="text-light mb-4">Included Features</div><ul><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div><span>Access to <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/pro/examples">Pro Examples</a> and <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/components/templates/workflow-editor">Templates</a></span></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Prioritized Github Issues</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Invite 1 team member<button data-state="closed" class="inline ml-0.5"><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-[18px] h-[18px] shrink-0 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path></svg></button></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Keep the library running and maintained under an MIT License</div></li></ul></div></div><div class="p-8 md:p-12 lg:p-14 border-x border-solid border-gray-100 bg-gradient-to-b from-primary/5"><div class="font-bold text-4xl text-primary">Professional</div><div class="text-lg leading-tight h-[120px] relative mt-6">Best for companies that want a direct wire to the React Flow team.</div><div class="mb-8 lg:mb-20"><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 shrink-0" href="https://pro.reactflow.dev/signup">Sign up</a><div class="ml-4 leading-tight"><div class="flex"><div class="font-bold">$269</div></div><div class="text-light">per month</div></div></div></div><div class="mt-8"><div class="text-light mb-4">Included Features</div><ul><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div><span>Access to <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/pro/examples">Pro Examples</a> and <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/components/templates/workflow-editor">Templates</a></span></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Prioritized Github Issues</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Invite 5 team members<button data-state="closed" class="inline ml-0.5"><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-[18px] h-[18px] shrink-0 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path></svg></button></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Keep the library running and maintained under an MIT License</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Up to 1 hour of individual support via email per month</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5 text-primary"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Introduction call with one of the creators of React Flow</div></li></ul></div></div><div class="p-8 md:p-12 lg:p-14"><div class="font-bold text-4xl">Enterprise</div><div class="text-lg leading-tight h-[120px] relative mt-6">For large companies who want to have guidance and insights from the React Flow team.</div><div class="mb-8 lg:mb-20"><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-secondary text-secondary-foreground hover:bg-gray-50 border border-solid border-gray-100 px-6 h-10 text-md rounded-full shrink-0" href="/pro/enterprise">Request a Quote</a></div></div><div class="mt-8"><div class="text-light mb-4">Included Features</div><ul><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div><span>Perpetual access to <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/pro/examples">Pro Examples</a> and <a class="text-primary hover:underline text-base leading-relaxed" href="https://reactflow.dev/components/templates/workflow-editor">Templates</a></span></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Prioritized Github Issues</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Invite 10 team members<button data-state="closed" class="inline ml-0.5"><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-[18px] h-[18px] shrink-0 text-gray-600"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path></svg></button></div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Keep the library running and maintained under an MIT License</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>1 hour of individual support via voice, video or email per month</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Introduction call with one of the creators of React Flow</div></li><li class="mb-2 flex gap-1"><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-[21px] h-[21px] shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path></svg><div>Custom procurement and payment process</div></li></ul></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">React Flow Pro is 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">Case studies</p><h2 class="text-5xl lg:text-6xl font-black leading mb-4 tracking-normal">See what our subscribers build</h2></div><div><p class="text-base leading-relaxed mt-4 mb-4">React Flow Pro subscribers use pro examples, prioritized issues, and support to build advanced workflow builders, node-based editors, and diagramming tools.</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="/pro/case-studies">See all case studies</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-:R53tenlb:-trigger-DoubleLoop" id="radix-:R53tenlb:-content-DoubleLoop" 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="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%2Fcase-studies%2Fdoubleloop-screenshot.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Fcase-studies%2Fdoubleloop-screenshot.png&w=3840&q=75"/></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R53tenlb:-trigger-OneSignal" id="radix-:R53tenlb:-content-OneSignal" 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%2Fcase-studies%2Fonesignal-screenshot.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Fcase-studies%2Fonesignal-screenshot.png&w=3840&q=75"/></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:R53tenlb:-trigger-Carto" id="radix-:R53tenlb:-content-Carto" 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%2Fcase-studies%2Fcarto-screenshot.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=750&q=75 750w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=828&q=75 828w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=1080&q=75 1080w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=1200&q=75 1200w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=1920&q=75 1920w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=2048&q=75 2048w, /_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimg%2Fcase-studies%2Fcarto-screenshot.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-:R53tenlb:-content-DoubleLoop" data-state="active" id="radix-:R53tenlb:-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 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">DoubleLoop</p><p class="text-base leading-snug opacity-80">Tracking business goals with React Flow-powered maps</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R53tenlb:-content-OneSignal" data-state="inactive" id="radix-:R53tenlb:-trigger-OneSignal" 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">OneSignal</p><p class="text-base leading-snug opacity-80">Automating customer engagement with a workflow builder</p></div></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:R53tenlb:-content-Carto" data-state="inactive" id="radix-:R53tenlb:-trigger-Carto" 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">Carto</p><p class="text-base leading-snug opacity-80">Spatial data analysis pipelines with a no-code pipeline editor</p></div></button></div></div></div></div></div></div><div class="flex justify-center mt-32" id="FAQ"><div class="max-w-3xl w-full"><div class="flex justify-center items-center mb-4"><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-8 h-8 text-react"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path></svg></div><div class="text-center text-4xl font-bold">Frequently Asked Questions</div><div class="mt-12"><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><div data-orientation="vertical"><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R139btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:R39btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Is React Flow Pro a different library than React Flow?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R139btenlb:" hidden="" role="region" aria-labelledby="radix-:R39btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R159btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:R59btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Can I get a free trial of React Flow Pro?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R159btenlb:" hidden="" role="region" aria-labelledby="radix-:R59btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R179btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:R79btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">I / my company can't afford the monthly subscription price.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R179btenlb:" hidden="" role="region" aria-labelledby="radix-:R79btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100" id="team-members"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R199btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:R99btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Can my team members access the pro examples?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R199btenlb:" hidden="" role="region" aria-labelledby="radix-:R99btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1b9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rb9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">I need further company details to subscribe through my organization.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1b9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rb9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1d9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rd9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Can your team build a custom React Flow app for us?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1d9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rd9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100" id="email-support"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1f9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rf9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">What is included in the individual email support?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1f9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rf9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1h9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rh9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">What happens when I unsubscribe?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1h9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rh9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1j9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rj9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Can I use React Flow for my commercial project without a subscription?<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1j9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rj9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div><div data-state="closed" data-orientation="vertical" class="border-b border-slate-100"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:R1l9btenlb:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:Rl9btenlb:" class="flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [&[data-state=open]>svg]:rotate-180" data-radix-collection-item="">I still have questions about subscribing.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-4 w-4 shrink-0 transition-transform duration-200"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"></path></svg></button></h3><div data-state="closed" id="radix-:R1l9btenlb:" hidden="" role="region" aria-labelledby="radix-:Rl9btenlb:" data-orientation="vertical" class="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal" style="--radix-accordion-content-height:var(--radix-collapsible-content-height);--radix-accordion-content-width:var(--radix-collapsible-content-width)"></div></div></div></div></div></div><div class="my-16 lg:my-24 mx-auto lg:max-w-[800px]"><h3 class="font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-12 mt-32">Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro</h3><div class="flex justify-center space-x-8"><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 flex items-center" href="https://pro.reactflow.dev/signup"><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>Sign Up Now</a></div></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">React Flow Pro</p><a class="block" href="/pro/pricing">Pricing</a><a class="block" href="/pro/examples">Pro Examples</a><a class="block" href="/pro/case-studies">Case Studies</a><a class="block" href="/pro/quote-request">Request a Quote</a><a class="block" href="https://pro.reactflow.dev/signup">Sign Up</a><a class="block" href="https://pro.reactflow.dev/login">Sign In</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://xyflow.com/terms-of-use">Terms of Use</a><a class="block" href="https://xyflow.com/ethical-standards">Ethical Standards</a><a class="block" href="https://xyflow.com/privacy">Privacy Policy</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\"\n4:I[50635,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Hero\"]\n5:I[21962,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"\"]\n6:I[18587,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"PricingTable\"]\n7:I[82135,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Image\"]\n8:I[39208,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"default\"]\n9:I[54535,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"ReactPlayer\"]\na:I[50639,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Root\"]\nb:I[50639,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85"])</script><script>self.__next_f.push([1,"f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Item\"]\nc:I[50639,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Header\"]\nd:I[50639,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Trigger\"]\ne:I[50639,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"Content\"]\nf:I[22520,[],\"OutletBoundary\"]\n11:I[22520,[],\"MetadataBoundary\"]\n13:I[22520,[],\"ViewportBoundary\"]\n15: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\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"RVhj74_zYOZK7hSRq6oqW\",\"p\":\"\",\"c\":[\"\",\"pro\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"pro\",{\"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\":[\"pro\",[\"$\",\"$1\",\"c\",{\"children\":[null,\"$L3\"]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"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\":[[\"$\",\"$L4\",null,{\"title\":[\"Build Better Node-Based UIs with\",\" \",[\"$\",\"span\",null,{\"className\":\"text-primary\",\"children\":\"React Flow\"}]],\"subtitle\":\"Thanks for checking out React Flow Pro! We are Christopher, Moritz, Abbey and Peter, and we are the team building and maintaining React Flow\",\"kicker\":\"React Flow Pro\",\"kickerIcon\":[\"$\",\"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\",\"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\"}]]}],\"action\":[\"$\",\"$L5\",null,{\"href\":\"https://pro.reactflow.dev\",\"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-2\",\"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\"}]]}],\" Get Started\"],\"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}],\"backgroundVariant\":\"image\",\"children\":[[\"$\",\"p\",null,{\"className\":\"mt-4 mb-2\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"React Flow is open-source MIT-licensed software\"}],\", and it will be forever. Our library enables thousands of solo developers and organizations like Stripe and Linkedin to build their node-based apps. With so many active users, it takes time and effort to maintain the library, docs, and community. We can’t do that without your support.\"]}],[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Why Subscribe?\"}],\" With your subscription, you are ensuring the sustainable maintenance and development of the React Flow library. This is how we make sure React Flow stays MIT-licensed. In return, you get a high-quality, maintained, updated library, along with benefits like direct support, prioritized feature requests, and access to our Pro Examples.\"]}]]}],[\"$\",\"$L6\",null,{\"className\":\"mt-6 lg:mt-10\"}],[\"$\",\"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\":\"React Flow Pro is used by\"}],[\"$\",\"div\",null,{\"className\":\"grid md:grid-cols-4 grid-cols-2 md:gap-12 gap-8 place-items-center\",\"children\":[[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/zapier.b5b0dc13.svg\",\"height\":28,\"width\":105,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"zapier\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/stripe.af951a3e.svg\",\"height\":23,\"width\":54,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"stripe\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L7\",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\"}],[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/close.d4b07d68.svg\",\"height\":64,\"width\":237,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"close\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/railway.ab3a3093.svg\",\"height\":1024,\"width\":3733,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"railway\",\"className\":\"h-9 w-auto\"}],[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/retool.0d8c5632.svg\",\"height\":24,\"width\":112,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"retool\",\"className\":\"h-6 w-auto\"}],[\"$\",\"$L7\",null,{\"src\":{\"src\":\"/_next/static/media/doubleloop.30d66616.svg\",\"height\":24,\"width\":128,\"blurWidth\":0,\"blurHeight\":0},\"alt\":\"doubleloop\",\"className\":\"h-7 w-auto\"}],[\"$\",\"$L7\",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\":\"Case studies\"}],[\"$\",\"h2\",null,{\"className\":\"text-5xl lg:text-6xl font-black leading mb-4 tracking-normal\",\"ref\":\"$undefined\",\"children\":\"See what our subscribers build\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed mt-4 mb-4\",\"ref\":\"$undefined\",\"children\":\"React Flow Pro subscribers use pro examples, prioritized issues, and support to build advanced workflow builders, node-based editors, and diagramming tools.\"}],[\"$\",\"$L5\",null,{\"href\":\"/pro/case-studies\",\"children\":\"See all case studies\",\"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\":[\"$\",\"$L8\",null,{\"items\":[{\"name\":\"DoubleLoop\",\"text\":\"Tracking business goals with React Flow-powered maps\",\"content\":[\"$\",\"$L7\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/case-studies/doubleloop-screenshot.png\",\"alt\":\"DoubleLoop\",\"fill\":true}]},{\"name\":\"OneSignal\",\"text\":\"Automating customer engagement with a workflow builder\",\"content\":[\"$\",\"$L7\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/case-studies/onesignal-screenshot.png\",\"alt\":\"TypeForm\",\"fill\":true}]},{\"name\":\"Carto\",\"text\":\"Spatial data analysis pipelines with a no-code pipeline editor\",\"content\":[\"$\",\"$L7\",null,{\"className\":\"rounded-xl object-cover\",\"src\":\"/img/case-studies/carto-screenshot.png\",\"alt\":\"TypeForm\",\"fill\":true}]}],\"duration\":5000,\"start\":\"DoubleLoop\"}]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center mt-32\",\"id\":\"FAQ\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-3xl w-full\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center mb-4\",\"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-8 h-8 text-react\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"text-center text-4xl font-bold\",\"children\":\"Frequently Asked Questions\"}],\"$undefined\",[\"$\",\"div\",null,{\"className\":\"mt-12\",\"children\":[[\"$\",\"$L9\",null,{\"className\":\"mb-8\",\"url\":\"https://www.youtube.com/watch?v=jm_UoZXEEnU\",\"width\":\"100%\",\"height\":\"100%\",\"style\":{\"aspectRatio\":\"16 / 9\",\"width\":\"100%\"},\"config\":{\"youtube\":{\"embedOptions\":{\"playerVars\":{\"color\":\"white\",\"cc_load_policy\":1,\"cc_lang_pref\":\"en\",\"controls\":1}}}}}],[\"$\",\"$La\",null,{\"type\":\"multiple\",\"children\":[[\"$\",\"$Lb\",\"item-0\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-0\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"Is React Flow Pro a different library than React Flow?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"\\\"React Flow Pro\\\" is not an additional library, but instead a paid service built around the open-source\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/xyflow/xyflow\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"React Flow library\"}],\".\"]}]}]]}],[\"$\",\"$Lb\",\"item-1\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-1\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"Can I get a free trial of React Flow Pro?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"When you\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://pro.reactflow.dev/signup\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"create a React Flow Pro account\"}],\", you can log in to the pro platform and access the Helper Lines pro example for free. If you subscribe, you can access all of the pro examples.\"]}]}]]}],[\"$\",\"$Lb\",\"item-2\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-2\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"I / my company can't afford the monthly subscription price.\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"If you need access to the Pro Example code for a non-commercial project:\",[\"$\",\"ul\",null,{\"className\":\"list-disc pl-8 mb-4\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"For \",[\"$\",\"strong\",null,{\"children\":\"educational purposes\"}],\", email us at info@xyflow.com using your university email address with a link to the example you're looking for.\"]}],[\"$\",\"li\",null,{\"children\":[\"For \",[\"$\",\"strong\",null,{\"children\":\"non-commercial open source projects\"}],\",\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"contact us\"}],\" \",\"with the link to the github or gitlab repository.\"]}]]}],[\"$\",\"div\",null,{\"children\":[\"If you are a \",[\"$\",\"strong\",null,{\"children\":\"pre-revenue startup\"}],\",\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"contact us\"}],\" \",\"for a startup discount.\"]}]]}]}]]}],[\"$\",\"$Lb\",\"item-3\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"team-members\",\"value\":\"item-3\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"Can my team members access the pro examples?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"Yes. You can add a team member\",\"'\",\"s email address in the Pro Platform, and they will receive an email to create an account.\",[\"$\",\"br\",null,{}],\"Then they will have access to the Pro Platform where they can access the Pro Example code.\"]}]}]]}],[\"$\",\"$Lb\",\"item-4\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-4\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"I need further company details to subscribe through my organization.\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"You can find all of our company and invoicing details\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://wbkd.notion.site/Company-and-Invoicing-Details-for-subscribing-to-React-Flow-125f6b699fb24c93aa7016c588b3ae35\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"target\":\"_blank\",\"children\":\"here\"}],\".\",[\"$\",\"br\",null,{}],\"If your organization already uses GitHub sponsorships, feel free to do a sponsorship on our\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/sponsors/xyflow\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"target\":\"_blank\",\"children\":\"GitHub Sponsors website\"}],\" \",\"for the same subscription price, then send us an email so we can upgrade you to the correct plan.\"]}]}]]}],[\"$\",\"$Lb\",\"item-5\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-5\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"Can your team build a custom React Flow app for 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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"We have project partners who would be happy to help build your custom React Flow app.\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"target\":\"_blank\",\"children\":\"Contact us\"}],\" \",\"with a description of what you're looking to build and the project scope, and we'll put you in touch. (The core team is busy maintaining the library, so we don't take on these projects ourselves.)\"]}]}]]}],[\"$\",\"$Lb\",\"item-6\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"email-support\",\"value\":\"item-6\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"What is included in the individual email support?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":\"With a Pro subscription, we can provide custom examples for your specific use case, answer any questions you have about the library, and send your team in the right direction in whatever way we can. This support will take place via email for up to 1 hour per month.\"}]}]]}],[\"$\",\"$Lb\",\"item-7\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-7\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"What happens when I unsubscribe?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":\"After unsubscribing, you will no longer be able to access the Pro Example code through our website. You will still be able to use React Flow as usual and continue receiving updates to the library. You can continue using the Pro Example code in your projects, even if you're no longer a subscriber.\"}]}]]}],[\"$\",\"$Lb\",\"item-8\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-8\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"Can I use React Flow for my commercial project without a subscription?\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"Yes. The React Flow library is under an\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"MIT License\"}],\". We rely on the support of commercial organizations and projects to keep React Flow maintained and consistently updated. If your organization is able to afford a subscription, we would recommend it in order to make sure React Flow and its ecosystem continue to be a reliable resource.\"]}]}]]}],[\"$\",\"$Lb\",\"item-9\",{\"ref\":\"$undefined\",\"className\":\"border-b border-slate-100\",\"id\":\"$undefined\",\"value\":\"item-9\",\"children\":[[\"$\",\"$Lc\",null,{\"className\":\"flex\",\"children\":[\"$\",\"$Ld\",null,{\"ref\":\"$undefined\",\"className\":\"flex flex-1 items-center justify-between py-5 font-medium text-lg transition-all hover:text-neutral-600 [\u0026[data-state=open]\u003esvg]:rotate-180\",\"children\":[\"I still have questions about subscribing.\",[\"$\",\"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\":\"h-4 w-4 shrink-0 transition-transform duration-200\",\"children\":[null,[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z\",\"clipRule\":\"evenodd\"}]]}]]}]}],[\"$\",\"$Le\",null,{\"ref\":\"$undefined\",\"className\":\"overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down leading-normal\",\"children\":[\"$\",\"div\",null,{\"className\":\"pb-8 pt-2\",\"children\":[\"We're happy to answer any questions you have.\",\" \",[\"$\",\"$L5\",null,{\"href\":\"https://xyflow.com/contact\",\"className\":\"text-primary hover:underline text-base leading-relaxed\",\"ref\":\"$undefined\",\"children\":\"Contact us\"}],\", we check our email regularly and usually reply in a day or two.\"]}]}]]}]]}]]}]]}]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"my-16 lg:my-24 mx-auto lg:max-w-[800px]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-bold tracking-[-0.02rem] text-2xl lg:text-3xl text-center mb-12 mt-32\",\"ref\":\"$undefined\",\"children\":\"Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center space-x-8\",\"children\":[\"$\",\"$L5\",null,{\"href\":\"https://pro.reactflow.dev/signup\",\"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 flex items-center\",\"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\"}]]}],\"Sign Up Now\"],\"ref\":null}]}]]}]]}],null,[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"QYf_WPaiujHUZDsBxveg5\",{\"children\":[[\"$\",\"$L11\",null,{\"children\":\"$L12\"}],[\"$\",\"$L13\",null,{\"children\":\"$L14\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$15\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"16: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\"]\n17: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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"Fathom\"]\n18:I[72499,[],\"\"]\n19:I[2671,[],\"\"]\n"])</script><script>self.__next_f.push([1,"2:[\"$\",\"$L16\",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\":[[\"$\",\"$L17\",null,{\"id\":\"LXMRMWLB\",\"domains\":[\"reactflow.dev\"]}],[\"$\",\"$L18\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L19\",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,"1a: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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"ThemeConfigProvider\"]\n1b: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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"LastUp"])</script><script>self.__next_f.push([1,"dated\"]\n1d:I[48855,[\"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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"ThemeProvider\"]\n1e: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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"Skip"])</script><script>self.__next_f.push([1,"NavLink\"]\n1f:I[23922,[\"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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"ConfigProvider\"]\n20:I[27774,[\"8456\",\"static/chunks/8456-dd184f4314730770.js\",\"4047\",\"static/chunks/4047-de6dd70d3ea81044.js\",\"2417\",\"static/chunks/2417-85f239f6f318d69e.js\",\"8171\",\"static/chunks/8171-a7785ff5315c9ebb.js\",\"1342\",\"static/chunks/app/pro/page-2b6d16e225ee31e4.js\"],\"LogoLabel\"]\n21:I[68027,[\"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\",\"350\",\"static/chunks/350-"])</script><script>self.__next_f.push([1,"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"ClientNavbar\"]\n22: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\",\"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\",\"5225\",\"static/chunks/app/pro/layout-3d4350635e311487.js\"],\"MobileNav\"]\n"])</script><script>self.__next_f.push([1,"3:[\"$\",\"$L1a\",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\":[\"$\",\"$L1b\",null,{}],\"navigation\":{\"next\":true,\"prev\":true},\"search\":null,\"sidebar\":{\"defaultMenuCollapseLevel\":2,\"defaultOpen\":true,\"toggleButton\":false},\"themeSwitch\":{\"dark\":\"Dark\",\"light\":\"Light\",\"system\":\"System\"},\"toc\":{\"backToTop\":null,\"extraContent\":\"$L1c\",\"float\":true,\"title\":\"On This Page\"}},\"children\":[\"$\",\"$L1d\",null,{\"attribute\":\"class\",\"defaultTheme\":\"light\",\"disableTransitionOnChange\":true,\"forcedTheme\":\"light\",\"children\":[[\"$\",\"$L1e\",null,{}],\"$undefined\",[\"$\",\"$L1f\",null,{\"pageMap\":[{\"data\":{\"*\":{\"type\":\"page\"},\"learn\":{\"display\":\"hidden\"},\"api-reference\":{\"display\":\"hidden\"},\"examples\":{\"display\":\"hidden\"},\"components\":{\"display\":\"hidden\"},\"showcase\":{\"display\":\"hidden\"},\"more\":{\"display\":\"hidden\"},\"pro\":{\"display\":\"normal\"},\"pro-examples\":{\"display\":\"normal\"},\"case-studies\":{\"display\":\"normal\"},\"contact-us\":{\"display\":\"normal\"},\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":\"\"}}},{\"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\"}],\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":{\"changelog\":{\"href\":\"/whats-new\",\"title\":\"Changelog\"},\"blog\":{\"href\":\"https://xyflow.com/blog\",\"title\":\"Blog\"},\"contact-us\":{\"href\":\"https://xyflow.com/contact\",\"title\":\"Contact Us\"}},\"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\":[{\"data\":{}},{\"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\":[{\"data\":{}},{\"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\":[\"$\",\"$L20\",null,{\"label\":\"React Flow\",\"labelClassName\":\"mr-5 md:max-lg:hidden\"}]}],[\"$\",\"$L21\",null,{\"className\":\"x:me-auto\",\"children\":[\"$undefined\",\"$undefined\",[\"$\",\"$L5\",null,{\"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-primary text-primary-foreground hover:bg-primary/80 py-2 h-9 px-6 ml-auto shrink-0\",\"href\":\"https://pro.reactflow.dev/signup\",\"children\":\"Sign Up\",\"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\",\"React Flow Pro\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"React Flow Pro\"}],[[\"$\",\"$L5\",\"/pro/pricing\",{\"href\":\"/pro/pricing\",\"className\":\"block\",\"children\":\"Pricing\"}],[\"$\",\"$L5\",\"/pro/examples\",{\"href\":\"/pro/examples\",\"className\":\"block\",\"children\":\"Pro Examples\"}],[\"$\",\"$L5\",\"/pro/case-studies\",{\"href\":\"/pro/case-studies\",\"className\":\"block\",\"children\":\"Case Studies\"}],[\"$\",\"$L5\",\"/pro/quote-request\",{\"href\":\"/pro/quote-request\",\"className\":\"block\",\"children\":\"Request a Quote\"}],[\"$\",\"$L5\",\"https://pro.reactflow.dev/signup\",{\"href\":\"https://pro.reactflow.dev/signup\",\"className\":\"block\",\"children\":\"Sign Up\"}],[\"$\",\"$L5\",\"https://pro.reactflow.dev/login\",{\"href\":\"https://pro.reactflow.dev/login\",\"className\":\"block\",\"children\":\"Sign In\"}]]]}],[\"$\",\"div\",\"Social\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Social\"}],[[\"$\",\"$L5\",\"https://discord.gg/RVmnytFmGW\",{\"href\":\"https://discord.gg/RVmnytFmGW\",\"className\":\"block\",\"children\":\"Discord\"}],[\"$\",\"$L5\",\"https://github.com/xyflow\",{\"href\":\"https://github.com/xyflow\",\"className\":\"block\",\"children\":\"Github\"}],[\"$\",\"$L5\",\"https://x.com/xyflowdev\",{\"href\":\"https://x.com/xyflowdev\",\"className\":\"block\",\"children\":\"X / Twitter\"}],[\"$\",\"$L5\",\"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\"}],[[\"$\",\"$L5\",\"https://xyflow.com/blog\",{\"href\":\"https://xyflow.com/blog\",\"className\":\"block\",\"children\":\"Blog\"}],[\"$\",\"$L5\",\"https://xyflow.com/open-source\",{\"href\":\"https://xyflow.com/open-source\",\"className\":\"block\",\"children\":\"Open Source\"}],[\"$\",\"$L5\",\"https://xyflow.com/about\",{\"href\":\"https://xyflow.com/about\",\"className\":\"block\",\"children\":\"About\"}],[\"$\",\"$L5\",\"https://xyflow.com/contact\",{\"href\":\"https://xyflow.com/contact\",\"className\":\"block\",\"children\":\"Contact\"}],[\"$\",\"$L5\",\"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\"}],[[\"$\",\"$L5\",\"https://xyflow.com/terms-of-use\",{\"href\":\"https://xyflow.com/terms-of-use\",\"className\":\"block\",\"children\":\"Terms of Use\"}],[\"$\",\"$L5\",\"https://xyflow.com/ethical-standards\",{\"href\":\"https://xyflow.com/ethical-standards\",\"className\":\"block\",\"children\":\"Ethical Standards\"}],[\"$\",\"$L5\",\"https://xyflow.com/privacy\",{\"href\":\"https://xyflow.com/privacy\",\"className\":\"block\",\"children\":\"Privacy Policy\"}],[\"$\",\"$L5\",\"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\":[[\"$\",\"$L22\",null,{}],[\"$\",\"$L18\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"pro\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L19\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"div\",null,{\"className\":\"grid gap-2 x:text-xs x:font-medium\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://xyflow.com/contact\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus xy-link-gray\",\"children\":[\"Question? Give us feedback\",[\" \",[\"$\",\"svg\",null,{\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.7,\"viewBox\":\"0 0 24 24\",\"height\":\"1em\",\"className\":\"x:inline x:align-baseline x:shrink-0\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 17L17 7\"}],[\"$\",\"path\",null,{\"d\":\"M7 7h10v10\"}]]}]]]}],[\"$\",\"p\",null,{\"className\":\"font-bold mt-4\",\"children\":\"What's new?\"}],[[\"$\",\"$L5\",\"/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\"}],[\"$\",\"$L5\",\"/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\"}],[\"$\",\"$L5\",\"/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\"}],[\"$\",\"$L5\",\"/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,"14:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"React Flow Pro - React Flow\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"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\"}],[\"$\",\"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/pro\"}],[\"$\",\"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\":\"React Flow Pro - React Flow\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:description\",\"content\":\"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\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:url\",\"content\":\"https://reactflow.dev/pro\"}],[\"$\",\"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\":\"React Flow Pro - React Flow\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:description\",\"content\":\"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\"}],[\"$\",\"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,"10:null\n"])</script></body></html>