PageSourceSearch

https://reactflow.dev/api-reference/hooks/use-store

html reactflow.dev collected 2026-10-02 02:31:46 UTC 552,261 bytes, 80 lines download raw bytes

1<!DOCTYPE html><html class="ntdapperfont_5f8e0e32-module__K6VCvq__className" dir="ltr" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/chunks/0~1mnsi_~vdmc.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/009ojho0qlhhv.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/05rekjr22krqp.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0cmyx1-jt34_s.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/0xcj1hiv~.kzg.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/12a-0htib34pf.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/0svr58~u15ot~.js"/>
1<script src="/_next/static/chunks/0b3fwq_vd9kch.js" async=""></script>
1<script src="/_next/static/chunks/11_hbdstmb6o_.js" async=""></script>
1<script src="/_next/static/chunks/0sn0nlh4v67iz.js" async=""></script>
1<script src="/_next/static/chunks/09jgyc~4qofwq.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-0f~wugc15btf..js" async=""></script>
1<script src="/_next/static/chunks/13xlor0tivjwk.js" async=""></script>
1<script src="/_next/static/chunks/04anc4z9c6~~a.js" async=""></script>
1<script src="/_next/static/chunks/0fkab6r77kxmu.js" async=""></script>
1<script src="/_next/static/chunks/0gwwz.2kksxpp.js" async=""></script>
1<script src="/_next/static/chunks/0opz664ectdua.js" async=""></script>
1<script src="/_next/static/chunks/0-fnih9t569m7.js" async=""></script>
1<script src="/_next/static/chunks/13n76gr2gfm-w.js" async=""></script>
1<script src="/_next/static/chunks/0s7w260v.c4-l.js" async=""></script>
1<script src="/_next/static/chunks/0xqi_lcbk5s8y.js" async=""></script>
1<script src="/_next/static/chunks/071h.kamtb7jm.js" async=""></script>
1<script src="/_next/static/chunks/0y8g1ow53fqqh.js" async=""></script>
1<script src="/_next/static/chunks/15hw66dz9sx86.js" async=""></script>
1<script src="/_next/static/chunks/0yjodqun~0axy.js" async=""></script>
1<script src="/_next/static/chunks/0owrtxiu.376j.js" async=""></script>
1<script src="/_next/static/chunks/02qqzjj30m0ng.js" async=""></script>
1<script src="/_next/static/chunks/035v40d0.iegx.js" async=""></script>
1<script src="/_next/static/chunks/026-5locr8w-b.js" async=""></script>
1<script src="/_next/static/chunks/0fzd33i~qq9w1.js" async=""></script>
1<script src="/_next/static/chunks/0afp3vgt69pdp.js" async=""></script>
1<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>useStore() - React Flow</title><meta name="description" content="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."/><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/api-reference/hooks/use-store"/><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="useStore() - React Flow"/><meta property="og:description" content="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."/><meta property="og:url" content="https://reactflow.dev/api-reference/hooks/use-store"/><meta property="og:site_name" content="React Flow"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://reactflow.dev/opengraph-image.jpg?opengraph-image.13ofj5b.2-4go.jpg"/><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: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="useStore() - React Flow"/><meta name="twitter:description" content="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."/><meta name="twitter:image" content="https://reactflow.dev/opengraph-image.jpg?opengraph-image.13ofj5b.2-4go.jpg"/><meta name="twitter:image:type" content="image/jpeg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="640"/><link rel="icon" href="/favicon.ico?favicon.0~w8zp6ovw0mv.ico" sizes="256x256" type="image/x-icon"/><link rel="icon" href="/icon.svg?icon.09l0-uedd1wof.svg" sizes="any" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png?apple-icon.01tl0dlgd44gv.png" sizes="180x180" type="image/png"/><style>:root {
2  --nextra-primary-hue: 333deg;
3  --nextra-primary-saturation: 80%;
4  --nextra-primary-lightness: 45%;
5  --nextra-bg: 250,250,250;
6  --nextra-content-width: 90rem;
7}
8.dark {
9  --nextra-primary-hue: 333deg;
10  --nextra-primary-saturation: 80%;
11  --nextra-primary-lightness: 55%;
12  --nextra-bg: 17,17,17;
13}
14::selection {
15  background: hsla(var(--nextra-primary-hue),var(--nextra-primary-saturation),var(--nextra-primary-lightness),.3);
16}
17html {
18  background: rgb(var(--nextra-bg));
19}</style>
19<script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script>
19</head><body><div hidden=""><!--$--><!--/$--></div><!--$?--><template id="B:0"></template><!--/$-->
19<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
19<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])~&amp;]: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 site-native-navbar justify-between"><div class="x:flex x:items-center x:max-md:me-auto"><a class="x:focus-visible:nextra-focus flex items-center space-x-2" href="/"><div class="text-primary h-7 w-7 shrink-0 md:h-8 md:w-8"><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.
191046 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" class="logo-outline" 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" class="logo-outline" 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" class="logo-outline" 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" class="logo-bg-color"></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" class="logo-bg-color"></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" class="logo-bg-color"></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" class="logo-bg-color"></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" class="logo-bg-color"></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" class="logo-bg-color"></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" class="logo-fg-color"></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" class="logo-fg-color"></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" class="logo-fg-color"></path><path opacity="0.35" d="M22 9.5H18V10.5H22V9.5Z" class="logo-fg-color"></path>
19<path opacity="0.35" d="M29.5 17.5V21.5H30.5V17.5H29.5Z" class="logo-fg-color"></path><path opacity="0.35" d="M22 29.5H18V30.5H22V29.5Z" class="logo-fg-color"></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" class="logo-fg-color"></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="shrink-0 text-xl font-black leading-none max-md:text-lg 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-black x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/learn">Learn</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-black 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="/api-reference">Reference</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-black x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/examples">Examples</a><a class="x:focus-visible:nextra-focus x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-black 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="/ui">UI</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-black x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:aria-[current]:font-medium x:aria-[current]:subpixel-antialiased x:aria-[current]:text-current" href="/showcase">Showcase</a><button class="x:text-sm x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:whitespace-nowrap x:text-gray-600 x:hover:text-black x:dark:text-gray-400 x:dark:hover:text-gray-200 x:ring-inset x:transition-colors x:items-center x:flex x:gap-1.5 x:cursor-pointer" id="headlessui-menu-button-_R_3m6jqlb_" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">More<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="x:*:origin-center x:*:transition-transform x:*:rotate-90"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><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-black 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">React Flow Pro</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-black 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="/remove-attribution">Remove Attribution</a></div><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative z-10 items-center justify-center mr-auto hidden max-w-none flex-none md:flex"><div style="position:relative"><ul data-orientation="horizontal" class="group flex flex-1 list-none items-center justify-center gap-0.5 space-x-0" dir="ltr"><li class="relative"><a class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent focus:bg-muted focus:text-foreground h-auto bg-transparent px-2 py-1.5 text-foreground
19/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="" href="/learn">Learn</a></li><li class="relative"><a class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors hover:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent focus:bg-muted focus:text-foreground h-auto px-2 py-1.5 bg-muted text-foreground hover:bg-muted" data-radix-collection-item="" href="/api-reference">Reference</a></li><li class="relative"><a class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent focus:bg-muted focus:text-foreground h-auto bg-transparent px-2 py-1.5 text-foreground/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="" href="/examples">Examples</a></li><li class="relative"><a class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent focus:bg-muted focus:text-foreground h-auto bg-transparent px-2 py-1.5 text-foreground/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="" href="/ui">UI</a></li><li class="relative"><a class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent focus:bg-muted focus:text-foreground h-auto bg-transparent px-2 py-1.5 text-foreground/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="" href="/showcase">Showcase</a></li><li class="relative"><button id="radix-_R_7ejqlb_-trigger-radix-_R_d7ejqlb_" data-state="closed" aria-expanded="false" aria-controls="radix-_R_7ejqlb_-content-radix-_R_d7ejqlb_" class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 group focus:bg-muted focus:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted h-auto bg-transparent px-3 py-1.5 cursor-pointer text-foreground/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="">Pro<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li><li class="relative"><button id="radix-_R_7ejqlb_-trigger-radix-_R_f7ejqlb_" data-state="closed" aria-expanded="false" aria-controls="radix-_R_7ejqlb_-content-radix-_R_f7ejqlb_" class="group inline-flex w-max items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 group focus:bg-muted focus:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted h-auto bg-transparent px-3 py-1.5 text-foreground/80 hover:bg-muted hover:text-foreground" data-radix-collection-item="">More<!-- --> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button></li></ul></div></nav><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts="Meta+k"><span class="DocSearch-Button-Container">
19<svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8" stroke="currentColor" fill="none" stroke-width="1.4"></circle><path d="m21 21-4.3-4.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button><a class="xy-link-gray focus-visible:nextra-focus" href="https://github.com/xyflow/xyflow" target="_blank" rel="noreferrer"><svg class="nav-github-logo" fill="currentColor" viewBox="3 3 18 18" width="20"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg></a><a class="xy-link-gray focus-visible:nextra-focus" href="https://discord.gg/RVmnytFmGW" target="_blank" rel="noreferrer"><svg class="nav-github-logo" fill="currentColor" viewBox="0 0 130 90" width="23"><title>Discord</title><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"></path></svg></a><div style="width:40px" class="xy-animated-outline flex h-10 animate-pulse items-center justify-center whitespace-nowrap rounded-full p-0 transition-all duration-500"></div><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])~&amp;]:pt-[calc(var(--nextra-banner-height)+var(--nextra-navbar-height))] x:bg-nextra-bg x:[transform:translate3d(0,-100%,0)]"><ul class="x:grid x:gap-1 x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask"><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn" type="button" data-headlessui-state="">Learn<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn">Quick Start</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/concepts" type="button" data-headlessui-state="">Core Concepts<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/concepts/terms-and-definitions">Overview</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/concepts/building-a-flow">Building a Flow</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/concepts/adding-interactivity">Adding Interactivity</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/concepts/the-viewport">
19The Viewport</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/concepts/built-in-components">Built-In Components</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/customization" type="button" data-headlessui-state="">Customization<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-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/custom-nodes">Nodes</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/handles">Handles</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/custom-edges">Edges</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/edge-labels">Edge Labels</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/utility-classe
19s">Utility Classes</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/customization/theming">Theming</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/layouting" type="button" data-headlessui-state="">Layouting<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/layouting/layouting">Overview</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/layouting/sub-flows">Sub Flows</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/advanced-use" type="button" data-headlessui-state="">Advanced Use<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/hooks-providers">Hooks and Providers</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/accessibility">Accessibility</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/testing">Testing</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/typescript">TypeScript</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/uncontrolled-flow">Uncontrolled Flow</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/performance">Performance</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/state-management">State Management</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/computing-flows">Computing Flows</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/ssr-ssg-configuration">Server Side Rendering</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/devtools-and-debugging">Devtools</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/multiplayer">Multiplayer</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/advanced-use/whiteboard">Whiteboard Features</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/tutorials" type="button" data-headlessui-state="">Tutorials<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/tutorials/slide-shows-with-react-flow">Slideshow App</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/tutorials/react-flow-and-the-web-audio-api">Web Audio API</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/tutorials/mind-map-app-with-react-flow">Mind Map App</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/tutorials/getting-started-with-react-flow-components">React Flow UI</a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/learn/troubleshooting" type="button" data-headlessui-state="">Troubleshooting<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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
19:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/troubleshooting/common-errors">Common Errors</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/troubleshooting/migrate-to-v12">Migrate to v12</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/troubleshooting/migrate-to-v11">Migrate to v11</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/learn/troubleshooting/migrate-to-v10">Migrate to v10</a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference">API Reference</a></li></ul></div></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/api-reference" type="button" data-headlessui-state="">Reference<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference">API Reference</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/react-flow">&lt;ReactFlow /&gt;</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/react-flow-provider">&lt;ReactFlowProvider /&gt;</a></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components">Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all x:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/background"><div class="sidebar-title">&lt;
19Background /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/base-edge"><div class="sidebar-title">&lt;BaseEdge /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/control-button"><div class="sidebar-title">&lt;ControlButton /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/controls"><div class="sidebar-title">&lt;Controls /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-label-renderer"><div class="sidebar-title">&lt;EdgeLabelRenderer /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-text"><div class="sidebar-title">&lt;EdgeText /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-toolbar"><div class="sidebar-title">&lt;EdgeToolbar /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/handle"><div class="sidebar-title">&lt;Handle /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/minimap"><div class="sidebar-title">&lt;MiniMap /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resize-control"><div class="sidebar-title">&lt;NodeResizeControl /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resizer"><div class="sidebar-title">&lt;NodeResizer /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-toolbar"><div class="sidebar-title">&lt;NodeToolbar /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/panel"><div class="sidebar-title">&lt;Panel /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/viewport-portal"><div class="sidebar-title">&lt;ViewportPortal /&gt;</div></a></li></ul></div></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks">Hooks<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-connection"><div class="sidebar-title">useConnection()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-edges"><div class="sidebar-title">useEdges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-edges-state"><div class="sidebar-title">useEdgesState()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-handle-connections"><div class="sidebar-title">useHandleConnections()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-internal-node"><div class="sidebar-title">useInternalNode()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-key-press"><div class="sidebar-title">useKeyPress()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-node-connections"><div class="sidebar-title">useNodeConnections()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-node-id"><div class="sidebar-title">useNodeId()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes"><div class="sidebar-title">useNodes()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-data"><div class="sidebar-title">useNodesData()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-initialized"><div class="sidebar-title">useNodesInitialized()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-sta
19te"><div class="sidebar-title">useNodesState()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-on-selection-change"><div class="sidebar-title">useOnSelectionChange()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-on-viewport-change"><div class="sidebar-title">useOnViewportChange()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-react-flow"><div class="sidebar-title">useReactFlow()</div></a></li><li class="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="/api-reference/hooks/use-store"><div class="sidebar-title">useStore()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-store-api"><div class="sidebar-title">useStoreApi()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-update-node-internals"><div class="sidebar-title">useUpdateNodeInternals()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-viewport"><div class="sidebar-title">useViewport()</div></a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types">Types<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all x:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/align"><div class="sidebar-title">Align</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/aria-label-config"><div class="sidebar-title">AriaLabelConfig</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/background-variant"><div class="sidebar-title">
19BackgroundVariant</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/color-mode"><div class="sidebar-title">ColorMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection"><div class="sidebar-title">Connection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-component"><div class="sidebar-title">ConnectionLineComponent</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-component-props"><div class="sidebar-title">ConnectionLineComponentProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-type"><div class="sidebar-title">ConnectionLineType</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-mode"><div class="sidebar-title">ConnectionMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-state"><div class="sidebar-title">
19ConnectionState</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/coordinate-extent"><div class="sidebar-title">CoordinateExtent</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/default-edge-options"><div class="sidebar-title">DefaultEdgeOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/delete-elements"><div class="sidebar-title">DeleteElements</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge"><div class="sidebar-title">Edge</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-change"><div class="sidebar-title">EdgeChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-marker"><div class="sidebar-title">EdgeMarker</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-mouse-handler"><div class="sidebar-title">EdgeMouseHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-props"><div class="sidebar-title">EdgeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-types"><div class="sidebar-title">EdgeTypes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/fit-view-options"><div class="sidebar-title">FitViewOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/handle"><div class="sidebar-title">Handle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/handle-connection"><div class="sidebar-title">HandleConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/internal-node"><div class="sidebar-title">InternalNode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/is-valid-connection"><div class="sidebar-title">IsValidConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/key-code"><div class="sidebar-title">KeyCode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/marker-type"><div class="sidebar-title">MarkerType</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/mini-map-node-props"><div class="sidebar-title">MiniMapNodeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node"><div class="sidebar-title">Node</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node
19-change"><div class="sidebar-title">NodeChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-connection"><div class="sidebar-title">NodeConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-handle"><div class="sidebar-title">NodeHandle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-mouse-handler"><div class="sidebar-title">NodeMouseHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-origin"><div class="sidebar-title">NodeOrigin</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-props"><div class="sidebar-title">NodeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-types"><div class="sidebar-title">NodeTypes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-before-delete"><div class="sidebar-title">OnBeforeDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect"><div class="sidebar-title">OnConnect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect-end"><div class="sidebar-title">OnConnectEnd</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect-start"><div class="sidebar-title">OnConnectStart</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-delete"><div class="sidebar-title">OnDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-edges-change"><div class="sidebar-title">OnEdgesChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-edges-delete"><div class="sidebar-title">OnEdgesDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-error"><div class="sidebar-title">OnError</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-init"><div class="sidebar-title">OnInit</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-move"><div class="sidebar-title">OnMove</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-node-drag"><div class="sidebar-title">OnNodeDrag</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-nodes-change"><div class="sidebar-title">OnNodesChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-nodes-delete"><div class="sidebar-title">
19OnNodesDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-reconnect"><div class="sidebar-title">OnReconnect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-selection-change-func"><div class="sidebar-title">OnSelectionChangeFunc</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/pan-on-scroll-mode"><div class="sidebar-title">PanOnScrollMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/panel-position"><div class="sidebar-title">PanelPosition</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/position"><div class="sidebar-title">Position</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/pro-options"><div class="sidebar-title">ProOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/react-flow-instance"><div class="sidebar-title">ReactFlowInstance</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/react-flow-json-object"><div class="sidebar-title">ReactFlowJsonObject</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/rect"><div class="sidebar-title">Rect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/resize-params"><div class="sidebar-title">ResizeParams</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/selection-drag-handler"><div class="sidebar-title">SelectionDragHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/selection-mode"><div class="sidebar-title">SelectionMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/snap-grid"><div class="sidebar-title">SnapGrid</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/viewport"><div class="sidebar-title">Viewport</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/xy-position"><div class="sidebar-title">XYPosition</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/z-index-mode"><div class="sidebar-title">ZIndexMode</div></a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils">Utils<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all x:rtl:-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-0 x:overflow-hidden" style="height:0;transition-duration:300ms"><ul class="x:grid x:gap-1 x:relative x:before:absolute x:before:inset-y-1 x:before:w-px x:before:bg-gray-200 x:before:content-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/add-edge"><div class="sidebar-title">addEdge()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/apply-edge-changes"><div class="sidebar-title">applyEdgeChanges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/apply-node-changes"><div class="sidebar-title">applyNodeChanges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-bezier-path"><div class="sidebar-title">getBezierPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-connected-edges"><div class="sidebar-title">getConnectedEdges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-incomers"><div class="sidebar-title">getIncomers()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-nodes-bounds"><div class="sidebar-title">
19getNodesBounds()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-outgoers"><div class="sidebar-title">getOutgoers()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-simple-bezier-path"><div class="sidebar-title">getSimpleBezierPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-smooth-step-path"><div class="sidebar-title">getSmoothStepPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-straight-path"><div class="sidebar-title">getStraightPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-viewport-for-bounds"><div class="sidebar-title">getViewportForBounds()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-edge"><div class="sidebar-title">isEdge()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-node"><div class="sidebar-title">isNode()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/reconnect-edge"><div class="sidebar-title">reconnectEdge()</div></a></li></ul></div></li></ul></div></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples" type="button" data-headlessui-state="">Examples<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples"><div class="sidebar-title">All Examples</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/pro-examples"><div class="sidebar-title pro pill">Pro Examples</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/overview"><div class="sidebar-title">Feature Overview</div></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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/nodes" type="button" data-headlessui-state="">Nodes<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/add-node-on-edge-drop"><div class="sidebar-title">Add Node On Edge Drop</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/connection-limit"><div class="sidebar-title">Connection Limit</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/custom-node"><div class="sidebar-title">Custom Nodes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/
19delete-middle-node"><div class="sidebar-title">Delete Middle Node</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/drag-handle"><div class="sidebar-title">Drag Handle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/easy-connect"><div class="sidebar-title">Easy Connect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/intersections"><div class="sidebar-title">Intersections</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/node
19-resizer"><div class="sidebar-title">Node Resizer</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/node-toolbar"><div class="sidebar-title">Node Toolbar</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/proximity-connect"><div class="sidebar-title">Proximity Connect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/rotatable-node"><div class="sidebar-title">Rotatable Node</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/node
19-position-animation"><div class="sidebar-title pro pill">Node Position Animation</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/stress"><div class="sidebar-title">Stress Test</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/update-node"><div class="sidebar-title">Updating Nodes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/nodes/shapes"><div class="sidebar-title pro pill">Shapes</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/edges" type="button" data-headlessui-state="">Edges<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/animating-edges"><div class="sidebar-title">Animating Edges</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/custom-connectionline"><div class="sidebar-title">Custom Connection Line</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/custom-edges"><div class="sidebar-title">Custom Edges</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/delete-edge-on-drop"><div class="sidebar-title">Delete Edge on Drop</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-label-renderer"><div class="sidebar-title">Edge Label Renderer</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-intersection"><div class="sidebar-title">Edge Intersection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-toolbar"><div class="sidebar-title">Edge Toolbar</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-types"><div class="sidebar-title">Edge Types</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/edge-routing"><div class="sidebar-title pro pill">Edge Routing</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/floating-edges"><div class="sidebar-title">Floating Edges</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/markers"><div class="sidebar-title">Edge Markers</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/multi-connection-line"><div class="sidebar-title">Multi Connection Line</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/reconnect-edge"><div class="sidebar-title">Reconnect Edge</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/simple-floating-edges"><div class="sidebar-title">Simple Floating Edges</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/temporary-edges"><div class="sidebar-title">Temporary Edges</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/edges/editable-edge"><div class="sidebar-title pro pill">Editable Edge</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/interaction" type="button" data-headlessui-state="">Interaction<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/computing-flows"><div class="sidebar-title">Computing Flows</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/connection-events"><div class="sidebar-title">
19Connection Events</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/context-menu"><div class="sidebar-title">Context Menu</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/contextual-zoom"><div class="sidebar-title">Contextual Zoom</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/drag-and-drop"><div class="sidebar-title">Drag and Drop</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/prevent-cycles"><div class="sidebar-title">Preventing Cycles</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/save-and-restore"><div class="sidebar-title">Save and Restore</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/touch-device"><div class="sidebar-title">Touch Device</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/validation"><div class="sidebar-title">Validation</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/helper-lines"><div class="sidebar-title pro free pill">Helper Lines</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/collaborative"><div class="sidebar-title pro pill">Collaborative</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/copy-paste"><div class="sidebar-title pro pill">Copy and Paste</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/interaction/undo-redo"><div class="sidebar-title pro pill">Undo and Redo</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/grouping" type="button" data-headlessui-state="">Subflows &amp; Grouping<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-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/grouping/selection-grouping"><div class="sidebar-title pro pill">Selection Grouping</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/grouping/parent-child-relation"><div class="sidebar-title pro pill">Parent Child Relation</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/grouping/sub-flows"><div class="sidebar-title">Sub Flow</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/layout" type="button" data-headlessui-state="">Layout<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/dagre"><div class="sidebar-title">Dagre Tree</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/elkjs"><div class="sidebar-title">Elkjs Tree</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/elkjs-multiple-handles"><div class="sidebar-title">Elkjs Multiple Handles</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/horizontal"><div class="sidebar-title">Horizontal Flow</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/expand-collapse"><div class="sidebar-title pro pill">Expand and Collapse</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/auto-layout"><div class="sidebar-title pro pill">Auto Layout</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/force-layout"><div class="sidebar-title pro pill">Force Layout</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/dynamic-layouting"><div class="sidebar-title pro pill">Dynamic Layouting</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:d
19ark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/layout/node-collisions"><div class="sidebar-title">Node Collisions</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/styling" type="button" data-headlessui-state="">Styling<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/base-style"><div class="sidebar-title">Base Style</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/dark-mode"><div class="sidebar-title">Dark Mode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/tailwind"><div class="sidebar-title">Tailwind</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/styling/turbo-flow"><div class="sidebar-title">Turbo Flow</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/whiteboard" type="button" data-headlessui-state="">Whiteboard<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-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/whiteboard/eraser"><div class="sidebar-title">Eraser Tool</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/whiteboard/lasso-selection"><div class="sidebar-title">Lasso Selection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/whiteboard/rectangle"><div class="sidebar-title">
19Rectangle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/whiteboard/freehand-draw"><div class="sidebar-title pro pill">Freehand Draw</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" data-href="/examples/misc" type="button" data-headlessui-state="">Misc<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/misc/download-image"><div class="sidebar-title">Download Image</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/examples/misc/server-side-image-creation"><div class="sidebar-title pro pill">Server Side Image Creation</div></a></li></ul></div></li></ul></div></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more: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="/ui" type="button" data-headlessui-state="">UI<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-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui">Introduction</a></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more: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="/ui/templates" type="button" data-headlessui-state="">Templates<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/templates/ai-workflow-editor"><div class="sidebar-title pro pill">AI Workflow Editor</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/templates/workflow-editor"><div class="sidebar-title pro pill">Workflow Editor</div></a></li></ul></div></li><li class=""><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more: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="/ui/components" type="button" data-headlessui-state="">Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] x:dark:before:bg-neutral-800 x:ps-3 x:before:start-0 x:pt-1 x:ms-3">
19<li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Node Utilities</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/base-node"><div class="sidebar-title">Base Node</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/node-status-indicator"><div class="sidebar-title">Status Indicator</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/node-appendix"><div class="sidebar-title">Appendix</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/node-tooltip"><div class="sidebar-title">Tooltip</div></a></li><li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Custom Nodes</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/database-schema-node"><div class="sidebar-title">Database Schema</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/placeholder-node"><div class="sidebar-title">Placeholder</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/labeled-group-node"><div class="sidebar-title">Labeled Group</div></a></li>
19<li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Handles</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/base-handle"><div class="sidebar-title">Base Handle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/labeled-handle"><div class="sidebar-title">Labeled Handle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/button-handle"><div class="sidebar-title">Button Handle</div></a></li><li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Custom Edges</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/button-edge"><div class="sidebar-title">Edge with Button</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/data-edge"><div class="sidebar-title">Edge with Node Data</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/animated-svg-edge"><div class="sidebar-title">Animated SVG Edge</div></a></li><li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Controls</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/node-search"><div class="sidebar-title">Node Search</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/zoom-slider"><div class="sidebar-title">
19Zoom Slider</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/zoom-select"><div class="sidebar-title">Zoom Select</div></a></li><li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"><div class="sidebar-title">Misc</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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/ui/components/devtools"><div class="sidebar-title">DevTools</div></a></li></ul></div></li><li class="[word-break:break-word] x:my-4"><hr class="x:mx-2 x:border-t nextra-border"/></li><li class=""><a href="https://github.com/xyflow/web/discussions/new?category=ui-component-requests" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Request a Component<!-- --> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li></ul></div></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/showcase">Showcase</a></li><li class="open"><button class="x:transition x:cursor-pointer x:items-center x:justify-between x:gap-2 x:text-start x:w-full x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" type="button" data-headlessui-state="">More<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/whats-new">Changelog</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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/blog" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Blog<!-- --> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewB
19ox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li><li class=""><a href="https://xyflow.com/contact" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more: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><li class=""><a href="https://play.reactflow.dev" 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50">Playground<!-- --> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></li></ul></div></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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">React Flow Pro<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-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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/dashboard"><span class="flex items-center gap-1.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" height="1.2em"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"></path></svg>Dashboard</span></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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/support"><span class="flex items-center gap-1.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" height="1.2em"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.
19095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"></path></svg>Support</span></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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/team"><span class="flex items-center gap-1.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" height="1.2em"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"></path></svg>Team</span></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark: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/account"><span class="flex items-center gap-1.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" height="1.2em"><path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path></svg>Account</span></a></li><li class="[word-break:break-word] x:not-first:mt-5 x:mb-2 x:px-2 x:py-1.5 x:text-sm x:font-semibold x:text-gray-900 x:dark:text-gray-100"></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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/remove-attribution">Remove Attribution</a></li></ul><div class="nextra-sidebar-footer x:border-t nextra-border x:flex x:items-center x:gap-2 x:py-4 x:mx-4 x:mt-auto"><button title="Change theme" class="x:cursor-pointer x:h-7 x:rounded-md x:px-2 x:text-xs x:font-medium x:transition-colors x:text-gray-600 x:dark:text-gray-400 x:flex x:items-center x:gap-2 x:grow" id="headlessui-listbox-button-_R_dndqlb_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><svg fill="currentColor" viewBox="2 2 20 20" stroke="currentColor" height="12"><path stroke-linecap="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>Light</button></div></aside><!--&--><!--&--><!--&--><div class="x:mx-auto x:flex x:max-w-(--nextra-content-width)"><aside id="_R_lfiv5tlqlb_" class="nextra-sidebar x:print:hidden x:transition-all x:ease-in-out x:max-md:hidden x:flex x:flex-col x:h-[calc(100dvh-var(--nextra-navbar-height))] x:top-(--nextra-navbar-height) x:s
19hrink-0 x:w-64 x:sticky"><div class="x:p-4 x:overflow-y-auto nextra-scrollbar nextra-mask x:grow"><div class="x:transform-gpu x:transition-all x:ease-in-out x:motion-reduce:transition-none x:opacity-100" style="transition-duration:500ms"><ul class="x:grid x:gap-1"><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference">API Reference</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/react-flow">&lt;ReactFlow /&gt;</a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/react-flow-provider">&lt;ReactFlowProvider /&gt;</a></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components">Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/background"><div class="sidebar-title">&lt;Background /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/base-edge"><div class="sidebar-title">&lt;BaseEdge /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/control-button"><div class="sidebar-title">&lt;ControlButton /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/control
19s"><div class="sidebar-title">&lt;Controls /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-label-renderer"><div class="sidebar-title">&lt;EdgeLabelRenderer /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-text"><div class="sidebar-title">&lt;EdgeText /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/edge-toolbar"><div class="sidebar-title">&lt;EdgeToolbar /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/handle"><div class="sidebar-title">&lt;Handle /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/minimap"><div class="sidebar-title">&lt;MiniMap /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resize-control"><div class="sidebar-title">&lt;NodeResizeControl /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-resizer"><div class="sidebar-title">&lt;NodeResizer /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/node-toolbar"><div class="sidebar-title">&lt;NodeToolbar /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/panel"><div class="sidebar-title">&lt;Panel /&gt;</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/components/viewport-portal"><div class="sidebar-title">&lt;ViewportPortal /&gt;</div></a></li></ul></div></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks">Hooks<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-connection"><div class="sidebar-title">useConnection()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-edges"><div class="sidebar-title">useEdges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-edges-state"><div class="sidebar-title">useEdgesState()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-handle-connections"><div class="sidebar-title">useHandleConnections()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-internal-node"><div class="sidebar-title">useInternalNode()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-key-press"><div class="sidebar-title">useKeyPress()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-node-connections"><div class="sidebar-title">useNodeConnections()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-node-id"><div class="sidebar-title">useNodeId()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes"><div class="sidebar-title">useNodes()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-data"><div class="sidebar-title">useNodesData()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-initialized"><div class="sidebar-title">useNodesInitialized()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-nodes-state"><div class="sidebar-title">useNodesState()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-on-selection-change"><div class="sidebar-title">useOnSelectionChange()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-on-viewport-change"><div class="sidebar-title">useOnViewportChange()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray
19-50" href="/api-reference/hooks/use-react-flow"><div class="sidebar-title">useReactFlow()</div></a></li><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="/api-reference/hooks/use-store"><div class="sidebar-title">useStore()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-store-api"><div class="sidebar-title">useStoreApi()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-update-node-internals"><div class="sidebar-title">useUpdateNodeInternals()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/hooks/use-viewport"><div class="sidebar-title">useViewport()</div></a></li></ul></div></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types">Types<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/align"><div class="sidebar-title">Align</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/aria-label-config"><div class="sidebar-title">AriaLabelConfig</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/background-variant"><div class="sidebar-title">
19BackgroundVariant</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/color-mode"><div class="sidebar-title">ColorMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection"><div class="sidebar-title">Connection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-component"><div class="sidebar-title">ConnectionLineComponent</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-component-props"><div class="sidebar-title">ConnectionLineComponentProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-line-type"><div class="sidebar-title">ConnectionLineType</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-mode"><div class="sidebar-title">ConnectionMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/connection-state"><div class="sidebar-title">
19ConnectionState</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/coordinate-extent"><div class="sidebar-title">CoordinateExtent</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/default-edge-options"><div class="sidebar-title">DefaultEdgeOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/delete-elements"><div class="sidebar-title">DeleteElements</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge"><div class="sidebar-title">Edge</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-change"><div class="sidebar-title">EdgeChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-marker"><div class="sidebar-title">EdgeMarker</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-mouse-handler"><div class="sidebar-title">EdgeMouseHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-props"><div class="sidebar-title">EdgeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/edge-types"><div class="sidebar-title">EdgeTypes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/fit-view-options"><div class="sidebar-title">FitViewOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/handle"><div class="sidebar-title">Handle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/handle-connection"><div class="sidebar-title">HandleConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/internal-node"><div class="sidebar-title">InternalNode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/is-valid-connection"><div class="sidebar-title">IsValidConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/key-code"><div class="sidebar-title">KeyCode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/marker-type"><div class="sidebar-title">MarkerType</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/mini-map-node-props"><div class="sidebar-title">MiniMapNodeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node"><div class="sidebar-title">Node</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node
19-change"><div class="sidebar-title">NodeChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-connection"><div class="sidebar-title">NodeConnection</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-handle"><div class="sidebar-title">NodeHandle</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-mouse-handler"><div class="sidebar-title">NodeMouseHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-origin"><div class="sidebar-title">NodeOrigin</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-props"><div class="sidebar-title">NodeProps</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/node-types"><div class="sidebar-title">NodeTypes</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-before-delete"><div class="sidebar-title">OnBeforeDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect"><div class="sidebar-title">OnConnect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect-end"><div class="sidebar-title">OnConnectEnd</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-connect-start"><div class="sidebar-title">OnConnectStart</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-delete"><div class="sidebar-title">OnDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-edges-change"><div class="sidebar-title">OnEdgesChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-edges-delete"><div class="sidebar-title">OnEdgesDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-error"><div class="sidebar-title">OnError</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-init"><div class="sidebar-title">OnInit</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-move"><div class="sidebar-title">OnMove</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-node-drag"><div class="sidebar-title">OnNodeDrag</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-nodes-change"><div class="sidebar-title">OnNodesChange</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-nodes-delete"><div class="sidebar-title">
19OnNodesDelete</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-reconnect"><div class="sidebar-title">OnReconnect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/on-selection-change-func"><div class="sidebar-title">OnSelectionChangeFunc</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/pan-on-scroll-mode"><div class="sidebar-title">PanOnScrollMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/panel-position"><div class="sidebar-title">PanelPosition</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/position"><div class="sidebar-title">Position</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/pro-options"><div class="sidebar-title">ProOptions</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/react-flow-instance"><div class="sidebar-title">ReactFlowInstance</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/react-flow-json-object"><div class="sidebar-title">ReactFlowJsonObject</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/rect"><div class="sidebar-title">Rect</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/resize-params"><div class="sidebar-title">ResizeParams</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/selection-drag-handler"><div class="sidebar-title">SelectionDragHandler</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/selection-mode"><div class="sidebar-title">SelectionMode</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/snap-grid"><div class="sidebar-title">SnapGrid</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/viewport"><div class="sidebar-title">Viewport</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/xy-position"><div class="sidebar-title">XYPosition</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/types/z-index-mode"><div class="sidebar-title">ZIndexMode</div></a></li></ul></div></li><li class="open"><a class="x:focus-visible:nextra-focus x:items-center x:justify-between x:gap-2 x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils">Utils<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="x:shrink-0 x:rounded-sm x:p-0.5 x:hover:bg-gray-800/5 x:dark:hover:bg-gray-100/5 x:motion-reduce:transition-none x:origin-center x:transition-all 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></a><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-[&quot;&quot;] 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-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/add-edge"><div class="sidebar-title">addEdge()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/apply-edge-changes"><div class="sidebar-title">applyEdgeChanges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/apply-node-changes"><div class="sidebar-title">applyNodeChanges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-bezier-path"><div class="sidebar-title">getBezierPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-connected-edges"><div class="sidebar-title">getConnectedEdges()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-incomers"><div class="sidebar-title">getIncomers()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-nodes-bounds"><div class="sidebar-title">
19getNodesBounds()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-outgoers"><div class="sidebar-title">getOutgoers()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-simple-bezier-path"><div class="sidebar-title">getSimpleBezierPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-smooth-step-path"><div class="sidebar-title">getSmoothStepPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-straight-path"><div class="sidebar-title">getStraightPath()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/get-viewport-for-bounds"><div class="sidebar-title">getViewportForBounds()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-edge"><div class="sidebar-title">isEdge()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/is-node"><div class="sidebar-title">isNode()</div></a></li><li class=""><a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/api-reference/utils/reconnect-edge"><div class="sidebar-title">reconnectEdge()</div></a></li></ul></div></li></ul></div></div><div class="x:sticky x:bottom-0 x:bg-nextra-bg nextra-sidebar-footer x:border-t nextra-border x:flex x:items-center x:gap-2 x:py-4 x:mx-4"><button title="Change theme" class="x:cursor-pointer x:h-7 x:rounded-md x:px-2 x:text-xs x:font-medium x:transition-colors x:text-gray-600 x:dark:text-gray-400 x:flex x:items-center x:gap-2 x:grow" id="headlessui-listbox-button-_R_6talfiv5tlqlb_" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><svg fill="currentColor" viewBox="2 2 20 20" stroke="currentColor" height="12"><path stroke-linecap="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>Light</button></div></aside><nav class="nextra-toc x:order-last x:max-xl:hidden x:w-64 x:shrink-0 x:print:hidden" aria-label="table of contents"><div class="x:grid x:grid-rows-[min-content_1fr_min-content] x:sticky x:top-(--nextra-navbar-height) x:text-sm x:max-h-[calc(100vh-var(--nextra-navbar-height))]"><p class="x:pt-6 x:px-4 x:font-semibold x:tracking-tight">On This Page</p><ul class="x:p-4 nextra-scrollbar x:overscroll-y-contain x:overflow-y-auto x:hyphens-auto nextra-mask">
19<li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#signature" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-600 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Signature</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#examples" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-600 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Examples</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#triggering-store-actions" class="x:focus-visible:nextra-focus x:ms-3 x:block x:transition-colors x:subpixel-antialiased x:text-gray-600 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">Triggering store actions</a></li><li class="x:my-2 x:scroll-my-6 x:scroll-py-6"><a href="#typescript" class="x:focus-visible:nextra-focus x:font-semibold x:block x:transition-colors x:subpixel-antialiased x:text-gray-600 x:hover:text-gray-900 x:dark:text-gray-400 x:dark:hover:text-gray-300 x:contrast-more:text-gray-900 x:contrast-more:underline x:contrast-more:dark:text-gray-50 x:break-words">TypeScript</a></li></ul></div></nav><article class="x:w-full x:min-w-0 x:break-words x:min-h-[calc(100vh-var(--nextra-navbar-height))] x:text-slate-700 x:dark:text-slate-200 x:pb-8 x:px-4 x:pt-4 x:md:px-12"><div class="nextra-breadcrumb x:mt-1.5 x:flex x:items-center x:gap-1 x:overflow-hidden x:text-sm x:text-gray-600 x:dark:text-gray-400 x:contrast-more:text-current"><a class="x:whitespace-nowrap x:transition-colors x:min-w-6 x:overflow-hidden x:text-ellipsis x:focus-visible:nextra-focus x:ring-inset x:hover:text-gray-900 x:dark:hover:text-gray-100" title="Reference" href="/api-reference">Reference</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="x:shrink-0 x:rtl:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><a class="x:whitespace-nowrap x:transition-colors x:min-w-6 x:overflow-hidden x:text-ellipsis x:focus-visible:nextra-focus x:ring-inset x:hover:text-gray-900 x:dark:hover:text-gray-100" title="Hooks" href="/api-reference/hooks">Hooks</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="x:shrink-0 x:rtl:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="x:whitespace-nowrap x:transition-colors x:font-medium x:text-black x:dark:text-gray-100" title=""><div class="sidebar-title">useStore()</div></span></div><div id="nextra-skip-nav"></div><main data-pagefind-body="true"><h1 class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-bold x:mt-2 x:text-4xl">useStore()</h1>
20<p class="x:not-first:mt-[1.25em] x:leading-7"><a href="https://github.com/xyflow/xyflow/blob/main/packages/react/src/hooks/useStore.ts" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">Source on GitHub<!-- --> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewBox="0 0 24 24" height="1em" class="x:inline x:align-baseline x:shrink-0"><path d="M7 17L17 7"></path><path d="M7 7h10v10"></path></svg></a></p>
21<p class="x:not-first:mt-[1.25em] x:leading-7">This hook can be used to subscribe to internal state changes of the React Flow
22component. The <code class="nextra-code" dir="ltr">useStore</code> hook is re-exported from the <a href="https://github.com/pmndrs/zustand" target="_blank" rel="noreferrer" class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]">Zustand<!-- --> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" viewB
22ox="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>
23state management library, so you should check out their docs for more details.</p>
24<div class="nextra-callout x:overflow-x-auto x:not-first:mt-[1.25em] x:flex x:rounded-lg x:border x:py-[.5em] x:pe-[1em] x:contrast-more:border-current! x:bg-blue-100 x:dark:bg-blue-900/30 x:text-blue-700 x:dark:text-blue-400 x:border-blue-700 x:dark:border-blue-600"><div class="x:select-none x:text-[1.25em] x:ps-[.6em] x:pe-[.4em]" style="font-family:&quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;" data-pagefind-ignore="all"><svg viewBox="0 0 16 16" fill="currentColor" height=".8em" class="x:mt-[.3em]"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg></div><div class="x:w-full x:min-w-0"><p class="x:not-first:mt-[1.25em] x:leading-7">This hook should only be used if there is no other way to access the internal
25state. For many of the common use cases, there are dedicated hooks available
26such as <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/api-reference/hooks/use-react-flow"><code class="nextra-code" dir="ltr">useReactFlow</code></a>,
27<a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/api-reference/hooks/use-viewport"><code class="nextra-code" dir="ltr">useViewport</code></a>, etc.</p></div></div>
28<div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-[1.25em]"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { ReactFlow, useStore } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> &#x27;@xyflow/react&#x27;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
29<span> </span>
30<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> nodesLengthSelector</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=&gt;</span></span>
31<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  state.nodes.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> ||</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
32<span> </span>
33<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> NodesLengthDisplay</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
34<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">
34 nodesLength</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(nodesLengthSelector);</span></span>
35<span> </span>
36<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;The current number of nodes is: {nodesLength}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;;</span></span>
37<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
38<span> </span>
39<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> Flow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
40<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span></span>
41<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ReactFlow</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> nodes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{[</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]}&gt;</span></span>
42<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">NodesLengthDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /&gt;</span></span>
43<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">ReactFlow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;</span></span>
44<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  );</span></span>
45<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div>
46<p class="x:not-first:mt-[1.25em] x:leading-7">This example computes the number of nodes eagerly. Whenever the number of nodes
47in the flow changes, the <code class="nextra-code" dir="ltr">&lt;NodesLengthDisplay /&gt;</code> component will re-render. This
48is in contrast to the example in the <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/api-reference/hooks/use-store-api"><code class="nextra-code" dir="ltr">useStoreApi</code></a> hook that only
49computes the number of nodes when a button is clicked.</p>
50<p class="x:not-first:mt-[1.25em] x:leading-7">Choosing whether to calculate values on-demand or to subscribe to changes as they
51happen is a bit of a balancing act. On the one hand, putting too many heavy
52calculations in an event handler can make your app feel sluggish or unresponsive.
53On the other hand, computing values eagerly can lead to slow or unnecessary
54re-renders.</p>
55<p class="x:not-first:mt-[1.25em] x:leading-7">We make both this hook and <a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/api-reference/hooks/use-store-api"><code class="nextra-code" dir="ltr">useStoreApi</code></a> available so that you
56can choose the approach that works best for your use-case.</p>
57<h2 id="signature" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Signature<a href="#signature" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
58<b class="x:mt-[1.25em] x:block">Parameters:</b><table class="x:my-8 x:w-full x:text-sm"><thead class="nextra-border x:border-b x:text-left x:max-lg:hidden"><tr><th class="x:py-1.5">Name</th><th class="x:p-1.5 x:px-3">Type</th><th class="x:py-1.5">Default</th></tr></thead><tbody><tr id="selector" class="x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:group x:mb-5 x:max-lg:block x:max-lg:border x:lg:border-b x:lg:not-target:[&amp;&gt;td&gt;a]:opacity-0"><td class="x:relative x:max-lg:block x:py-3 x:max-lg:px-3"><a href="#selector" class="x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[&quot;#&quot;] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)] x:group-hover:opacity-100! x:lg:top-1/2 x:lg:right-full x:lg:-translate-y-1/2"></a><code class="nextra-code x:max-md:break-all" dir="ltr">selector</code></td><td class="x:p-3 x:max-lg:block x:max-lg:before:content-[&quot;Type:_&quot;]"><code class="nextra-code" dir="ltr">(state: ReactFlowState) =&gt; StateSlice</code><div class="x:mt-2"><p class="x:not-first:mt-[1.25em] x:leading-7">A selector function that returns a slice of the flow’s internal state.
59Extracting or transforming just the state you need is a good practice to avoid unnecessary
60re-renders.</p></div></td><td class="x:max-lg:block x:lg:after:content-[&quot;–&quot;]"></td></tr><tr id="equalityfn" class="x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:group x:mb-5 x:max-lg:block x:max-lg:border x:lg:border-b x:lg:not-target:[&amp;&gt;td&gt;a]:opacity-0"><td class="x:relative x:max-lg:block x:py-3 x:max-lg:px-3"><a href="#equalityfn" class="x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[&quot;#&quot;] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)] x:group-hover:opacity-100! x:lg:top-1/2 x:lg:right-full x:lg:-translate-y-1/2"></a><code class="nextra-code x:max-md:break-all x:after:content-[&quot;?&quot;]" dir="ltr">equalityFn</code></td><td class="x:p-3 x:max-lg:block x:max-lg:before:content-[&quot;Type:_&quot;]"><code class="nextra-code" dir="ltr">
60(a: StateSlice, b: StateSlice) =&gt; boolean</code><div class="x:mt-2"><p class="x:not-first:mt-[1.25em] x:leading-7">A function to compare the previous and next value. This is incredibly useful
61for preventing unnecessary re-renders. Good sensible defaults are using <code class="nextra-code" dir="ltr">Object.is</code> or importing
62<code class="nextra-code" dir="ltr">zustand/shallow</code>, but you can be as granular as you like.</p></div></td><td class="x:max-lg:block x:lg:after:content-[&quot;–&quot;]"></td></tr></tbody></table><b class="x:mt-[1.25em] x:block">Returns:</b><div id="returns" class="x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:text-sm x:relative x:p-3 x:border x:before:content-[&quot;Type:_&quot;] x:mt-5"><a href="#returns" class="x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[&quot;#&quot;] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)]"></a><code class="nextra-code" dir="ltr">StateSlice</code></div>
63<h2 id="examples" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">Examples<a href="#examples" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
64<h3 id="triggering-store-actions" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-8 x:text-2xl">Triggering store actions<a href="#triggering-store-actions" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3>
65<p class="x:not-first:mt-[1.25em] x:leading-7">You can manipulate the internal React Flow state by triggering internal actions
66through the <code class="nextra-code" dir="ltr">useStore</code> hook. These actions are already used internally throughout
67the library, but you can also use them to implement custom functionality.</p>
68<div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-[1.25em]"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { useStore } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> &#x27;@xyflow/react&#x27;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
69<span> </span>
70<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setMinZoomSelector</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">state</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> state.setMinZoom;</span></span>
71<span> </span>
72<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> MinZoomSetter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">() {</span></span>
73<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> setMinZoom</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(setMinZoomSelector);</span></span>
74<span> </span>
75<span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> onClick</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">{() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setMinZoom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)}&gt;set min zoom&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;;</span></span>
76<span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></div>
77<h2 id="typescript" class="x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border">TypeScript<a href="#typescript" class="x:focus-visible:nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2>
78<p class="x:not-first:mt-[1.25em] x:leading-7">This hook can be typed by typing the selector function. See this
79<a class="x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]" href="/learn/advanced-use/typescript#nodetype-edgetype-unions">section in our TypeScript guide</a> for more information.</p>
80<div data-pagefind-ignore="all" class="nextra-code x:relative x:not-first:mt-[1.25em]"><pre class="x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose" tabindex="0"><div class="x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2"><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5 x:md:hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="1em"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="x:transition x:cursor-pointer x:border x:border-gray-300 x:dark:border-neutral-700 x:contrast-more:border-gray-900 x:contrast-more:dark:border-gray-50 x:rounded-md x:p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="1em" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">
80 nodes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> useStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">s</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ReactFlowState</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">CustomNodeType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&gt;) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> s.nodes);</span></span></code></pre></div></main><div class="x:mt-12 x:mb-8 x:text-xs x:text-gray-600 x:text-end x:dark:text-gray-400">Last updated on<!-- --> <time dateTime="2026-08-31T09:44:57.000Z">August 31, 2026</time></div><div class="x:mb-8 x:flex x:items-center x:border-t x:pt-8 nextra-border x:print:hidden"><a title="" class="x:focus-visible:nextra-focus x:text-gray-600 x:dark:text-gray-400 x:hover:text-gray-800 x:dark:hover:text-gray-200 x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:flex x:max-w-[50%] x:items-center x:gap-1 x:py-4 x:text-base x:font-medium x:transition-colors x:[word-break:break-word] x:md:text-lg x:pe-4" href="/api-reference/hooks/use-react-flow"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="20" class="x:inline x:shrink-0 x:ltr:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="sidebar-title">useReactFlow()</div></a><a title="" class="x:focus-visible:nextra-focus x:text-gray-600 x:dark:text-gray-400 x:hover:text-gray-800 x:dark:hover:text-gray-200 x:contrast-more:text-gray-700 x:contrast-more:dark:text-gray-100 x:flex x:max-w-[50%] x:items-center x:gap-1 x:py-4 x:text-base x:font-medium x:transition-colors x:[word-break:break-word] x:md:text-lg x:ps-4 x:ms-auto x:text-end" href="/api-reference/hooks/use-store-api"><div class="sidebar-title">useStoreApi()</div><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="20" class="x:inline x:shrink-0 x:rtl:rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></article></div><!--$--><!--/$--><!--/&--><!--/&--><!--/&--><!--$?--><template id="B:1"></template><!--/$--><footer class="print:bg-transparent py-12 lg:py-18 bg-black text-white"><div class="x:max-w-(--nextra-content-width) mx-auto pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] lg:flex"><div class="shrink-0 md:max-w-[600px] lg:mr-24 lg:max-w-[300px]"><p class="text-light text-base leading-relaxed mb-2">A project by the xyflow team</p><div class="mb-6 text-3xl font-black leading-none tracking-tight 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 h-[100%] grow flex-col"><div class="grid-gap-4 grid grid-cols-2 lg:grid-cols-4"><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Docs</p><a class="block" href="/learn">Getting Started</a><a class="block" href="/api-reference">API Reference</a><a class="block" href="/examples">Examples</a><a class="block" href="/ui">UI</a><a class="block" href="/showcase">Showcase</a><a class="block" href="https://play.reactflow.dev">Playground</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">Careers</a></div><div class="mt-4 lg:mt-0"><p class="text-base leading-relaxed text-light mb-2">Legal</p><a class="block" href="https://github.com/xyflow/xyflow/blob/main/LICENSE">MIT License</a><a class="block" href="https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md">Code of Conduct</a><a class="block" href="https://xyflow.com/imprint">Imprint</a></div></div><p class="text-light mt-auto pt-6 text-sm"><a href="mailto:[email protected]">[email protected]</a> — Copyright © <!-- -->2026<!-- --> <a href="https://webkid.io" target="_blank" rel="noopener noreferrer">webkid GmbH</a>. All rights reserved<!-- --> <!-- -->— website design by<!-- --> <a target="_blank" href="https://facumontanaro.com/" rel="noopener noreferrer">Facu Montanaro</a></p></div></div></div></footer>
80<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
80<script src="/_next/static/chunks/0svr58~u15ot~.js" id="_R_" async=""></script>
80<script>$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};;$RX("B:0","BAILOUT_TO_CLIENT_SIDE_RENDERING")</script>
80<script>$RX("B:1","BAILOUT_TO_CLIENT_SIDE_RENDERING")</script>
80</body></html>
80<script>(self.__next_f=self.__next_f||[]).push([0])</script>
80<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[902063,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"default\"]\n4:I[424540,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\",\"/_next/static/chunks/026-5locr8w-b.js\"],\"default\"]\n5:I[259666,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"default\"]\n6:I[866328,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\",\"/_next/static/chunks/0fzd33i~qq9w1.js\"],\"NotFoundLayout\"]\n8:I[62711,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nf:I[62711,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0"])</script>
80<script>self.__next_f.push([1,".iegx.js\"],\"ViewportBoundary\"]\n11:I[62711,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"MetadataBoundary\"]\n13:I[514743,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"default\",1]\n16:I[423161,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ThemeWorkaround\"]\n17:I[737397,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"Fathom\"]\n18:I[371768,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ThemeConfigProvider\"]\n19:I[30700,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"LastUpdated\"]\n1a:I[917356,[\"/_next/static/chunks/13xlor0t"])</script>
80<script>self.__next_f.push([1,"ivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ThemeProvider\"]\n1b:I[229602,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"SkipNavLink\"]\n1c:I[657943,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ConfigProvider\"]\nf6:I[184836,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"TOCProvider\"]\nf7:I[400078,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"Sidebar\"]\nf8:I[765515,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ClientWrapper\"]\nfd:I[105516,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r"])</script>
80<script>self.__next_f.push([1,"77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"SidebarSubscribeButton\"]\nfe:I[569231,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"LogoLabel\"]\nff:I[635941,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ClientNavbar\"]\n100:I[531607,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"SiteNavbarContent\"]\n101:I[933596,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"\"]\n102:I[400078,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"MobileNav\"]\n103:I[692532,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0o"])</script>
80<script>self.__next_f.push([1,"pz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\",\"/_next/static/chunks/0afp3vgt69pdp.js\"],\"default\"]\n104:I[250605,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"SpeedInsights\"]\n105:I[799909,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"SessionRefresher\"]\n115:I[833416,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"ToggleWordWrapButton\"]\n116:I[901420,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"CopyToClipboard\"]\n11f:I[812775,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"HeadingAnchor\"]\n125:I[319772,[\"/_next/static/chunks/13xlor0tivjwk.js\",\"/_next/static/chunks/04anc4z9c6~~a.js\",\"/_next/static/chunks/0fkab6r77kxmu.js\",\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"/_next/static/chunks/0opz664ectdua.js\",\"/"])</script>
80<script>self.__next_f.push([1,"_next/static/chunks/0-fnih9t569m7.js\",\"/_next/static/chunks/13n76gr2gfm-w.js\",\"/_next/static/chunks/0s7w260v.c4-l.js\",\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"/_next/static/chunks/071h.kamtb7jm.js\",\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"/_next/static/chunks/15hw66dz9sx86.js\",\"/_next/static/chunks/0yjodqun~0axy.js\",\"/_next/static/chunks/0owrtxiu.376j.js\",\"/_next/static/chunks/02qqzjj30m0ng.js\",\"/_next/static/chunks/035v40d0.iegx.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/0~1mnsi_~vdmc.css\",\"style\"]\n:HL[\"/_next/static/chunks/009ojho0qlhhv.css\",\"style\"]\n:HL[\"/_next/static/chunks/05rekjr22krqp.css\",\"style\"]\n:HL[\"/_next/static/chunks/0cmyx1-jt34_s.css\",\"style\"]\n:HL[\"/_next/static/chunks/0xcj1hiv~.kzg.css\",\"style\"]\n:HL[\"/_next/static/chunks/12a-0htib34pf.css\",\"style\"]\n:HL[\"/_next/static/media/54ff2b849676b7ad-s.p.09lms3rp_3lp-.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/NTDapper_black-s.p.0m60_im5sxw3f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/NTDapper_bold-s.p.0jnlwk.2gdn~t.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/NTDapper_medium-s.p.0ymsi0ikdf0ha.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/NTDapper_regular-s.p.137h66fvjn_n9.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
80<script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"api-reference\",\"hooks\",\"use-store\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(content-pages)\",{\"children\":[[\"mdxPath\",\"api-reference/hooks/use-store\",\"c\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0~1mnsi_~vdmc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/009ojho0qlhhv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/05rekjr22krqp.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0cmyx1-jt34_s.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0xcj1hiv~.kzg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/12a-0htib34pf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/13xlor0tivjwk.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/04anc4z9c6~~a.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0fkab6r77kxmu.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/0gwwz.2kksxpp.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/0opz664ectdua.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/0-fnih9t569m7.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-6\",{\"src\":\"/_next/static/chunks/13n76gr2gfm-w.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-7\",{\"src\":\"/_next/static/chunks/0s7w260v.c4-l.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-8\",{\"src\":\"/_next/static/chunks/0xqi_lcbk5s8y.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-9\",{\"src\":\"/_next/static/chunks/071h.kamtb7jm.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-10\",{\"src\":\"/_next/static/chunks/0y8g1ow53fqqh.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-11\",{\"src\":\"/_next/static/chunks/15hw66dz9sx86.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-12\",{\"src\":\"/_next/static/chunks/0yjodqun~0axy.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-13\",{\"src\":\"/_next/static/chunks/0owrtxiu.376j.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-14\",{\"src\":\"/_next/static/chunks/02qqzjj30m0ng.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-15\",{\"src\":\"/_next/static/chunks/035v40d0.iegx.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$4\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/026-5locr8w-b.js\",\"async\":true}]],\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L6\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",null,[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,true,\"$@b\"]},null,true,\"$@c\"]},null,true,\"$@d\"]},null,true,\"$@e\"],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L12\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],true]],\"m\":\"$undefined\",\"G\":[\"$13\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0~1mnsi_~vdmc.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/009ojho0qlhhv.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/05rekjr22krqp.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0cmyx1-jt34_s.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0xcj1hiv~.kzg.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/12a-0htib34pf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":\"$@14\",\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"L3p5O1rZ_nuHtoX9A3qOD\"}\n"])</script>
80<script>self.__next_f.push([1,"15:[]\nc:\"$W15\"\n"])</script>
80<script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"className\":\"ntdapperfont_5f8e0e32-module__K6VCvq__className\",\"dir\":\"ltr\",\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L16\",null,{}],[[\"$\",\"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,{\"value\":{\"copyPageButton\":false,\"darkMode\":true,\"docsRepositoryBase\":\"https://github.com/xyflow/web/tree/main/sites/reactflow.dev\",\"editLink\":null,\"feedback\":{\"content\":null,\"labels\":\"feedback\"},\"i18n\":[],\"lastUpdated\":[\"$\",\"$L19\",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,\"float\":true,\"title\":\"On This Page\"}},\"children\":[\"$\",\"$L1a\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"disableTransitionOnChange\":true,\"storageKey\":\"theme\",\"children\":[[\"$\",\"$L1b\",null,{}],\"$undefined\",[\"$\",\"$L1c\",null,{\"pageMap\":[{\"data\":{\"*\":{\"type\":\"page\"},\"learn\":{},\"api-reference\":{\"title\":\"Reference\"},\"examples\":{\"theme\":{\"layout\":\"full\",\"toc\":false}},\"ui\":{},\"showcase\":{\"title\":\"\"},\"more\":{\"type\":\"menu\",\"items\":{\"changelog\":{\"href\":\"/whats-new\",\"title\":\"Changelog\"},\"case-studies\":{\"href\":\"/pro/case-studies\",\"title\":\"Case Studies\"},\"blog\":{\"href\":\"https://xyflow.com/blog\",\"title\":\"Blog\"},\"contact-us\":{\"href\":\"https://xyflow.com/contact\",\"title\":\"Contact Us\"},\"playground\":{\"href\":\"https://play.reactflow.dev\",\"title\":\"Playground\"}}},\"pro\":{},\"index\":{\"display\":\"hidden\"},\"developer-survey-2023\":{\"display\":\"hidden\",\"theme\":{\"footer\":false}},\"developer-survey-2024\":{\"display\":\"hidden\"},\"whats-new\":{\"display\":\"hidden\"},\"become-a-partner\":{\"display\":\"hidden\"}}},{\"name\":\"learn\",\"route\":\"/learn\",\"children\":[{\"data\":{\"concepts\":{\"title\":\"Core Concepts\"},\"customization\":{\"title\":\"Customization\"},\"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\":\"Quick Start\",\"filePath\":\"src/content/learn/index.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Quick Start\"},{\"name\":\"concepts\",\"route\":\"/learn/concepts\",\"children\":[{\"data\":{\"terms-and-definitions\":{\"title\":\"\"},\"building-a-flow\":{\"title\":\"\"},\"adding-interactivity\":{\"title\":\"\"},\"the-viewport\":{\"title\":\"\"},\"built-in-components\":{\"title\":\"\"}}},{\"name\":\"terms-and-definitions\",\"route\":\"/learn/concepts/terms-and-definitions\",\"frontMatter\":{\"description\":\"Learn about the basic terms and definitions of React Flow\",\"title\":\"Overview\",\"filePath\":\"src/content/learn/concepts/terms-and-definitions.mdx\",\"timestamp\":1788169497000},\"title\":\"Overview\"},{\"name\":\"building-a-flow\",\"route\":\"/learn/concepts/building-a-flow\",\"frontMatter\":{\"description\":\"A step-by-step guide to creating your first flow diagram with React Flow. Learn how to set up the canvas, add nodes and edges, and enhance your flow with built-in features like viewport fitting and custom node types.\",\"title\":\"Building a Flow\",\"filePath\":\"src/content/learn/concepts/building-a-flow.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Building a Flow\"},{\"name\":\"adding-interactivity\",\"route\":\"/learn/concepts/adding-interactivity\",\"frontMatter\":{\"description\":\"This guide will show you how to add basic interactivity to your flow.\",\"title\":\"Adding Interactivity\",\"filePath\":\"src/content/learn/concepts/adding-interactivity.mdx\",\"timestamp\":1788169497000},\"title\":\"Adding Interactivity\"},{\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"Built-In Components\"}],\"title\":\"Core Concepts\"},{\"name\":\"customization\",\"route\":\"/learn/customization\",\"children\":[{\"data\":{\"custom-nodes\":{\"title\":\"\"},\"handles\":{\"title\":\"\"},\"custom-edges\":{\"title\":\"\"},\"edge-labels\":{\"title\":\"\"},\"utility-classes\":{\"title\":\"\"},\"theming\":{\"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.\",\"sidebarTitle\":\"Nodes\",\"title\":\"Custom Nodes\",\"filePath\":\"src/content/learn/customization/custom-nodes.mdx\",\"timestamp\":1788169497000},\"title\":\"Nodes\"},{\"name\":\"handles\",\"route\":\"/learn/customization/handles\",\"frontMatter\":{\"description\":\"This guide shows you how to add handles to custom nodes in React Flow.\",\"title\":\"Handles\",\"filePath\":\"src/content/learn/customization/handles.mdx\",\"timestamp\":1788169497000},\"title\":\"Handles\"},{\"name\":\"custom-edges\",\"route\":\"/learn/customization/custom-edges\",\"frontMatter\":{\"sidebarTitle\":\"Edges\",\"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\":1
80788169497000},\"title\":\"Edges\"},{\"name\":\"edge-labels\",\"route\":\"/learn/customization/edge-labels\",\"frontMatter\":{\"description\":\"This guide shows you how to render custom edge labels onto custom edges in React Flow.\",\"title\":\"Edge Labels\",\"filePath\":\"src/content/learn/customization/edge-labels.mdx\",\"timestamp\":1788169497000},\"title\":\"Edge Labels\"},{\"name\":\"utility-classes\",\"route\":\"/learn/customization/utility-classes\",\"frontMatter\":{\"description\":\"This guide gives you an overview of utility classes in React Flow that help you control interactions within custom nodes.\",\"title\":\"Utility Classes\",\"filePath\":\"src/content/learn/customization/utility-classes.mdx\",\"timestamp\":1788169497000},\"title\":\"Utility Classes\"},{\"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.\",\"title\":\"Theming\",\"filePath\":\"src/content/learn/customization/theming.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Theming\"}],\"title\":\"Customization\"},{\"name\":\"layouting\",\"route\":\"/learn/layouting\",\"children\":[{\"name\":\"layouting\",\"route\":\"/learn/layouting/layouting\",\"frontMatter\":{\"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\":\"Overview\",\"filePath\":\"src/content/learn/layouting/layouting.mdx\",\"timestamp\":1788169497000},\"title\":\"Overview\"},{\"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\":1788169497000},\"title\":\"Sub Flows\"}],\"title\":\"Layouting\"},{\"name\":\"advanced-use\",\"route\":\"/learn/advanced-use\",\"children\":[{\"data\":{\"hooks-providers\":{\"title\":\"\"},\"accessibility\":{\"title\":\"\"},\"testing\":{\"title\":\"\"},\"typescript\":{\"title\":\"\"},\"uncontrolled-flow\":{\"title\":\"\"},\"performance\":{\"title\":\"\"},\"state-management\":{\"title\":\"\"},\"computing-flows\":{\"title\":\"\"},\"ssr-ssg-configuration\":{\"title\":\"\"}}},{\"name\":\"hooks-providers\",\"route\":\"/learn/advanced-use/hooks-providers\",\"frontMatter\":{\"description\":\"Overview of Hooks and Providers in React Flow.\",\"title\":\"Hooks and Providers\",\"filePath\":\"src/content/learn/advanced-use/hooks-providers.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Hooks and Providers\"},{\"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\":1788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"Uncontrolled Flow\"},{\"name\":\"performance\",\"route\":\"/learn/advanced-use/performance\",\"frontMatter\":{\"description\":\"Strategies to optimize React Flow performance for large graphs.\",\"title\":\"Performance\",\"filePath\":\"src/content/learn/advanced-use/performance.mdx\",\"timestamp\":1788169497000},\"title\":\"Performance\"},{\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"title\":\"Devtools\"},{\"name\":\"multiplayer\",\"route\":\"/learn/advanced-use/multiplayer\",\"frontMatter\":{\"description\":\"Learn how to use React Flow with realtime multiplayer collaboration features.\",\"title\":\"Multiplayer\",\"filePath\":\"src/content/learn/advanced-use/multiplayer.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Multiplayer\"},{\"name\":\"whiteboard\",\"route\":\"/learn/advanced-use/whiteboard\",\"frontMatter\":{\"description\":\"Learn how to add drawing capabilities to your React Flow applications, including freehand drawing, rectangle shapes, lasso selection, and erasing.\",\"title\":\"Whiteboard Features\",\"filePath\":\"src/content/learn/advanced-use/whiteboard.mdx\",\"timestamp\":1788169497000},\"title\":\"Whiteboard Features\"}],\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"Mind Map App\"},{\"name\":\"getting-started-with-react-flow-components\",\"route\":\"/learn/tutorials/getting-started-with-react-flow-components\",\"frontMatter\":{\"sidebarTitle\":\"React Flow UI\",\"title\":\"Getting started with React Flow UI\",\"intro\":\"words\",\"date\":\"2024/01/20\",\"authors\":[\"hayleigh\",\"alessandro\"],\"tags\":[\"react-flow\",\"ui\",\"shadcn\",\"computational\"],\"image\":\"\",\"filePath\":\"src/content/learn/tutorials/getting-started-with-react-flow-components.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow UI\"}],\"title\":\"Tutorials\"},{\"name\":\"troubleshooting\",\"route\":\"/learn/troubleshooting\",\"children\":[{\"data\":{\"common-errors\":{\"title\":\"\"},\"migrate-to-v12\":{\"title\":\"\"},\"migrate-to-v11\":{\"title\":\"\"},\"migrate-to-v10\":{\"title\":\"\"}}},{\"name\":\"common-errors\",\"route\":\"/learn/troubleshooting/common-errors\",\"frontMatter\":{\"description\":\"Troubleshooting and fixes for common issues with React Flow.\",\"title\":\"Common Errors\",\"filePath\":\"src/content/learn/troubleshooting/common-errors.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Common Errors\"},{\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"\u003cReactFlowProvider /\u003e\"},{\"name\":\"components\",\"route\":\"/api-reference/components\",\"children\":[{\"name\":\"background\",\"route\":\"/api-reference/components/background\",\"frontMatter\":{\"title\":\"The Background component\",\"sidebarTitle\":\"\u003cBackground /\u003e\",\"description\":\"The Background component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.\",\"filePath\":\"src/content/api-reference/components/background.mdx\",\"timestamp\":1788169497000},\"title\":\"$L1d\"},{\"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\":1
80788169497000},\"title\":\"$L1e\"},{\"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\":1788169497000},\"title\":\"$L1f\"},{\"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\":1788169497000},\"title\":\"$L20\"},{\"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\":1
80788169497000},\"title\":\"$L21\"},{\"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\":1788169497000},\"title\":\"$L22\"},{\"name\":\"edge-toolbar\",\"route\":\"/api-reference/components/edge-toolbar\",\"frontMatter\":{\"title\":\"The EdgeToolbar component\",\"sidebarTitle\":\"\u003cEdgeToolbar /\u003e\",\"description\":\"The EdgeToolbar component can render a toolbar or tooltip to one side of a custom edge. This toolbar doesn't scale with the viewport so that the content doesn't get too small when zooming out.\",\"filePath\":\"src/content/api-reference/components/edge-toolbar.mdx\",\"timestamp\":1788169497000},\"title\":\"$L23\"},{\"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\":1
80788169497000},\"title\":\"$L24\"},{\"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\":1788169497000},\"title\":\"$L25\"},{\"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\":1788169497000},\"title\":\"$L26\"},{\"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\":1
80788169497000},\"title\":\"$L27\"},{\"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\":1788169497000},\"title\":\"$L28\"},{\"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\":1788169497000},\"title\":\"$L29\"},{\"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\":1
80788169497000},\"title\":\"$L2a\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Components\",\"filePath\":\"src/content/api-reference/components/index.mdx\",\"timestamp\":1788169497000},\"title\":\"Components\"},{\"name\":\"hooks\",\"route\":\"/api-reference/hooks\",\"children\":[{\"name\":\"use-connection\",\"route\":\"/api-reference/hooks/use-connection\",\"frontMatter\":{\"description\":\"The useConnection hook returns the current connection when there is an active connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).\",\"title\":\"useConnection()\",\"filePath\":\"src/content/api-reference/hooks/use-connection.mdx\",\"timestamp\":1788169497000},\"title\":\"$L2b\"},{\"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\":1
80788169497000},\"title\":\"$L2c\"},{\"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\":1788169497000},\"title\":\"$L2d\"},{\"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\":1788169497000},\"title\":\"$L2e\"},{\"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\":1
80788169497000},\"title\":\"$L2f\"},{\"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\":1788169497000},\"title\":\"$L30\"},{\"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\":1788169497000},\"title\":\"$L31\"},{\"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\":1
80788169497000},\"title\":\"$L32\"},{\"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\":1788169497000},\"title\":\"$L33\"},{\"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\":1788169497000},\"title\":\"$L34\"},{\"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\":1
80788169497000},\"title\":\"$L35\"},{\"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\":1788169497000},\"title\":\"$L36\"},{\"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\":1788169497000},\"title\":\"$L37\"},{\"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\":1
80788169497000},\"title\":\"$L38\"},{\"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\":1788169497000},\"title\":\"$L39\"},{\"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\":1788169497000},\"title\":\"$L3a\"},{\"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\":1
80788169497000},\"title\":\"$L3b\"},{\"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\":1788169497000},\"title\":\"$L3c\"},{\"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\":1788169497000},\"title\":\"$L3d\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Hooks\",\"filePath\":\"src/content/api-reference/hooks/index.mdx\",\"timestamp\":1
80788169497000},\"title\":\"Hooks\"},{\"name\":\"types\",\"route\":\"/api-reference/types\",\"children\":[{\"name\":\"align\",\"route\":\"/api-reference/types/align\",\"frontMatter\":{\"description\":\"The Align type contains the values expected by the align prop of the NodeToolbar component\",\"title\":\"Align\",\"filePath\":\"src/content/api-reference/types/align.mdx\",\"timestamp\":1788169497000},\"title\":\"$L3e\"},{\"name\":\"aria-label-config\",\"route\":\"/api-reference/types/aria-label-config\",\"frontMatter\":{\"description\":\"With the AriaLabelConfig you can customize the aria labels and descriptions used by React Flow.\",\"title\":\"AriaLabelConfig\",\"filePath\":\"src/content/api-reference/types/aria-label-config.mdx\",\"timestamp\":1788169497000},\"title\":\"$L3f\"},{\"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\":1
80788169497000},\"title\":\"$L40\"},{\"name\":\"color-mode\",\"route\":\"/api-reference/types/color-mode\",\"frontMatter\":{\"description\":\"The ColorMode type defines the available color modes for the ReactFlow component.\",\"title\":\"ColorMode\",\"filePath\":\"src/content/api-reference/types/color-mode.mdx\",\"timestamp\":1788169497000},\"title\":\"$L41\"},{\"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\":1788169497000},\"title\":\"$L42\"},{\"name\":\"connection-line-component\",\"route\":\"/api-reference/types/connection-line-component\",\"frontMatter\":{\"description\":\"Custom React component for rendering the connection line during edge creation.\",\"title\":\"ConnectionLineComponent\",\"filePath\":\"src/content/api-reference/types/connection-line-component.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L43\"},{\"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\":1788169497000},\"title\":\"$L44\"},{\"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\":1788169497000},\"title\":\"$L45\"},{\"name\":\"connection-mode\",\"route\":\"/api-reference/types/connection-mode\",\"frontMatter\":{\"description\":\"Specifies the rules for how connections between nodes are established.\",\"title\":\"ConnectionMode\",\"filePath\":\"src/content/api-reference/types/connection-mode.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L46\"},{\"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\":1788169497000},\"title\":\"$L47\"},{\"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\":1788169497000},\"title\":\"$L48\"},{\"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\":1
80788169497000},\"title\":\"$L49\"},{\"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\":1788169497000},\"title\":\"$L4a\"},{\"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\":1788169497000},\"title\":\"$L4b\"},{\"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\":1
80788169497000},\"title\":\"$L4c\"},{\"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\":1788169497000},\"title\":\"$L4d\"},{\"name\":\"edge-mouse-handler\",\"route\":\"/api-reference/types/edge-mouse-handler\",\"frontMatter\":{\"description\":\"The EdgeMouseHandler type defines the callback function that is called when mouse events occur on an edge.\",\"title\":\"EdgeMouseHandler\",\"filePath\":\"src/content/api-reference/types/edge-mouse-handler.mdx\",\"timestamp\":1788169497000},\"title\":\"$L4e\"},{\"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\":1
80788169497000},\"title\":\"$L4f\"},{\"name\":\"edge-types\",\"route\":\"/api-reference/types/edge-types\",\"frontMatter\":{\"description\":\"The EdgeTypes type is used to define custom edge types.\",\"title\":\"EdgeTypes\",\"filePath\":\"src/content/api-reference/types/edge-types.mdx\",\"timestamp\":1788169497000},\"title\":\"$L50\"},{\"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\":1788169497000},\"title\":\"$L51\"},{\"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\":1788169497000},\"title\":\"$L52\"},{\"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\":1
80788169497000},\"title\":\"$L53\"},{\"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\":1788169497000},\"title\":\"$L54\"},{\"name\":\"is-valid-connection\",\"route\":\"/api-reference/types/is-valid-connection\",\"frontMatter\":{\"description\":\"Function type that determines whether a connection between nodes is valid.\",\"title\":\"IsValidConnection\",\"filePath\":\"src/content/api-reference/types/is-valid-connection.mdx\",\"timestamp\":1788169497000},\"title\":\"$L55\"},{\"name\":\"key-code\",\"route\":\"/api-reference/types/key-code\",\"frontMatter\":{\"description\":\"Represents keyboard key codes or combinations.\",\"title\":\"KeyCode\",\"filePath\":\"src/content/api-reference/types/key-code.mdx\",\"timestamp\":1788169497000},\"title\":\"$L56\"},{\"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\":1
80788169497000},\"title\":\"$L57\"},{\"name\":\"mini-map-node-props\",\"route\":\"/api-reference/types/mini-map-node-props\",\"frontMatter\":{\"description\":\"The MiniMapNodeProps type defines the properties for nodes in a minimap component.\",\"title\":\"MiniMapNodeProps\",\"filePath\":\"src/content/api-reference/types/mini-map-node-props.mdx\",\"timestamp\":1788169497000},\"title\":\"$L58\"},{\"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\":1788169497000},\"title\":\"$L59\"},{\"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\":1
80788169497000},\"title\":\"$L5a\"},{\"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\":1788169497000},\"title\":\"$L5b\"},{\"name\":\"node-handle\",\"route\":\"/api-reference/types/node-handle\",\"frontMatter\":{\"description\":\"The NodeHandle type is used to define a handle for a node if server side rendering is used.\",\"title\":\"NodeHandle\",\"filePath\":\"src/content/api-reference/types/node-handle.mdx\",\"timestamp\":1788169497000},\"title\":\"$L5c\"},{\"name\":\"node-mouse-handler\",\"route\":\"/api-reference/types/node-mouse-handler\",\"frontMatter\":{\"description\":\"The NodeMouseHandler type defines the callback function that is called when mouse events occur on a node.\",\"title\":\"NodeMouseHandler\",\"filePath\":\"src/content/api-reference/types/node-mouse-handler.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L5d\"},{\"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\":1788169497000},\"title\":\"$L5e\"},{\"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\":1788169497000},\"title\":\"$L5f\"},{\"name\":\"node-types\",\"route\":\"/api-reference/types/node-types\",\"frontMatter\":{\"description\":\"The NodeTypes type is used to define custom node types.\",\"title\":\"NodeTypes\",\"filePath\":\"src/content/api-reference/types/node-types.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L60\"},{\"name\":\"on-before-delete\",\"route\":\"/api-reference/types/on-before-delete\",\"frontMatter\":{\"description\":\"The OnBeforeDelete type defines the callback function that is called before nodes or edges are deleted.\",\"title\":\"OnBeforeDelete\",\"filePath\":\"src/content/api-reference/types/on-before-delete.mdx\",\"timestamp\":1788169497000},\"title\":\"$L61\"},{\"name\":\"on-connect\",\"route\":\"/api-reference/types/on-connect\",\"frontMatter\":{\"description\":\"Callback function triggered when a new connection is created between nodes.\",\"title\":\"OnConnect\",\"filePath\":\"src/content/api-reference/types/on-connect.mdx\",\"timestamp\":1788169497000},\"title\":\"$L62\"},{\"name\":\"on-connect-end\",\"route\":\"/api-reference/types/on-connect-end\",\"frontMatter\":{\"description\":\"Callback function triggered when finishing or canceling a connection attempt between nodes.\",\"title\":\"OnConnectEnd\",\"filePath\":\"src/content/api-reference/types/on-connect-end.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L63\"},{\"name\":\"on-connect-start\",\"route\":\"/api-reference/types/on-connect-start\",\"frontMatter\":{\"description\":\"Callback function triggered when starting to create a connection between nodes.\",\"title\":\"OnConnectStart\",\"filePath\":\"src/content/api-reference/types/on-connect-start.mdx\",\"timestamp\":1788169497000},\"title\":\"$L64\"},{\"name\":\"on-delete\",\"route\":\"/api-reference/types/on-delete\",\"frontMatter\":{\"description\":\"The OnDelete type defines the callback function that is called when nodes or edges are deleted.\",\"title\":\"OnDelete\",\"filePath\":\"src/content/api-reference/types/on-delete.mdx\",\"timestamp\":1788169497000},\"title\":\"$L65\"},{\"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\":1788169497000},\"title\":\"$L66\"},{\"name\":\"on-edges-delete\",\"route\":\"/api-reference/types/on-edges-delete\",\"frontMatter\":{\"description\":\"The OnEdgesDelete type defines the callback function that is called when edges are deleted.\",\"title\":\"OnEdgesDelete\",\"filePath\":\"src/content/api-reference/types/on-edges-delete.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L67\"},{\"name\":\"on-error\",\"route\":\"/api-reference/types/on-error\",\"frontMatter\":{\"description\":\"The OnError type defines the callback function that is called when an error occurs.\",\"title\":\"OnError\",\"filePath\":\"src/content/api-reference/types/on-error.mdx\",\"timestamp\":1788169497000},\"title\":\"$L68\"},{\"name\":\"on-init\",\"route\":\"/api-reference/types/on-init\",\"frontMatter\":{\"description\":\"The OnInit type defines the callback function that is called when the ReactFlow instance is initialized.\",\"title\":\"OnInit\",\"filePath\":\"src/content/api-reference/types/on-init.mdx\",\"timestamp\":1788169497000},\"title\":\"$L69\"},{\"name\":\"on-move\",\"route\":\"/api-reference/types/on-move\",\"frontMatter\":{\"description\":\"Invoked when the viewport is moved, such as by panning or zooming.\",\"title\":\"OnMove\",\"filePath\":\"src/content/api-reference/types/on-move.mdx\",\"timestamp\":1788169497000},\"title\":\"$L6a\"},{\"name\":\"on-node-drag\",\"route\":\"/api-reference/types/on-node-drag\",\"frontMatter\":{\"description\":\"The OnNodeDrag type defines the callback function that is called when a node is being dragged.\",\"title\":\"OnNodeDrag\",\"filePath\":\"src/content/api-reference/types/on-node-drag.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L6b\"},{\"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\":1788169497000},\"title\":\"$L6c\"},{\"name\":\"on-nodes-delete\",\"route\":\"/api-reference/types/on-nodes-delete\",\"frontMatter\":{\"description\":\"The OnNodesDelete type defines the callback function that is called when nodes are deleted.\",\"title\":\"OnNodesDelete\",\"filePath\":\"src/content/api-reference/types/on-nodes-delete.mdx\",\"timestamp\":1788169497000},\"title\":\"$L6d\"},{\"name\":\"on-reconnect\",\"route\":\"/api-reference/types/on-reconnect\",\"frontMatter\":{\"description\":\"Callback function triggered when an existing edge is reconnected to a different node or handle.\",\"title\":\"OnReconnect\",\"filePath\":\"src/content/api-reference/types/on-reconnect.mdx\",\"timestamp\":1788169497000},\"title\":\"$L6e\"},{\"name\":\"on-selection-change-func\",\"route\":\"/api-reference/types/on-selection-change-func\",\"frontMatter\":{\"description\":\"Called whenever the selection of nodes or edges changes in the flow diagram.\",\"title\":\"OnSelectionChangeFunc\",\"filePath\":\"src/content/api-reference/types/on-selection-change-func.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L6f\"},{\"name\":\"pan-on-scroll-mode\",\"route\":\"/api-reference/types/pan-on-scroll-mode\",\"frontMatter\":{\"description\":\"Configures how the viewport responds to scroll events, allowing free, vertical, or horizontal panning.\",\"title\":\"PanOnScrollMode\",\"filePath\":\"src/content/api-reference/types/pan-on-scroll-mode.mdx\",\"timestamp\":1788169497000},\"title\":\"$L70\"},{\"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\":1788169497000},\"title\":\"$L71\"},{\"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\":1
80788169497000},\"title\":\"$L72\"},{\"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.\",\"title\":\"ProOptions\",\"filePath\":\"src/content/api-reference/types/pro-options.mdx\",\"timestamp\":1788169497000},\"title\":\"$L73\"},{\"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\":1788169497000},\"title\":\"$L74\"},{\"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\":1
80788169497000},\"title\":\"$L75\"},{\"name\":\"rect\",\"route\":\"/api-reference/types/rect\",\"frontMatter\":{\"description\":\"The Rect type defines a rectangle with dimensions and a position.\",\"title\":\"Rect\",\"filePath\":\"src/content/api-reference/types/rect.mdx\",\"timestamp\":1788169497000},\"title\":\"$L76\"},{\"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\":1788169497000},\"title\":\"$L77\"},{\"name\":\"selection-drag-handler\",\"route\":\"/api-reference/types/selection-drag-handler\",\"frontMatter\":{\"description\":\"Handles drag events for selected nodes during interactive operations.\",\"title\":\"SelectionDragHandler\",\"filePath\":\"src/content/api-reference/types/selection-drag-handler.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L78\"},{\"name\":\"selection-mode\",\"route\":\"/api-reference/types/selection-mode\",\"frontMatter\":{\"description\":\"Controls how nodes are selected in the flow diagram, offering either full or partial selection behavior.\",\"title\":\"SelectionMode\",\"filePath\":\"src/content/api-reference/types/selection-mode.mdx\",\"timestamp\":1788169497000},\"title\":\"$L79\"},{\"name\":\"snap-grid\",\"route\":\"/api-reference/types/snap-grid\",\"frontMatter\":{\"description\":\"The SnapGrid type defines the grid size for snapping nodes on the pane.\",\"title\":\"SnapGrid\",\"filePath\":\"src/content/api-reference/types/snap-grid.mdx\",\"timestamp\":1788169497000},\"title\":\"$L7a\"},{\"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\":1
80788169497000},\"title\":\"$L7b\"},{\"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\":1788169497000},\"title\":\"$L7c\"},{\"name\":\"z-index-mode\",\"route\":\"/api-reference/types/z-index-mode\",\"frontMatter\":{\"description\":\"The ZIndexMode type is used to define how z-indexing is calculated for nodes and edges.\",\"title\":\"ZIndexMode\",\"filePath\":\"src/content/api-reference/types/z-index-mode.mdx\",\"timestamp\":1788169497000},\"title\":\"$L7d\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Types\",\"filePath\":\"src/content/api-reference/types/index.mdx\",\"timestamp\":1788169497000},\"title\":\"Types\"},{\"name\":\"utils\",\"route\":\"/api-reference/utils\",\"children\":[{\"name\":\"add-edge\",\"route\":\"/api-reference/utils/add-edge\",\"frontMatter\":{\"description\":\"This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.\",\"title\":\"addEdge()\",\"filePath\":\"src/content/api-reference/utils/add-edge.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L7e\"},{\"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\":1788169497000},\"title\":\"$L7f\"},{\"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\":1
80788169497000},\"title\":\"$L80\"},{\"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\":1788169497000},\"title\":\"$L81\"},{\"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\":1788169497000},\"title\":\"$L82\"},{\"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\":1
80788169497000},\"title\":\"$L83\"},{\"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 `getViewportForBounds` 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\":1788169497000},\"title\":\"$L84\"},{\"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\":1788169497000},\"title\":\"$L85\"},{\"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\":1
80788169497000},\"title\":\"$L86\"},{\"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\":1788169497000},\"title\":\"$L87\"},{\"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\":1788169497000},\"title\":\"$L88\"},{\"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\":1
80788169497000},\"title\":\"$L89\"},{\"name\":\"is-edge\",\"route\":\"/api-reference/utils/is-edge\",\"frontMatter\":{\"description\":\"Test whether an object is usable 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\":1788169497000},\"title\":\"$L8a\"},{\"name\":\"is-node\",\"route\":\"/api-reference/utils/is-node\",\"frontMatter\":{\"description\":\"Test whether an object is usable 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\":1788169497000},\"title\":\"$L8b\"},{\"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\":1
80788169497000},\"title\":\"$L8c\"}],\"frontMatter\":{\"asIndexPage\":true,\"title\":\"Utils\",\"filePath\":\"src/content/api-reference/utils/index.mdx\",\"timestamp\":1788169497000},\"title\":\"Utils\"}],\"title\":\"Reference\"},{\"name\":\"examples\",\"route\":\"/examples\",\"children\":[{\"data\":{\"index\":{\"title\":\"All Examples\",\"theme\":{\"breadcrumb\":false}},\"pro-examples\":{\"title\":\"\"},\"overview\":{\"title\":\"\"},\"nodes\":{},\"edges\":{},\"interaction\":{},\"grouping\":{\"title\":\"Subflows \u0026 Grouping\"},\"layout\":{},\"styling\":{},\"whiteboard\":{},\"misc\":{}},\"title\":\"$undefined\"},{\"name\":\"index\",\"route\":\"/examples\",\"frontMatter\":{\"title\":\"Overview\",\"description\":\"Overview of React Flow examples for practical copy-paste solutions to common use cases.\",\"filePath\":\"src/content/examples/index.mdx\",\"timestamp\":1788169497000},\"title\":\"$L8d\"},{\"name\":\"pro-examples\",\"route\":\"/examples/pro-examples\",\"frontMatter\":{\"title\":\"Pro Examples\",\"is_pro_example\":true,\"description\":\"Advanced React Flow code examples to use in your node-based UIs, crafted by the React Flow core team.\",\"filePath\":\"src/content/examples/pro-examples.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L8e\"},{\"name\":\"overview\",\"route\":\"/examples/overview\",\"frontMatter\":{\"title\":\"Feature Overview\",\"description\":\"The most used features of React Flow - controls, MiniMap, node types, edge types, edge labels, and custom styling.\",\"filePath\":\"src/content/examples/overview.mdx\",\"timestamp\":1788169497000},\"title\":\"$L8f\"},{\"name\":\"nodes\",\"route\":\"/examples/nodes\",\"children\":[{\"data\":{\"add-node-on-edge-drop\":{\"title\":\"\"},\"connection-limit\":{\"title\":\"\"},\"custom-node\":{\"title\":\"\"},\"delete-middle-node\":{\"title\":\"\"},\"drag-handle\":{\"title\":\"\"},\"easy-connect\":{\"title\":\"\"},\"intersections\":{\"title\":\"\"},\"node-resizer\":{\"title\":\"\"},\"node-toolbar\":{\"title\":\"\"},\"proximity-connect\":{\"title\":\"\"},\"rotatable-node\":{\"title\":\"\"},\"node-position-animation\":{\"title\":\"\"},\"stress\":{\"title\":\"\"},\"update-node\":{\"title\":\"\"},\"shapes\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"add-node-on-edge-drop\",\"route\":\"/examples/nodes/add-node-on-edge-drop\",\"frontMatter\":{\"title\":\"Add Node On Edge Drop\",\"description\":\"A new node appears wherever you drop the connection line\",\"filePath\":\"src/content/examples/nodes/add-node-on-edge-drop.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L90\"},{\"name\":\"connection-limit\",\"route\":\"/examples/nodes/connection-limit\",\"frontMatter\":{\"title\":\"Connection Limit\",\"description\":\"Use the `isConnectable` prop to limit the number of connections a handle can have\",\"filePath\":\"src/content/examples/nodes/connection-limit.mdx\",\"timestamp\":1788169497000},\"title\":\"$L91\"},{\"name\":\"custom-node\",\"route\":\"/examples/nodes/custom-node\",\"frontMatter\":{\"title\":\"Custom Nodes\",\"description\":\"Display any content inside of a node\",\"filePath\":\"src/content/examples/nodes/custom-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$L92\"},{\"name\":\"delete-middle-node\",\"route\":\"/examples/nodes/delete-middle-node\",\"frontMatter\":{\"title\":\"Delete Middle Node\",\"description\":\"Remove a node without breaking the flow\",\"filePath\":\"src/content/examples/nodes/delete-middle-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$L93\"},{\"name\":\"drag-handle\",\"route\":\"/examples/nodes/drag-handle\",\"frontMatter\":{\"title\":\"Drag Handle\",\"description\":\"Restrict dragging to a specific part of node\",\"filePath\":\"src/content/examples/nodes/drag-handle.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L94\"},{\"name\":\"easy-connect\",\"route\":\"/examples/nodes/easy-connect\",\"frontMatter\":{\"title\":\"Easy Connect\",\"description\":\"Make the whole node into a handle\",\"filePath\":\"src/content/examples/nodes/easy-connect.mdx\",\"timestamp\":1788169497000},\"title\":\"$L95\"},{\"name\":\"intersections\",\"route\":\"/examples/nodes/intersections\",\"frontMatter\":{\"title\":\"Intersections\",\"description\":\"Detect when a node overlaps with another node\",\"filePath\":\"src/content/examples/nodes/intersections.mdx\",\"timestamp\":1788169497000},\"title\":\"$L96\"},{\"name\":\"node-resizer\",\"route\":\"/examples/nodes/node-resizer\",\"frontMatter\":{\"title\":\"Node Resizer\",\"created_at\":\"2024-01-11\",\"description\":\"Change the size of a node with a bounding box or draggable icon\",\"filePath\":\"src/content/examples/nodes/node-resizer.mdx\",\"timestamp\":1788169497000},\"title\":\"$L97\"},{\"name\":\"node-toolbar\",\"route\":\"/examples/nodes/node-toolbar\",\"frontMatter\":{\"title\":\"Node Toolbar\",\"description\":\"A toolbar with buttons appears next to the selected node\",\"filePath\":\"src/content/examples/nodes/node
80-toolbar.mdx\",\"timestamp\":1788169497000},\"title\":\"$L98\"},{\"name\":\"proximity-connect\",\"route\":\"/examples/nodes/proximity-connect\",\"frontMatter\":{\"title\":\"Proximity Connect\",\"description\":\"Automatically create edges when nodes get close to each other\",\"filePath\":\"src/content/examples/nodes/proximity-connect.mdx\",\"timestamp\":1788169497000},\"title\":\"$L99\"},{\"name\":\"rotatable-node\",\"route\":\"/examples/nodes/rotatable-node\",\"frontMatter\":{\"title\":\"Rotatable Node\",\"description\":\"A custom node that can be rotated using CSS transforms\",\"filePath\":\"src/content/examples/nodes/rotatable-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$L9a\"},{\"name\":\"node-position-animation\",\"route\":\"/examples/nodes/node-position-animation\",\"frontMatter\":{\"title\":\"Node Position Animation\",\"description\":\"Animate smooth transitions between different graph layouts with interactive controls\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/nodes/node-position-animation.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L9b\"},{\"name\":\"stress\",\"route\":\"/examples/nodes/stress\",\"frontMatter\":{\"title\":\"Stress Test\",\"description\":\"Render hundreds of nodes and edges at once\",\"filePath\":\"src/content/examples/nodes/stress.mdx\",\"timestamp\":1788169497000},\"title\":\"$L9c\"},{\"name\":\"update-node\",\"route\":\"/examples/nodes/update-node\",\"frontMatter\":{\"title\":\"Updating Nodes\",\"description\":\"Update the data field of a specific node\",\"filePath\":\"src/content/examples/nodes/update-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$L9d\"},{\"name\":\"shapes\",\"route\":\"/examples/nodes/shapes\",\"frontMatter\":{\"title\":\"Shapes\",\"description\":\"Render Custom Nodes with different shapes that are commonly used in flow charts\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/nodes/shapes.mdx\",\"timestamp\":1788169497000},\"title\":\"$L9e\"}],\"title\":\"Nodes\"},{\"name\":\"edges\",\"route\":\"/examples/edges\",\"children\":[{\"data\":{\"animating-edges\":{\"title\":\"\"},\"custom-connectionline\":{\"title\":\"Custom Connection Line\"},\"custom-edges\":{\"title\":\"\"},\"delete-edge-on-drop\":{\"title\":\"\"},\"edge-label-renderer\":{\"title\":\"\"},\"edge-intersection\":{\"title\":\"\"},\"edge-toolbar\":{\"title\":\"\"},\"edge-types\":{\"title\":\"\"},\"edge-routing\":{\"title\":\"\"},\"floating-edges\":{\"title\":\"\"},\"markers\":{\"title\":\"\"},\"multi-connection-line\":{\"title\":\"\"},\"reconnect-edge\":{\"title\":\"\"},\"simple-floating-edges\":{\"title\":\"\"},\"temporary-edges\":{\"title\":\"\"},\"editable-edge\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"animating-edges\",\"route\":\"/examples/edges/animating-edges\",\"frontMatter\":{\"title\":\"Animating Edges\",\"description\":\"Create edge animations that go beyond the built-in animated edge.\",\"preview_path\":\"react/examples/edges/animating-edges-svg/preview.jpg\",\"filePath\":\"src/content/examples/edges/animating-edges.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$L9f\"},{\"name\":\"custom-connectionline\",\"route\":\"/examples/edges/custom-connectionline\",\"frontMatter\":{\"title\":\"Connection Line\",\"description\":\"Change the appearance and behavior of the connection line\",\"filePath\":\"src/content/examples/edges/custom-connectionline.mdx\",\"timestamp\":1788169497000},\"title\":\"$La0\"},{\"name\":\"custom-edges\",\"route\":\"/examples/edges/custom-edges\",\"frontMatter\":{\"title\":\"Custom Edges\",\"description\":\"Create edges with special routing or controls along the edge\",\"filePath\":\"src/content/examples/edges/custom-edges.mdx\",\"timestamp\":1788169497000},\"title\":\"$La1\"},{\"name\":\"delete-edge-on-drop\",\"route\":\"/examples/edges/delete-edge-on-drop\",\"frontMatter\":{\"title\":\"Delete Edge on Drop\",\"description\":\"Delete an edge when it doesn't find a handle\",\"filePath\":\"src/content/examples/edges/delete-edge-on-drop.mdx\",\"timestamp\":1788169497000},\"title\":\"$La2\"},{\"name\":\"edge-label-renderer\",\"route\":\"/examples/edges/edge-label-renderer\",\"frontMatter\":{\"title\":\"Edge Label Renderer\",\"description\":\"Render edge labels as divs on top of edges\",\"filePath\":\"src/content/examples/edges/edge-label-renderer.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$La3\"},{\"name\":\"edge-intersection\",\"route\":\"/examples/edges/edge-intersection\",\"frontMatter\":{\"title\":\"Edge Intersection\",\"description\":\"Detect edge intersections with nodes while dragging.\",\"filePath\":\"src/content/examples/edges/edge-intersection.mdx\",\"timestamp\":1788169497000},\"title\":\"$La4\"},{\"name\":\"edge-toolbar\",\"route\":\"/examples/edges/edge-toolbar\",\"frontMatter\":{\"title\":\"Edge Toolbar\",\"description\":\"You can use the EdgeToolbar component to display content on top of an edge.\",\"filePath\":\"src/content/examples/edges/edge-toolbar.mdx\",\"timestamp\":1788169497000},\"title\":\"$La5\"},{\"name\":\"edge-types\",\"route\":\"/examples/edges/edge-types\",\"frontMatter\":{\"title\":\"Edge Types\",\"description\":\"Make edges straight, stepped, smooth-stepped, or bezier curved\",\"filePath\":\"src/content/examples/edges/edge-types.mdx\",\"timestamp\":1788169497000},\"title\":\"$La6\"},{\"name\":\"edge-routing\",\"route\":\"/examples/edges/edge-routing\",\"frontMatter\":{\"title\":\"Edge Routing\",\"description\":\"Implement a routable edge with libavoid\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/edges/edge-routing.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$La7\"},{\"name\":\"floating-edges\",\"route\":\"/examples/edges/floating-edges\",\"frontMatter\":{\"title\":\"Floating Edges\",\"description\":\"Instead of having the handle at a fixed point, let it move with the connected edge\",\"filePath\":\"src/content/examples/edges/floating-edges.mdx\",\"timestamp\":1788169497000},\"title\":\"$La8\"},{\"name\":\"markers\",\"route\":\"/examples/edges/markers\",\"frontMatter\":{\"title\":\"Edge Markers\",\"description\":\"Make your edges into arrows, add custom icons, or SVGs\",\"filePath\":\"src/content/examples/edges/markers.mdx\",\"timestamp\":1788169497000},\"title\":\"$La9\"},{\"name\":\"multi-connection-line\",\"route\":\"/examples/edges/multi-connection-line\",\"frontMatter\":{\"title\":\"Multi Connection Line\",\"description\":\"Draw multiple connection lines at once from any selected nodes.\",\"filePath\":\"src/content/examples/edges/multi-connection-line.mdx\",\"timestamp\":1788169497000},\"title\":\"$Laa\"},{\"name\":\"reconnect-edge\",\"route\":\"/examples/edges/reconnect-edge\",\"frontMatter\":{\"title\":\"Reconnect Edge\",\"description\":\"Click-drag to move an existing edge from one handle to another\",\"filePath\":\"src/content/examples/edges/reconnect-edge.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lab\"},{\"name\":\"simple-floating-edges\",\"route\":\"/examples/edges/simple-floating-edges\",\"frontMatter\":{\"title\":\"Simple Floating Edges\",\"description\":\"Edges connect to the closest available handle\",\"filePath\":\"src/content/examples/edges/simple-floating-edges.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lac\"},{\"name\":\"temporary-edges\",\"route\":\"/examples/edges/temporary-edges\",\"frontMatter\":{\"title\":\"Temporary Edges\",\"description\":\"Push what React Flow edges are capable of by rendering invisible ghost nodes.\",\"filePath\":\"src/content/examples/edges/temporary-edges.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lad\"},{\"name\":\"editable-edge\",\"route\":\"/examples/edges/editable-edge\",\"frontMatter\":{\"title\":\"Editable Edge\",\"description\":\"Implement a custom edge with draggable control points to change the path of an edge\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/edges/editable-edge.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lae\"}],\"title\":\"Edges\"},{\"name\":\"interaction\",\"route\":\"/examples/interaction\",\"children\":[{\"data\":{\"computing-flows\":{\"title\":\"\"},\"connection-events\":{\"title\":\"\"},\"context-menu\":{\"title\":\"\"},\"contextual-zoom\":{\"title\":\"\"},\"drag-and-drop\":{\"title\":\"\"},\"prevent-cycles\":{\"title\":\"\"},\"save-and-restore\":{\"title\":\"\"},\"touch-device\":{\"title\":\"\"},\"validation\":{\"title\":\"\"},\"helper-lines\":{\"title\":\"\"},\"collaborative\":{\"title\":\"\"},\"copy-paste\":{\"title\":\"\"},\"undo-redo\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"computing-flows\",\"route\":\"/examples/interaction/computing-flows\",\"frontMatter\":{\"title\":\"Computing Flows\",\"description\":\"This examples demonstrates how to use the helpers to handle data flow\",\"filePath\":\"src/content/examples/interaction/computing-flows.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Laf\"},{\"name\":\"connection-events\",\"route\":\"/examples/interaction/connection-events\",\"frontMatter\":{\"title\":\"Connection Events\",\"description\":\"React Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.\",\"filePath\":\"src/content/examples/interaction/connection-events.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb0\"},{\"name\":\"context-menu\",\"route\":\"/examples/interaction/context-menu\",\"frontMatter\":{\"title\":\"Context Menu\",\"description\":\"Right-click a node to display custom actions\",\"filePath\":\"src/content/examples/interaction/context-menu.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb1\"},{\"name\":\"contextual-zoom\",\"route\":\"/examples/interaction/contextual-zoom\",\"frontMatter\":{\"title\":\"Contextual Zoom\",\"description\":\"Only display the content of a node when you are zoomed in close enough\",\"filePath\":\"src/content/examples/interaction/contextual-zoom.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lb2\"},{\"name\":\"drag-and-drop\",\"route\":\"/examples/interaction/drag-and-drop\",\"frontMatter\":{\"title\":\"Drag and Drop\",\"description\":\"Drag and drop outside of the React Flow pane with native HTML Drag and Drop API or react-draggable.\",\"filePath\":\"src/content/examples/interaction/drag-and-drop.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb3\"},{\"name\":\"prevent-cycles\",\"route\":\"/examples/interaction/prevent-cycles\",\"frontMatter\":{\"title\":\"Preventing Cycles\",\"description\":\"Check if a new connection would cause a cycle in the graph\",\"filePath\":\"src/content/examples/interaction/prevent-cycles.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb4\"},{\"name\":\"save-and-restore\",\"route\":\"/examples/interaction/save-and-restore\",\"frontMatter\":{\"title\":\"Save and Restore\",\"description\":\"Save the state of the diagram, and reload it after refreshing the page\",\"filePath\":\"src/content/examples/interaction/save-and-restore.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb5\"},{\"name\":\"touch-device\",\"route\":\"/examples/interaction/touch-device\",\"frontMatter\":{\"title\":\"Touch Device\",\"description\":\"Tap two handles to connect them, and make handles bigger for smaller devices\",\"filePath\":\"src/content/examples/interaction/touch-device.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lb6\"},{\"name\":\"validation\",\"route\":\"/examples/interaction/validation\",\"frontMatter\":{\"title\":\"Validation\",\"description\":\"Check if a new connection is valid and should be added\",\"filePath\":\"src/content/examples/interaction/validation.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb7\"},{\"name\":\"helper-lines\",\"route\":\"/examples/interaction/helper-lines\",\"frontMatter\":{\"title\":\"Helper Lines\",\"description\":\"Display lines that help to visually align nodes, with automatic snapping for precise positioning and layout control.\",\"is_pro_example\":true,\"is_free\":true,\"filePath\":\"src/content/examples/interaction/helper-lines.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lb8\"},{\"name\":\"collaborative\",\"route\":\"/examples/interaction/collaborative\",\"frontMatter\":{\"title\":\"Collaborative\",\"description\":\"Build a collaborative graph for multiple users with React Flow and yjs\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/interaction/collaborative.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lb9\"},{\"name\":\"copy-paste\",\"route\":\"/examples/interaction/copy-paste\",\"frontMatter\":{\"title\":\"Copy and Paste\",\"description\":\"Select nodes and edges to cut, copy, and paste\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/interaction/copy-paste.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lba\"},{\"name\":\"undo-redo\",\"route\":\"/examples/interaction/undo-redo\",\"frontMatter\":{\"title\":\"Undo and Redo\",\"description\":\"Undo and redo functionality for moving, adding, and deleting nodes and edges\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/interaction/undo-redo.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lbb\"}],\"title\":\"Interaction\"},{\"name\":\"grouping\",\"route\":\"/examples/grouping\",\"children\":[{\"data\":{\"selection-grouping\":{\"title\":\"\"},\"parent-child-relation\":{\"title\":\"\"},\"sub-flows\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"selection-grouping\",\"route\":\"/examples/grouping/selection-grouping\",\"frontMatter\":{\"title\":\"Selection Grouping\",\"description\":\"This example demonstrates how to create dynamic node grouping in React Flow.\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/grouping/selection-grouping.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lbc\"},{\"name\":\"parent-child-relation\",\"route\":\"/examples/grouping/parent-child-relation\",\"frontMatter\":{\"title\":\"Parent Child Relation\",\"description\":\"Dynamically attach and detach nodes from parent containers with drag and drop functionality\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/grouping/parent-child-relation.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lbd\"},{\"name\":\"sub-flows\",\"route\":\"/examples/grouping/sub-flows\",\"frontMatter\":{\"title\":\"Sub Flow\",\"description\":\"Render nested graphs and group nodes, and configure the behavior of child nodes\",\"filePath\":\"src/content/examples/grouping/sub-flows.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lbe\"}],\"title\":\"Subflows \u0026 Grouping\"},{\"name\":\"layout\",\"route\":\"/examples/layout\",\"children\":[{\"data\":{\"dagre\":{\"title\":\"\"},\"elkjs\":{\"title\":\"\"},\"elkjs-multiple-handles\":{\"title\":\"\"},\"horizontal\":{\"title\":\"\"},\"expand-collapse\":{\"title\":\"\"},\"auto-layout\":{\"title\":\"\"},\"force-layout\":{\"title\":\"\"},\"dynamic-layouting\":{\"title\":\"\"},\"node-collisions\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"dagre\",\"route\":\"/examples/layout/dagre\",\"frontMatter\":{\"title\":\"Dagre Tree\",\"description\":\"Integrate dagre js with React Flow to create simple tree layouts\",\"filePath\":\"src/content/examples/layout/dagre.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lbf\"},{\"name\":\"elkjs\",\"route\":\"/examples/layout/elkjs\",\"frontMatter\":{\"title\":\"Elkjs Tree\",\"description\":\"For a more powerful alternative to dagre, you can also use elkjs to layout your graphs\",\"filePath\":\"src/content/examples/layout/elkjs.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc0\"},{\"name\":\"elkjs-multiple-handles\",\"route\":\"/examples/layout/elkjs-multiple-handles\",\"frontMatter\":{\"title\":\"Elkjs Multiple Handles\",\"description\":\"Use multiple handles with the elkjs layouting engine to reduce edge crossings\",\"filePath\":\"src/content/examples/layout/elkjs-multiple-handles.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc1\"},{\"name\":\"horizontal\",\"route\":\"/examples/layout/horizontal\",\"frontMatter\":{\"title\":\"Horizontal Flow\",\"description\":\"A diagram that flows from left to right\",\"filePath\":\"src/content/examples/layout/horizontal.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc2\"},{\"name\":\"expand-collapse\",\"route\":\"/examples/layout/expand-collapse\",\"frontMatter\":{\"title\":\"Expand and Collapse\",\"description\":\"Create hierarchical trees with expandable and collapsible nodes using dagre for automatic layouts\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/layout/expand-collapse.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lc3\"},{\"name\":\"auto-layout\",\"route\":\"/examples/layout/auto-layout\",\"frontMatter\":{\"title\":\"Auto Layout\",\"description\":\"Automatically arrange nodes using various layout engines like dagre, d3-hierarchy, or elkjs\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/layout/auto-layout.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc4\"},{\"name\":\"force-layout\",\"route\":\"/examples/layout/force-layout\",\"frontMatter\":{\"title\":\"Force Layout\",\"description\":\"Newly added nodes never overlap with existing nodes using d3-force\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/layout/force-layout.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc5\"},{\"name\":\"dynamic-layouting\",\"route\":\"/examples/layout/dynamic-layouting\",\"frontMatter\":{\"title\":\"Dynamic Layouting\",\"description\":\"A self-organizing graph where users add nodes by clicking placeholder elements, and nodes position automatically.\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/layout/dynamic-layouting.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lc6\"},{\"name\":\"node-collisions\",\"route\":\"/examples/layout/node-collisions\",\"frontMatter\":{\"title\":\"Node Collisions\",\"description\":\"Automatically resolve node overlaps using collision detection algorithms\",\"created_at\":\"1 December 2025\",\"filePath\":\"src/content/examples/layout/node-collisions.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc7\"}],\"title\":\"Layout\"},{\"name\":\"styling\",\"route\":\"/examples/styling\",\"children\":[{\"data\":{\"base-style\":{\"title\":\"\"},\"dark-mode\":{\"title\":\"\"},\"tailwind\":{\"title\":\"\"},\"turbo-flow\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"base-style\",\"route\":\"/examples/styling/base-style\",\"frontMatter\":{\"title\":\"Base Style\",\"description\":\"Show the bare-bones base style that is built into React Flow, but is not used by default\",\"filePath\":\"src/content/examples/styling/base-style.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lc8\"},{\"name\":\"dark-mode\",\"route\":\"/examples/styling/dark-mode\",\"frontMatter\":{\"title\":\"Dark Mode\",\"description\":\"React Flow comes with a color mode prop that allows you to switch between dark, light and system mode.\",\"created_at\":\"2024-07-15\",\"filePath\":\"src/content/examples/styling/dark-mode.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lc9\"},{\"name\":\"tailwind\",\"route\":\"/examples/styling/tailwind\",\"frontMatter\":{\"title\":\"Tailwind\",\"description\":\"Use Tailwind CDN to easily make nice looking flows\",\"filePath\":\"src/content/examples/styling/tailwind.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lca\"},{\"name\":\"turbo-flow\",\"route\":\"/examples/styling/turbo-flow\",\"frontMatter\":{\"title\":\"Turbo Flow\",\"description\":\"Nodes with glowing animated gradient borders, inspired by the turbo.build website\",\"filePath\":\"src/content/examples/styling/turbo-flow.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lcb\"}],\"title\":\"Styling\"},{\"name\":\"whiteboard\",\"route\":\"/examples/whiteboard\",\"children\":[{\"data\":{\"eraser\":{\"title\":\"\"},\"lasso-selection\":{\"title\":\"\"},\"rectangle\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"eraser\",\"route\":\"/examples/whiteboard/eraser\",\"frontMatter\":{\"title\":\"Eraser Tool\",\"description\":\"A tool that let's you delete nodes and edges by wiping\",\"created_at\":\"2025-06-19\",\"filePath\":\"src/content/examples/whiteboard/eraser.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lcc\"},{\"name\":\"lasso-selection\",\"route\":\"/examples/whiteboard/lasso-selection\",\"frontMatter\":{\"title\":\"Lasso Selection\",\"description\":\"An example about selecting multiple items using a lasso selection tool.\",\"created_at\":\"2025-06-18\",\"filePath\":\"src/content/examples/whiteboard/lasso-selection.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lcd\"},{\"name\":\"rectangle\",\"route\":\"/examples/whiteboard/rectangle\",\"frontMatter\":{\"title\":\"Rectangle\",\"description\":\"An example about drawing rectangles on a whiteboard using React Flow.\",\"created_at\":\"2025-06-18\",\"filePath\":\"src/content/examples/whiteboard/rectangle.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lce\"},{\"name\":\"freehand-draw\",\"route\":\"/examples/whiteboard/freehand-draw\",\"frontMatter\":{\"title\":\"Freehand Draw\",\"description\":\"Freehand drawing on the canvas.\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/whiteboard/freehand-draw.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lcf\"}],\"title\":\"Whiteboard\"},{\"name\":\"misc\",\"route\":\"/examples/misc\",\"children\":[{\"data\":{\"download-image\":{\"title\":\"\"},\"server-side-image-creation\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"download-image\",\"route\":\"/examples/misc/download-image\",\"frontMatter\":{\"title\":\"Download Image\",\"description\":\"Save a flow as a png with the html-to-image library\",\"filePath\":\"src/content/examples/misc/download-image.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Ld0\"},{\"name\":\"server-side-image-creation\",\"route\":\"/examples/misc/server-side-image-creation\",\"frontMatter\":{\"title\":\"Server Side Image Creation\",\"description\":\"Generate static images of React Flow graphs on the server with Puppeteer\",\"is_pro_example\":true,\"filePath\":\"src/content/examples/misc/server-side-image-creation.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ld1\"}],\"title\":\"Misc\"}],\"title\":\"Examples\"},{\"name\":\"ui\",\"route\":\"/ui\",\"children\":[{\"data\":{\"index\":{\"title\":\"Introduction\",\"theme\":{\"layout\":\"full\",\"toc\":false}},\"templates\":{\"theme\":{\"layout\":\"full\",\"toc\":false}},\"components\":{},\"_\":{\"type\":\"separator\"},\"request-a-component\":{\"href\":\"https://github.com/xyflow/web/discussions/new?category=ui-component-requests\"}}},{\"name\":\"index\",\"route\":\"/ui\",\"frontMatter\":{\"title\":\"React Flow UI\",\"filePath\":\"src/content/ui/index.mdx\",\"timestamp\":1788169497000},\"title\":\"Introduction\"},{\"name\":\"templates\",\"route\":\"/ui/templates\",\"children\":[{\"name\":\"ai-workflow-editor\",\"route\":\"/ui/templates/ai-workflow-editor\",\"frontMatter\":{\"title\":\"AI Workflow Editor\",\"description\":\"Starting point for building AI-powered workflow editors using React Flow UI.\",\"is_pro_example\":true,\"filePath\":\"src/content/ui/templates/ai-workflow-editor.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Ld2\"},{\"name\":\"workflow-editor\",\"route\":\"/ui/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/ui/templates/workflow-editor.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ld3\"}],\"title\":\"Templates\"},{\"name\":\"components\",\"route\":\"/ui/components\",\"children\":[{\"data\":{\"#\":{\"type\":\"separator\",\"title\":\"Node Utilities\"},\"base-node\":{\"title\":\"\"},\"node-status-indicator\":{\"title\":\"Status Indicator\"},\"node-appendix\":{\"title\":\"Appendix\"},\"node-tooltip\":{\"title\":\"Tooltip\"},\"##\":{\"type\":\"separator\",\"title\":\"Custom Nodes\"},\"database-schema-node\":{\"title\":\"Database Schema\"},\"placeholder-node\":{\"title\":\"Placeholder\"},\"labeled-group-node\":{\"title\":\"Labeled Group\"},\"###\":{\"type\":\"separator\",\"title\":\"Handles\"},\"base-handle\":{\"title\":\"\"},\"labeled-handle\":{\"title\":\"\"},\"button-handle\":{\"title\":\"\"},\"####\":{\"type\":\"separator\",\"title\":\"Custom Edges\"},\"button-edge\":{\"title\":\"\"},\"data-edge\":{\"title\":\"\"},\"animated-svg-edge\":{\"title\":\"\"},\"#####\":{\"type\":\"separator\",\"title\":\"Controls\"},\"node-search\":{\"title\":\"\"},\"zoom-slider\":{\"title\":\"\"},\"zoom-select\":{\"title\":\"\"},\"######\":{\"type\":\"separator\",\"title\":\"Misc\"},\"devtools\":{\"title\":\"\"}},\"title\":\"$undefined\"},{\"name\":\"#\",\"type\":\"separator\",\"title\":\"$Ld4\"},{\"name\":\"base-node\",\"route\":\"/ui/components/base-node\",\"frontMatter\":{\"description\":\"A node component with basic styling\",\"title\":\"Base Node\",\"filePath\":\"src/content/ui/components/base-node.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Ld5\"},{\"name\":\"node-status-indicator\",\"route\":\"/ui/components/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/ui/components/node-status-indicator.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ld6\"},{\"name\":\"node-appendix\",\"route\":\"/ui/components/node-appendix\",\"frontMatter\":{\"description\":\"A wrapper component for dynamically appending information to nodes in an absolutely positioned container.\",\"title\":\"Node Appendix\",\"filePath\":\"src/content/ui/components/node-appendix.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ld7\"},{\"name\":\"node-tooltip\",\"route\":\"/ui/components/node-tooltip\",\"frontMatter\":{\"description\":\"A node that displays a tooltip when hovered\",\"title\":\"Node Tooltip\",\"filePath\":\"src/content/ui/components/node-tooltip.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ld8\"},{\"name\":\"##\",\"type\":\"separator\",\"title\":\"$Ld9\"},{\"name\":\"database-schema-node\",\"route\":\"/ui/components/database-schema-node\",\"frontMatter\":{\"description\":\"A node that can be used to visualize a database schema\",\"title\":\"Database Schema Node\",\"filePath\":\"src/content/ui/components/database-schema-node.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lda\"},{\"name\":\"placeholder-node\",\"route\":\"/ui/components/placeholder-node\",\"frontMatter\":{\"description\":\"A custom node that can be clicked to create a new node.\",\"title\":\"Placeholder Node\",\"filePath\":\"src/content/ui/components/placeholder-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ldb\"},{\"name\":\"labeled-group-node\",\"route\":\"/ui/components/labeled-group-node\",\"frontMatter\":{\"description\":\"A group node with an optional label.\",\"title\":\"Labeled Group Node\",\"filePath\":\"src/content/ui/components/labeled-group-node.mdx\",\"timestamp\":1788169497000},\"title\":\"$Ldc\"},{\"name\":\"###\",\"type\":\"separator\",\"title\":\"$Ldd\"},{\"name\":\"base-handle\",\"route\":\"/ui/components/base-handle\",\"frontMatter\":{\"description\":\"A handle component with basic styling\",\"title\":\"Base Handle\",\"filePath\":\"src/content/ui/components/base-handle.mdx\",\"timestamp\":1788169497000},\"title\":\"$Lde\"},{\"name\":\"labeled-handle\",\"route\":\"/ui/components/labeled-handle\",\"frontMatter\":{\"description\":\"A handle component with a label\",\"title\":\"Labeled Handle\",\"filePath\":\"src/content/ui/components/labeled-handle.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Ldf\"},{\"name\":\"button-handle\",\"route\":\"/ui/components/button-handle\",\"frontMatter\":{\"description\":\"A handle component that lets you add new nodes with a dropdown.\",\"title\":\"Button Handle\",\"filePath\":\"src/content/ui/components/button-handle.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le0\"},{\"name\":\"####\",\"type\":\"separator\",\"title\":\"$Le1\"},{\"name\":\"button-edge\",\"route\":\"/ui/components/button-edge\",\"frontMatter\":{\"sidebarTitle\":\"Edge with Button\",\"description\":\"A custom edge component with a button\",\"title\":\"Button Edge\",\"filePath\":\"src/content/ui/components/button-edge.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le2\"},{\"name\":\"data-edge\",\"route\":\"/ui/components/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/ui/components/data-edge.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le3\"},{\"name\":\"animated-svg-edge\",\"route\":\"/ui/components/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/ui/components/animated-svg-edge.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Le4\"},{\"name\":\"#####\",\"type\":\"separator\",\"title\":\"$Le5\"},{\"name\":\"node-search\",\"route\":\"/ui/components/node-search\",\"frontMatter\":{\"description\":\"A slider component that can be used to zoom in and out\",\"title\":\"Node Search\",\"filePath\":\"src/content/ui/components/node-search.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le6\"},{\"name\":\"zoom-slider\",\"route\":\"/ui/components/zoom-slider\",\"frontMatter\":{\"description\":\"A slider component that can be used to zoom in and out\",\"title\":\"Zoom Slider\",\"filePath\":\"src/content/ui/components/zoom-slider.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le7\"},{\"name\":\"zoom-select\",\"route\":\"/ui/components/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/ui/components/zoom-select.mdx\",\"timestamp\":1788169497000},\"title\":\"$Le8\"},{\"name\":\"######\",\"type\":\"separator\",\"title\":\"$Le9\"},{\"name\":\"devtools\",\"route\":\"/ui/components/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/ui/components/devtools.mdx\",\"timestamp\":1
80788169497000},\"title\":\"$Lea\"}],\"title\":\"Components\"},{\"name\":\"_\",\"type\":\"separator\"},{\"name\":\"request-a-component\",\"href\":\"https://github.com/xyflow/web/discussions/new?category=ui-component-requests\",\"title\":\"Request a Component\"}],\"title\":\"UI\"},{\"name\":\"showcase\",\"route\":\"/showcase\",\"frontMatter\":{\"title\":\"Showcase\",\"description\":\"Projects and examples using React Flow\"},\"title\":\"Showcase\"},{\"name\":\"more\",\"type\":\"menu\",\"items\":\"$2:props:children:1:1:props:children:1:props:children:props:children:2:props:pageMap:0:data:more:items\",\"title\":\"More\"},{\"name\":\"pro\",\"route\":\"/pro\",\"children\":[{\"data\":{\"*\":{\"theme\":{\"layout\":\"full\",\"pagination\":false,\"toc\":false}},\"content\":{\"display\":\"hidden\"},\"dashboard\":{\"title\":\"$Leb\"},\"support\":{\"title\":\"$Lec\"},\"team\":{\"title\":\"$Led\"},\"account\":{\"title\":\"$Lee\"},\"subscribe\":{\"display\":\"hidden\",\"theme\":{\"breadcrumb\":false,\"toc\":false}},\"--\":{\"type\":\"separator\",\"title\":\"$Lef\"},\"sign-in\":{\"display\":\"hidden\"},\"sign-up\":{\"display\":\"hidden\"},\"reset-password\":{\"display\":\"hidden\"},\"email-verification\":{\"display\":\"hidden\"},\"auth-verify\":{\"display\":\"hidden\"},\"quote-request\":{\"display\":\"hidden\"},\"case-studies\":{\"display\":\"hidden\",\"theme\":{\"breadcrumb\":false,\"layout\":\"full\",\"sidebar\":false,\"toc\":false}}}},{\"name\":\"content\",\"route\":\"/pro/content\",\"frontMatter\":{\"title\":\"Pro Examples\",\"description\":\"Advanced React Flow code examples to use in your node-based UIs, crafted by the React Flow core team.\"},\"title\":\"Pro Examples\"},{\"name\":\"dashboard\",\"route\":\"/pro/dashboard\",\"frontMatter\":{},\"title\":\"$eb\"},{\"name\":\"support\",\"route\":\"/pro/support\",\"frontMatter\":{},\"title\":\"$ec\"},{\"name\":\"team\",\"route\":\"/pro/team\",\"frontMatter\":{},\"title\":\"$ed\"},{\"name\":\"account\",\"route\":\"/pro/account\",\"frontMatter\":{},\"title\":\"$ee\"},{\"name\":\"subscribe\",\"route\":\"/pro/subscribe\",\"children\":[{\"name\":\"non-commercial-edu-oss\",\"route\":\"/pro/subscribe/non-commercial-edu-oss\",\"frontMatter\":{\"robots\":\"noindex, nofollow\"},\"title\":\"Non Commercial Edu Oss\"}],\"frontMatter\":{\"asIndexPage\":true},\"title\":\"Subscribe\"},{\"name\":\"--\",\"type\":\"separator\",\"title\":\"$ef\"},{\"name\":\"sign-in\",\"route\":\"/pro/sign-in\",\"children\":[{\"data\":{\"email-password\":{\"display\":\"hidden\"}}},{\"name\":\"email-password\",\"route\":\"/pro/sign-in/email-password\",\"frontMatter\":{},\"title\":\"Email Password\"}],\"frontMatter\":{\"asIndexPage\":true},\"title\":\"Sign In\"},{\"name\":\"sign-up\",\"route\":\"/pro/sign-up\",\"children\":[{\"data\":{\"email-password\":{\"display\":\"hidden\"}}},{\"name\":\"email-password\",\"route\":\"/pro/sign-up/email-password\",\"frontMatter\":{},\"title\":\"Email Password\"}],\"frontMatter\":\"$2:props:children:1:1:props:children:1:props:children:props:children:2:props:pageMap:7:children:8:frontMatter\",\"title\":\"Sign Up\"},{\"name\":\"reset-password\",\"route\":\"/pro/reset-password\",\"frontMatter\":{},\"title\":\"Reset Password\"},{\"name\":\"email-verification\",\"route\":\"/pro/email-verification\",\"children\":[{\"name\":\"index\",\"route\":\"/pro/email-verification\",\"frontMatter\":{},\"title\":\"Index\"},{\"name\":\"error\",\"route\":\"/pro/email-verification/error\",\"frontMatter\":{},\"title\":\"Error\"},{\"name\":\"resend-link\",\"route\":\"/pro/email-verification/resend-link\",\"frontMatter\":{},\"title\":\"Resend Link\"}],\"title\":\"Email Verification\"},{\"name\":\"auth-verify\",\"route\":\"/pro/auth-verify\",\"frontMatter\":{},\"title\":\"Auth Verify\"},{\"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\"},{\"name\":\"case-studies\",\"route\":\"/pro/case-studies\",\"children\":[{\"name\":\"index\",\"route\":\"/pro/case-studies\",\"frontMatter\":{\"title\":\"React Flow Pro Case Studies\",\"description\":\"Case studies and success stories from some of our React Flow Pro subscribers.\"},\"title\":\"React Flow Pro Case Studies\"},{\"name\":\"carto-case-study\",\"route\":\"/pro/case-studies/carto-case-study\",\"frontMatter\":{\"title\":\"Improving Carto's end-user experience with React Flow Pro examples\",\"description\":\"Our customers can solve their spatial problems thanks to our data catalog and analytical tools. We are using React Flow for our Workflows tool, which is our main visual tool to automate data preparation \u0026 anal
80ysis 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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"Automating OneSignal's customer engagement with a React Flow workflow builder\"}],\"title\":\"Case Studies\"}],\"frontMatter\":{\"asIndexPage\":true,\"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\":\"index\",\"route\":\"/\",\"frontMatter\":{\"title\":\"Node-Based UIs in React\",\"description\":\"Highly customizable React library for workflow builders, no-code apps, image processing, visualizers, and more\"},\"title\":\"Node-Based UIs in React\"},{\"name\":\"developer-survey-2023\",\"route\":\"/developer-survey-2023\",\"frontMatter\":{\"title\":\"React flow Developer Survey 2023\",\"description\":\"Answer some questions how you use React Flow, so we can continue to focus on the most important pieces of the library and its ecosystem going into 2024\"},\"title\":\"React flow Developer Survey 2023\"},{\"name\":\"developer-survey-2024\",\"route\":\"/developer-survey-2024\",\"frontMatter\":{\"title\":\"React flow Developer Survey 2024\"},\"title\":\"React flow Developer Survey 2024\"},{\"name\":\"whats-new\",\"route\":\"/whats-new\",\"children\":[{\"name\":\"2023-11-01\",\"route\":\"/whats-new/2023-11-01\",\"frontMatter\":{\"title\":\"We refreshed our docs!\",\"description\":\"We refreshed the React Flow docs in November 2023, so things might look a little different around here.\",\"authors\":[\"john\"],\"date\":\"2023-11-01\",\"filePath\":\"src/content/whats-new/2023-11-01.mdx\",\"timestamp\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1788169497000},\"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\":1
80788169497000},\"title\":\"React Flow 12.5.0\"},{\"name\":\"2025-04-07\",\"route\":\"/whats-new/2025-04-07\",\"frontMatter\":{\"title\":\"React Flow 12.5.5\",\"description\":\"Changelog for React Flow version 12.5.5\",\"authors\":[\"xyflow\"],\"date\":\"2025-04-07\",\"filePath\":\"src/content/whats-new/2025-04-07.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.5.5\"},{\"name\":\"2025-04-14\",\"route\":\"/whats-new/2025-04-14\",\"frontMatter\":{\"title\":\"React Flow 12.5.6\",\"description\":\"Changelog for React Flow version 12.5.6\",\"authors\":[\"xyflow\"],\"date\":\"2025-04-14\",\"filePath\":\"src/content/whats-new/2025-04-14.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.5.6\"},{\"name\":\"2025-04-17\",\"route\":\"/whats-new/2025-04-17\",\"frontMatter\":{\"title\":\"React Flow 12.6.0\",\"description\":\"Changelog for React Flow version 12.6.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-04-17\",\"filePath\":\"src/content/whats-new/2025-04-17.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.6.0\"},{\"name\":\"2025-05-12\",\"route\":\"/whats-new/2025-05-12\",\"frontMatter\":{\"title\":\"React Flow 12.6.1\",\"description\":\"Changelog for React Flow version 12.6.1\",\"authors\":[\"xyflow\"],\"date\":\"2025-05-12\",\"filePath\":\"src/content/whats-new/2025-05-12.mdx\",\"timestamp\":1
80788169497000},\"title\":\"React Flow 12.6.1\"},{\"name\":\"2025-05-14\",\"route\":\"/whats-new/2025-05-14\",\"frontMatter\":{\"title\":\"React Flow 12.6.2\",\"description\":\"Changelog for React Flow version 12.6.2\",\"authors\":[\"xyflow\"],\"date\":\"2025-05-14\",\"filePath\":\"src/content/whats-new/2025-05-14.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.6.2\"},{\"name\":\"2025-06-11\",\"route\":\"/whats-new/2025-06-11\",\"frontMatter\":{\"title\":\"React Flow 12.7.0\",\"description\":\"Changelog for React Flow version 12.7.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-06-11\",\"filePath\":\"src/content/whats-new/2025-06-11.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.7.0\"},{\"name\":\"2025-06-23\",\"route\":\"/whats-new/2025-06-23\",\"frontMatter\":{\"title\":\"React Flow 12.7.1\",\"description\":\"Changelog for React Flow version 12.7.1\",\"authors\":[\"xyflow\"],\"date\":\"2025-06-23\",\"filePath\":\"src/content/whats-new/2025-06-23.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.7.1\"},{\"name\":\"2025-06-27\",\"route\":\"/whats-new/2025-06-27\",\"frontMatter\":{\"title\":\"React Flow 12.8.0\",\"description\":\"Changelog for React Flow version 12.8.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-06-27\",\"filePath\":\"src/content/whats-new/2025-06-27.mdx\",\"timestamp\":1
80788169497000},\"title\":\"React Flow 12.8.0\"},{\"name\":\"2025-07-09\",\"route\":\"/whats-new/2025-07-09\",\"frontMatter\":{\"title\":\"Learn section rework\",\"description\":\"We improved and restructured the learn section and reworked the code preview.\",\"authors\":[\"xyflow\"],\"date\":\"2025-07-09\",\"filePath\":\"src/content/whats-new/2025-07-09.mdx\",\"timestamp\":1788169497000},\"title\":\"Learn section rework\"},{\"name\":\"2025-07-14\",\"route\":\"/whats-new/2025-07-14\",\"frontMatter\":{\"title\":\"Rebrush React Flow UI\",\"description\":\"We have improved React Flow UI components to enhance their functionality and usability.\",\"authors\":[\"alessandro\",\"moritz\"],\"date\":\"2025-07-14\",\"filePath\":\"src/content/whats-new/2025-07-14.mdx\",\"timestamp\":1788169497000},\"title\":\"Rebrush React Flow UI\"},{\"name\":\"2025-08-14\",\"route\":\"/whats-new/2025-08-14\",\"frontMatter\":{\"title\":\"React Flow 12.8.3\",\"description\":\"Changelog for React Flow version 12.8.3\",\"authors\":[\"xyflow\"],\"date\":\"2025-08-14\",\"filePath\":\"src/content/whats-new/2025-08-14.mdx\",\"timestamp\":1
80788169497000},\"title\":\"React Flow 12.8.3\"},{\"name\":\"2025-08-20\",\"route\":\"/whats-new/2025-08-20\",\"frontMatter\":{\"title\":\"React Flow 12.8.4\",\"description\":\"Changelog for React Flow version 12.8.4\",\"authors\":[\"xyflow\"],\"date\":\"2025-08-20\",\"filePath\":\"src/content/whats-new/2025-08-20.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.8.4\"},{\"name\":\"2025-09-17\",\"route\":\"/whats-new/2025-09-17\",\"frontMatter\":{\"title\":\"React Flow 12.8.5\",\"description\":\"Changelog for React Flow version 12.8.5\",\"authors\":[\"xyflow\"],\"date\":\"2025-09-17\",\"filePath\":\"src/content/whats-new/2025-09-17.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.8.5\"},{\"name\":\"2025-10-20\",\"route\":\"/whats-new/2025-10-20\",\"frontMatter\":{\"title\":\"React Flow 12.9.0\",\"description\":\"Changelog for React Flow version 12.9.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-10-20\",\"filePath\":\"src/content/whats-new/2025-10-20.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.9.0\"},{\"name\":\"2025-10-28\",\"route\":\"/whats-new/2025-10-28\",\"frontMatter\":{\"title\":\"React Flow UI Components updated to React 19 and Tailwind CSS 4\",\"description\":\"A fresh look for our UI components and how to upgrade your project\",\"authors\":[\"alessandro\"],\"date\":\"2025-11-12\",\"filePath\":\"src/content/whats-new/2025-10-28.mdx\",\"timestamp\":1
80788169497000},\"title\":\"React Flow UI Components updated to React 19 and Tailwind CSS 4\"},{\"name\":\"2025-12-04\",\"route\":\"/whats-new/2025-12-04\",\"frontMatter\":{\"title\":\"React Flow 12.10.0\",\"description\":\"Changelog for React Flow version 12.10.0\",\"authors\":[\"xyflow\"],\"date\":\"2025-12-04\",\"filePath\":\"src/content/whats-new/2025-12-04.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.10.0\"},{\"name\":\"2026-02-19\",\"route\":\"/whats-new/2026-02-19\",\"frontMatter\":{\"title\":\"React Flow 12.10.1\",\"description\":\"Changelog for React Flow version 12.10.1\",\"authors\":[\"xyflow\"],\"date\":\"2026-02-19\",\"filePath\":\"src/content/whats-new/2026-02-19.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.10.1\"},{\"name\":\"2026-03-19\",\"route\":\"/whats-new/2026-03-19\",\"frontMatter\":{\"title\":\"New llms.txt endpoints for React Flow are here!\",\"description\":\"As more and more of our users are leaning on AI to help them develop React Flow apps, we’ve been thinking about how we can support AI development even when our users aren’t looking at our docs.\\n\",\"authors\":[\"hayleigh\",\"alessandro\"],\"date\":\"2026-03-19\",\"filePath\":\"src/content/whats-new/2026-03-19.mdx\",\"timestamp\":1
80788169497000},\"title\":\"New llms.txt endpoints for React Flow are here!\"},{\"name\":\"2026-03-27\",\"route\":\"/whats-new/2026-03-27\",\"frontMatter\":{\"title\":\"React Flow 12.10.2\",\"description\":\"Changelog for React Flow version 12.10.2\",\"authors\":[\"xyflow\"],\"date\":\"2026-03-27\",\"filePath\":\"src/content/whats-new/2026-03-27.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.10.2\"},{\"name\":\"2026-06-01\",\"route\":\"/whats-new/2026-06-01\",\"frontMatter\":{\"title\":\"React Flow 12.11.0\",\"description\":\"Changelog for React Flow version 12.11.0\",\"authors\":[\"xyflow\"],\"date\":\"2026-06-01\",\"filePath\":\"src/content/whats-new/2026-06-01.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.11.0\"},{\"name\":\"2026-06-22\",\"route\":\"/whats-new/2026-06-22\",\"frontMatter\":{\"title\":\"React Flow 12.11.1\",\"description\":\"Changelog for React Flow version 12.11.1\",\"authors\":[\"xyflow\"],\"date\":\"2026-06-22\",\"filePath\":\"src/content/whats-new/2026-06-22.mdx\",\"timestamp\":1
80788169497000},\"title\":\"React Flow 12.11.1\"},{\"name\":\"2026-07-06\",\"route\":\"/whats-new/2026-07-06\",\"frontMatter\":{\"title\":\"React Flow 12.11.2\",\"description\":\"Changelog for React Flow version 12.11.2\",\"authors\":[\"xyflow\"],\"date\":\"2026-07-06\",\"filePath\":\"src/content/whats-new/2026-07-06.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.11.2\"},{\"name\":\"2026-08-12\",\"route\":\"/whats-new/2026-08-12\",\"frontMatter\":{\"title\":\"React Flow 12.11.3\",\"description\":\"Changelog for React Flow version 12.11.3\",\"authors\":[\"xyflow\"],\"date\":\"2026-08-12\",\"filePath\":\"src/content/whats-new/2026-08-12.mdx\",\"timestamp\":1788169497000},\"title\":\"React Flow 12.11.3\"}],\"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?\"},{\"name\":\"become-a-partner\",\"route\":\"/become-a-partner\",\"frontMatter\":{\"title\":\"React Flow Partners\",\"description\":\"On this page we explain everything you need to know about our partners program.\",\"robots\":\"noindex, nofollow\"},\"title\":\"React Flow Partners\"},{\"name\":\"remove-attribution\",\"route\":\"/remove-attribution\",\"frontMatter\":{\"title\":\"Remove Attribution\",\"description\":\"Learn how to remove the React Flow attribution and support the project with a React Flow Pro subscription.\"},\"title\":\"Remove Attribution\"}],\"navbar\":\"$Lf0\",\"footer\":\"$Lf1\",\"children\":[\"$Lf2\",[\"$Lf3\",\"$Lf4\"]]}]]}]}],\"$Lf5\"]}]]]}]\n"])</script>
80<script>self.__next_f.push([1,"f9:Tbd2,"])</script>
80<script>self.__next_f.push([1,"---\ndescription:\n  'This hook can be used to subscribe to internal state changes of the React Flow\n  component. The useStore hook is re-exported from the Zustand state management\n  library, so you should check out their docs for more details.'\n---\n\n# useStore()\n\n[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/react/src/hooks/useStore.ts)\n\nThis hook can be used to subscribe to internal state changes of the React Flow\ncomponent. The `useStore` hook is re-exported from the [Zustand](https://github.com/pmndrs/zustand)\nstate management library, so you should check out their docs for more details.\n\n\u003cCallout type=\"info\"\u003e\n  This hook should only be used if there is no other way to access the internal\n  state. For many of the common use cases, there are dedicated hooks available\n  such as [`useReactFlow`](/api-reference/hooks/use-react-flow),\n  [`useViewport`](/api-reference/hooks/use-viewport), etc.\n\u003c/Callout\u003e\n\n```jsx\nimport { ReactFlow, useStore } from '@xyflow/react';\n\nconst nodesLengthSelector = (state) =\u003e\n  state.nodes.length || 0;\n\nconst NodesLengthDisplay = () =\u003e {\n  const nodesLength = useStore(nodesLengthSelector);\n\n  return \u003cdiv\u003eThe current number of nodes is: {nodesLength}\u003c/div\u003e;\n};\n\nfunction Flow() {\n  return (\n    \u003cReactFlow nodes={[...]}\u003e\n      \u003cNodesLengthDisplay /\u003e\n    \u003c/ReactFlow\u003e\n  );\n}\n```\n\nThis example computes the number of nodes eagerly. Whenever the number of nodes\nin the flow changes, the `\u003cNodesLengthDisplay /\u003e` component will re-render. This\nis in contrast to the example in the [`useStoreApi`](/api-reference/hooks/use-store-api) hook that only\ncomputes the number of nodes when a button is clicked.\n\nChoosing whether to calculate values on-demand or to subscribe to changes as they\nhappen is a bit of a balancing act. On the one hand, putting too many heavy\ncalculations in an event handler can make your app feel sluggish or unresponsive.\nOn the other hand, computing values eagerly can lead to slow or unnecessary\nre-renders.\n\nWe make both this hook and [`useStoreApi`](/api-reference/hooks/use-store-api) available so that you\ncan choose the approach that works best for your use-case.\n\n## Signature\n\n\u003cAPIDocs functionName=\"useStore\" /\u003e\n\n## Examples\n\n### Triggering store actions\n\nYou can manipulate the internal React Flow state by triggering internal actions\nthrough the `useStore` hook. These actions are already used internally throughout\nthe library, but you can also use them to implement custom functionality.\n\n```jsx\nimport { useStore } from '@xyflow/react';\n\nconst setMinZoomSelector = (state) =\u003e state.setMinZoom;\n\nfunction MinZoomSetter() {\n  const setMinZoom = useStore(setMinZoomSelector);\n\n  return \u003cbutton onClick={() =\u003e setMinZoom(6)}\u003eset min zoom\u003c/button\u003e;\n}\n```\n\n## TypeScript\n\nThis hook can be typed by typing the selector function. See this\n[section in our TypeScript guide](/learn/advanced-use/typescript#nodetype-edgetype-unions) for more information.\n\n```tsx\nconst nodes = useStore((s: ReactFlowState\u003cCustomNodeType\u003e) =\u003e s.nodes);\n```"])</script>
80<script>self.__next_f.push([1,"7:[\"$\",\"div\",null,{\"className\":\"x:mx-auto x:flex x:max-w-(--nextra-content-width)\",\"children\":[\"$\",\"$Lf6\",null,{\"value\":[{\"value\":\"Signature\",\"id\":\"signature\",\"depth\":2},{\"value\":\"Examples\",\"id\":\"examples\",\"depth\":2},{\"value\":\"Triggering store actions\",\"id\":\"triggering-store-actions\",\"depth\":3},{\"value\":\"TypeScript\",\"id\":\"typescript\",\"depth\":2}],\"children\":[[\"$\",\"$Lf7\",null,{}],[\"$\",\"$Lf8\",null,{\"metadata\":{\"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\":1788169497000},\"bottomContent\":\"$undefined\",\"sourceCode\":\"$f9\",\"children\":[\"$Lfa\",\"$Lfb\"]}]]}]}]\n1d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cBackground /\u003e\"}]\n1e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cBaseEdge /\u003e\"}]\n1f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cControlButton /\u003e\"}]\n20:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cControls /\u003e\"}]\n21:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cEdgeLabelRenderer /\u003e\"}]\n22:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cEdgeText /\u003e\"}]\n23:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cEdgeToolbar /\u003e\"}]\n24:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cHandle /\u003e\"}]\n25:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cMiniMap /\u003e\"}]\n26:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cNodeResizeControl /\u003e\"}]\n27:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cNodeResizer /\u003e\"}]\n28:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cNodeToolbar /\u003e\"}]\n29:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cPanel /\u003e\"}]\n2a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"\u003cViewportPortal /\u003e\"}]\n2b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useConnection()\"}]\n2c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useEdges()\"}]\n2d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useEdgesState()\"}]\n2e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useHandleConnections()\"}]\n2f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useInternalNode()\"}]\n30:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useKeyPress()\"}]\n31:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodeConnections()\"}]\n32:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodeId()\"}]\n33:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodes()\"}]\n34:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesData()\"}]\n35:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesInitialized()\"}]\n36:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useNodesState()\"}]\n37:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useOnSelectionChange()\"}]\n38:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useOnViewportChange()\"}]\n39:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useReactFlow()\"}]\n3a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useStore()\"}]\n3b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useStoreApi()\"}]\n3c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useUpdateNodeInternals()\"}]\n3d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"useViewport()\"}]\n3e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Align\"}]\n3f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"AriaLabelConfig\"}]\n40:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Backgroun
80dVariant\"}]\n41:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ColorMode\"}]\n42:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection\"}]\n43:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionLineComponent\"}]\n44:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionLineComponentProps\"}]\n45:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionLineType\"}]\n46:[\"$\",\"d"])</script>
80<script>self.__next_f.push([1,"iv\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionMode\"}]\n47:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ConnectionState\"}]\n48:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"CoordinateExtent\"}]\n49:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DefaultEdgeOptions\"}]\n4a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DeleteElements\"}]\n4b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge\"}]\n4c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeChange\"}]\n4d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeMarker\"}]\n4e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeMouseHandler\"}]\n4f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeProps\"}]\n50:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"EdgeTypes\"}]\n51:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"FitViewOptions\"}]\n52:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Handle\"}]\n53:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"HandleConnection\"}]\n54:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"InternalNode\"}]\n55:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"IsValidConnection\"}]\n56:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"KeyCode\"}]\n57:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"MarkerType\"}]\n58:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"MiniMapNodeProps\"}]\n59:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node\"}]\n5a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeChange\"}]\n5b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeConnection\"}]\n5c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeHandle\"}]\n5d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeMouseHandler\"}]\n5e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeOrigin\"}]\n5f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeProps\"}]\n60:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"NodeTypes\"}]\n61:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnBeforeDelete\"}]\n62:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnConnect\"}]\n63:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnConnectEnd\"}]\n64:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnConnectStart\"}]\n65:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnDelete\"}]\n66:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnEdgesChange\"}]\n67:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnEdgesDelete\"}]\n68:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnError\"}]\n69:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnInit\"}]\n6a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnMove\"}]\n6b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnNodeDrag\"}]\n6c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnNodesChange\"}]\n6d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnNodesDelete\"}]\n6e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnReconnect\"}]\n6f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"OnSelectionChangeFunc\"}]\n70:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"PanOnScrollMode\"}]\n71:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"PanelPosition\"}]\n72:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Position\"}]\n73:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ProOptions\"}]\n74:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ReactFlowInstance\"}]\n75:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ReactFlowJsonObject\"}]\n76:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Rect\"}]\n77:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ResizeParams\"}]\n78:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"SelectionDragHandler\"}]\n79:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"SelectionMode\"}]\n7a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"SnapGrid\"}]\n7b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Viewport\"}]\n7c:[\"$\",\"div\",null"])</script>
80<script>self.__next_f.push([1,",{\"className\":\"sidebar-title\",\"children\":\"XYPosition\"}]\n7d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"ZIndexMode\"}]\n7e:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"addEdge()\"}]\n7f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"applyEdgeChanges()\"}]\n80:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"applyNodeChanges()\"}]\n81:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getBezierPath()\"}]\n82:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getConnectedEdges()\"}]\n83:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getIncomers()\"}]\n84:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getNodesBounds()\"}]\n85:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getOutgoers()\"}]\n86:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getSimpleBezierPath()\"}]\n87:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getSmoothStepPath()\"}]\n88:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getStraightPath()\"}]\n89:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"getViewportForBounds()\"}]\n8a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"isEdge()\"}]\n8b:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"isNode()\"}]\n8c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"reconnectEdge()\"}]\n8d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"All Examples\"}]\n8e:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Pro Examples\"}]\n8f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Feature Overview\"}]\n90:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Add Node On Edge Drop\"}]\n91:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection Limit\"}]\n92:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Nodes\"}]\n93:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Delete Middle Node\"}]\n94:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Drag Handle\"}]\n95:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Easy Connect\"}]\n96:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Intersections\"}]\n97:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Resizer\"}]\n98:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Toolbar\"}]\n99:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Proximity Connect\"}]\n9a:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Rotatable Node\"}]\n9b:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Node Position Animation\"}]\n9c:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Stress Test\"}]\n9d:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Updating Nodes\"}]\n9e:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Shapes\"}]\n9f:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Animating Edges\"}]\na0:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Connection Line\"}]\na1:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Edges\"}]\na2:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Delete Edge on Drop\"}]\na3:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Label Renderer\"}]\na4:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Intersection\"}]\na5:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Toolbar\"}]\na6:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Types\"}]\na7:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Edge Routing\"}]\na8:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Floating Edges\"}]\na9:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge Markers\"}]\naa:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Multi Connection Line\"}]\nab:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Reconnect Edge\"}]\nac:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Simple Floating Edges\"}]\nad:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Temporary Edges\"}]\nae:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Editable Edge\"}]\naf:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"child"])</script>
80<script>self.__next_f.push([1,"ren\":\"Computing Flows\"}]\nb0:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Connection Events\"}]\nb1:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Context Menu\"}]\nb2:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Contextual Zoom\"}]\nb3:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Drag and Drop\"}]\nb4:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Preventing Cycles\"}]\nb5:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Save and Restore\"}]\nb6:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Touch Device\"}]\nb7:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Validation\"}]\nb8:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro free pill\",\"children\":\"Helper Lines\"}]\nb9:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Collaborative\"}]\nba:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Copy and Paste\"}]\nbb:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Undo and Redo\"}]\nbc:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Selection Grouping\"}]\nbd:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Parent Child Relation\"}]\nbe:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Sub Flow\"}]\nbf:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Dagre Tree\"}]\nc0:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Elkjs Tree\"}]\nc1:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Elkjs Multiple Handles\"}]\nc2:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Horizontal Flow\"}]\nc3:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Expand and Collapse\"}]\nc4:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Auto Layout\"}]\nc5:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Force Layout\"}]\nc6:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Dynamic Layouting\"}]\nc7:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Collisions\"}]\nc8:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Style\"}]\nc9:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Dark Mode\"}]\nca:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Tailwind\"}]\ncb:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Turbo Flow\"}]\ncc:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Eraser Tool\"}]\ncd:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Lasso Selection\"}]\nce:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Rectangle\"}]\ncf:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Freehand Draw\"}]\nd0:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Download Image\"}]\nd1:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Server Side Image Creation\"}]\nd2:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"AI Workflow Editor\"}]\nd3:[\"$\",\"div\",null,{\"className\":\"sidebar-title pro pill\",\"children\":\"Workflow Editor\"}]\nd4:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Utilities\"}]\nd5:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Node\"}]\nd6:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Status Indicator\"}]\nd7:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Appendix\"}]\nd8:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Tooltip\"}]\nd9:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Nodes\"}]\nda:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Database Schema\"}]\ndb:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Placeholder\"}]\ndc:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Labeled Group\"}]\ndd:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Handles\"}]\nde:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Base Handle\"}]\ndf:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Labeled Handle\"}]\ne0:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Button Handle\"}]\ne1:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Custom Edges\"}]\ne2:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge with Button\"}"])</script>
80<script>self.__next_f.push([1,"]\ne3:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Edge with Node Data\"}]\ne4:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Animated SVG Edge\"}]\ne5:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Controls\"}]\ne6:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Node Search\"}]\ne7:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Zoom Slider\"}]\ne8:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Zoom Select\"}]\ne9:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"Misc\"}]\nea:[\"$\",\"div\",null,{\"className\":\"sidebar-title\",\"children\":\"DevTools\"}]\neb:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"height\":\"1.2em\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"}]]}],\"Dashboard\"]}]\nec:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"height\":\"1.2em\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155\"}]]}],\"Support\"]}]\ned:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"height\":\"1.2em\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z\"}]]}],\"Team\"]}]\nfc:T431,M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-"])</script>
80<script>self.__next_f.push([1,".94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Zee:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"aria-hidden\":\"true\",\"data-slot\":\"icon\",\"ref\":\"$undefined\",\"aria-labelledby\":\"$undefined\",\"height\":\"1.2em\",\"children\":[null,[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"$fc\"}],[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"}]]}],\"Account\"]}]\nef:[\"$\",\"$Lfd\",null,{}]\nf0:[\"$\",\"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 site-native-navbar justify-between\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:flex x:items-center x:max-md:me-auto\",\"children\":[\"$\",\"$Lfe\",null,{\"label\":\"React Flow\",\"labelClassName\":\"mr-5 md:max-lg:hidden\"}]}],[\"$\",\"$Lff\",null,{\"className\":\"x:me-auto\",\"children\":[\"$undefined\",\"$undefined\",[\"$\",\"$L100\",null,{}]]}]]}]]}]\n"])</script>
80<script>self.__next_f.push([1,"f1:[\"$\",\"footer\",null,{\"className\":\"print:bg-transparent py-12 lg:py-18 bg-black text-white\",\"ref\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"x:max-w-(--nextra-content-width) mx-auto pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] lg:flex\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0 md:max-w-[600px] lg:mr-24 lg:max-w-[300px]\",\"children\":[[[\"$\",\"p\",null,{\"className\":\"text-light text-base leading-relaxed mb-2\",\"ref\":\"$undefined\",\"children\":\"A project by the xyflow team\"}],[\"$\",\"div\",null,{\"className\":\"mb-6 text-3xl font-black leading-none tracking-tight 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 h-[100%] grow flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid-gap-4 grid grid-cols-2 lg:grid-cols-4\",\"children\":[[\"$\",\"div\",\"Docs\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Docs\"}],[[\"$\",\"$L101\",\"/learn\",{\"href\":\"/learn\",\"className\":\"block\",\"children\":\"Getting Started\"}],[\"$\",\"$L101\",\"/api-reference\",{\"href\":\"/api-reference\",\"className\":\"block\",\"children\":\"API Reference\"}],[\"$\",\"$L101\",\"/examples\",{\"href\":\"/examples\",\"className\":\"block\",\"children\":\"Examples\"}],[\"$\",\"$L101\",\"/ui\",{\"href\":\"/ui\",\"className\":\"block\",\"children\":\"UI\"}],[\"$\",\"$L101\",\"/showcase\",{\"href\":\"/showcase\",\"className\":\"block\",\"children\":\"Showcase\"}],[\"$\",\"$L101\",\"https://play.reactflow.dev\",{\"href\":\"https://play.reactflow.dev\",\"className\":\"block\",\"children\":\"Playground\"}]]]}],[\"$\",\"div\",\"Social\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Social\"}],[[\"$\",\"$L101\",\"https://discord.gg/RVmnytFmGW\",{\"href\":\"https://discord.gg/RVmnytFmGW\",\"className\":\"block\",\"children\":\"Discord\"}],[\"$\",\"$L101\",\"https://github.com/xyflow\",{\"href\":\"https://github.com/xyflow\",\"className\":\"block\",\"children\":\"Github\"}],[\"$\",\"$L101\",\"https://x.com/xyflowdev\",{\"href\":\"https://x.com/xyflowdev\",\"className\":\"block\",\"children\":\"X / Twitter\"}],[\"$\",\"$L101\",\"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\"}],[[\"$\",\"$L101\",\"https://xyflow.com/blog\",{\"href\":\"https://xyflow.com/blog\",\"className\":\"block\",\"children\":\"Blog\"}],[\"$\",\"$L101\",\"https://xyflow.com/open-source\",{\"href\":\"https://xyflow.com/open-source\",\"className\":\"block\",\"children\":\"Open Source\"}],[\"$\",\"$L101\",\"https://xyflow.com/about\",{\"href\":\"https://xyflow.com/about\",\"className\":\"block\",\"children\":\"About\"}],[\"$\",\"$L101\",\"https://xyflow.com/contact\",{\"href\":\"https://xyflow.com/contact\",\"className\":\"block\",\"children\":\"Contact\"}],[\"$\",\"$L101\",\"https://xyflow.com/careers\",{\"href\":\"https://xyflow.com/careers\",\"className\":\"block\",\"children\":\"Careers\"}]]]}],[\"$\",\"div\",\"Legal\",{\"className\":\"mt-4 lg:mt-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base leading-relaxed text-light mb-2\",\"ref\":\"$undefined\",\"children\":\"Legal\"}],[[\"$\",\"$L101\",\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/LICENSE\",\"className\":\"block\",\"children\":\"MIT License\"}],[\"$\",\"$L101\",\"https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md\",{\"href\":\"https://github.com/xyflow/xyflow/blob/main/CODE_OF_CONDUCT.md\",\"className\":\"block\",\"children\":\"Code of Conduct\"}],[\"$\",\"$L101\",\"https://xyflow.com/imprint\",{\"href\":\"https://xyflow.com/imprint\",\"className\":\"block\",\"children\":\"Imprint\"}]]]}]]}],[\"$\",\"p\",null,{\"className\":\"text-light mt-auto pt-6 text-sm\",\"ref\":\"$undefined\",\"children\":[[\"$\",\"a\",null,{\"href\":\"mailto:[email protected]\",\"children\":\"[email protected]\"}],\" — Copyright © \",2026,\" \",[\"$\",\"a\",null,{\"href\":\"https://webkid.io\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"webkid GmbH\"}],\". All rights reserved\",[\" \",\"— website design by\",\" \",[\"$\",\"a\",null,{\"target\":\"_blank\",\"href\":\"https://facumontanaro.com/\",\"rel\":\"noopener noreferrer\",\"children\":\"Facu Montanaro\"}]]]}]]}]}]]}]}]\n"])</script>
80<script>self.__next_f.push([1,"f2:[\"$\",\"$L102\",null,{}]\nf3:[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$103\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0afp3vgt69pdp.js\",\"async\":true}]],\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L6\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\nf4:[\"$\",\"$L104\",null,{}]\nf5:[\"$\",\"$L105\",null,{}]\nfa:[\"$\",\"div\",null,{\"id\":\"nextra-skip-nav\"}]\nfb:[\"$\",\"main\",null,{\"data-pagefind-body\":true,\"children\":\"$@106\"}]\n"])</script>
80<script>self.__next_f.push([1,"106:[[\"$\",\"h1\",null,{\"id\":\"$undefined\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-bold x:mt-2 x:text-4xl\",\"children\":[\"useStore()\",\"$undefined\"]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"$\",\"a\",null,{\"href\":\"https://github.com/xyflow/xyflow/blob/main/packages/react/src/hooks/useStore.ts\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"Source on GitHub\",[\" \",[\"$\",\"svg\",null,{\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.7,\"viewBox\":\"0 0 24 24\",\"height\":\"1em\",\"className\":\"x:inline x:align-baseline x:shrink-0\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M7 17L17 7\"}],[\"$\",\"path\",null,{\"d\":\"M7 7h10v10\"}]]}]]]}]}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"This hook can be used to subscribe to internal state changes of the React Flow\\ncomponent. The \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useStore\"}],\" hook is re-exported from the \",[\"$\",\"a\",null,{\"href\":\"https://github.com/pmndrs/zustand\",\"target\":\"_blank\",\"rel\":\"noreferrer\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"Zustand\",[\" \",[\"$\",\"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\"}]]}]]]}],\"\\nstate management library, so you should check out their docs for more details.\"]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"nextra-callout x:overflow-x-auto x:not-first:mt-[1.25em] x:flex x:rounded-lg x:border x:py-[.5em] x:pe-[1em] x:contrast-more:border-current! x:bg-blue-100 x:dark:bg-blue-900/30 x:text-blue-700 x:dark:text-blue-400 x:border-blue-700 x:dark:border-blue-600\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:select-none x:text-[1.25em] x:ps-[.6em] x:pe-[.4em]\",\"style\":{\"fontFamily\":\"\\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\"\"},\"data-pagefind-ignore\":\"all\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"fill\":\"currentColor\",\"height\":\".8em\",\"className\":\"x:mt-[.3em]\",\"children\":[\"$\",\"path\",null,{\"d\":\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"}]}]}],[\"$\",\"div\",null,{\"className\":\"x:w-full x:min-w-0\",\"children\":[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"This hook should only be used if there is no other way to access the internal\\nstate. For many of the common use cases, there are dedicated hooks available\\nsuch as \",[\"$\",\"$L101\",null,{\"href\":\"/api-reference/hooks/use-react-flow\",\"prefetch\":\"$undefined\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useReactFlow\"}]}],\",\\n\",[\"$\",\"$L101\",null,{\"href\":\"/api-reference/hooks/use-viewport\",\"prefetch\":\"$undefined\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useViewport\"}]}],\", etc.\"]}]}]]}
80],\"\\n\",[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-[1.25em]\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[\"$L107\",\"$L108\"]}]]}],\"\\n\",\"$L109\",\"\\n\",\"$L10a\",\"\\n\",\"$L10b\",\"\\n\",\"$L10c\",\"\\n\",\"$L10d\",\"\\n\",\"$L10e\",\"\\n\",\"$L10f\",\"\\n\",\"$L110\",\"\\n\",\"$L111\",\"\\n\",\"$L112\",\"\\n\",\"$L113\",\"\\n\",\"$L114\"]\n"])</script>
80<script>self.__next_f.push([1,"107:[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L115\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L116\",null,{\"className\":\"\"}]]}]\n"])</script>
80<script>self.__next_f.push([1,"108:[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { ReactFlow, useStore } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '@xyflow/react'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" nodesLengthSelector\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"state\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"  state.nodes.\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"length\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" ||\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" 0\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" NodesLengthDisplay\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" () \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" nodesLength\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" useStore\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(nodesLengthSelector);\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}
80],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003eThe current number of nodes is: {nodesLength}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"};\"}]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" Flow\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"    \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"ReactFlow\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" nodes\"}],\"$L117\",\"$L118\",\"$L119\",\"$L11a\"]}],\"\\n\",\"$L11b\",\"\\n\",\"$L11c\",\"\\n\",\"$L11d\",\"\\n\",\"$L11e\"]}]\n"])</script>
80<script>self.__next_f.push([1,"109:[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"This example computes the number of nodes eagerly. Whenever the number of nodes\\nin the flow changes, the \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"\u003cNodesLengthDisplay /\u003e\"}],\" component will re-render. This\\nis in contrast to the example in the \",[\"$\",\"$L101\",null,{\"href\":\"/api-reference/hooks/use-store-api\",\"prefetch\":\"$undefined\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useStoreApi\"}]}],\" hook that only\\ncomputes the number of nodes when a button is clicked.\"]}]\n10a:[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":\"Choosing whether to calculate values on-demand or to subscribe to changes as they\\nhappen is a bit of a balancing act. On the one hand, putting too many heavy\\ncalculations in an event handler can make your app feel sluggish or unresponsive.\\nOn the other hand, computing values eagerly can lead to slow or unnecessary\\nre-renders.\"}]\n10b:[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"We make both this hook and \",[\"$\",\"$L101\",null,{\"href\":\"/api-reference/hooks/use-store-api\",\"prefetch\":\"$undefined\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useStoreApi\"}]}],\" available so that you\\ncan choose the approach that works best for your use-case.\"]}]\n10c:[\"$\",\"h2\",null,{\"id\":\"signature\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Signature\",[\"$\",\"$L11f\",null,{\"id\":\"signature\"}]]}]\n10e:[\"$\",\"h2\",null,{\"id\":\"examples\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"Examples\",[\"$\",\"$L11f\",null,{\"id\":\"examples\"}]]}]\n10f:[\"$\",\"h3\",null,{\"id\":\"triggering-store-actions\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-8 x:text-2xl\",\"children\":[\"Triggering store actions\",[\"$\",\"$L11f\",null,{\"id\":\"triggering-store-actions\"}]]}]\n110:[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"You can manipulate the internal React Flow state by triggering internal actions\\nthrough the \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"useStore\"}],\" hook. These actions are already used internally throughout\\nthe library, but you can also use them to implement custom functionality.\"]}]\n"])</script>
80<script>self.__next_f.push([1,"111:[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-[1.25em]\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L115\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L116\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" { useStore } \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#032F62\",\"--shiki-dark\":\"#9ECBFF\"},\"children\":\" '@xyflow/react'\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" setMinZoomSelector\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" (\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"state\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\") \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" state.setMinZoom;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" MinZoomSetter\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" setMinZoom\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" useStore\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(setMinZoomSelector);\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\"
80:\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"  return\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"button\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" onClick\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{() \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" setMinZoom\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"6\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\")}\u003eset min zoom\u003c/\"}],\"$L120\",\"$L121\"]}],\"\\n\",\"$L122\"]}]]}]]}]\n"])</script>
80<script>self.__next_f.push([1,"112:[\"$\",\"h2\",null,{\"id\":\"typescript\",\"className\":\"x:tracking-tight x:text-slate-900 x:dark:text-slate-100 x:font-semibold x:target:animate-[fade-in_1.5s] x:mt-10 x:border-b x:pb-1 x:text-3xl nextra-border\",\"children\":[\"TypeScript\",[\"$\",\"$L11f\",null,{\"id\":\"typescript\"}]]}]\n113:[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"This hook can be typed by typing the selector function. See this\\n\",[\"$\",\"$L101\",null,{\"href\":\"/learn/advanced-use/typescript#nodetype-edgetype-unions\",\"prefetch\":\"$undefined\",\"className\":\"x:focus-visible:nextra-focus x:text-primary-600 x:underline x:hover:no-underline x:decoration-from-font x:[text-underline-position:from-font]\",\"children\":\"section in our TypeScript guide\"}],\" for more information.\"]}]\n"])</script>
80<script>self.__next_f.push([1,"114:[\"$\",\"div\",null,{\"data-pagefind-ignore\":\"all\",\"className\":\"nextra-code x:relative x:not-first:mt-[1.25em]\",\"children\":[\"$undefined\",[\"$\",\"pre\",null,{\"className\":\"x:group x:focus-visible:nextra-focus x:overflow-x-auto x:subpixel-antialiased x:text-[.9em] x:bg-white x:dark:bg-black x:py-4 x:ring-1 x:ring-inset x:ring-gray-300 x:dark:ring-neutral-700 x:contrast-more:ring-gray-900 x:contrast-more:dark:ring-gray-50 x:contrast-more:contrast-150 x:rounded-md not-prose\",\"tabIndex\":\"0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"x:group-hover:opacity-100 x:group-focus:opacity-100 x:opacity-0 x:transition x:focus-within:opacity-100 x:flex x:gap-1 x:absolute x:right-4 x:top-2\",\"children\":[[\"$\",\"$L115\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"height\":\"1em\",\"children\":[\"$\",\"path\",null,{\"d\":\"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z\"}]}]}],[\"$\",\"$L116\",null,{\"className\":\"\"}]]}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\" nodes\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\" =\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" useStore\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"((\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#E36209\",\"--shiki-dark\":\"#FFAB70\"},\"children\":\"s\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\" ReactFlowState\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#6F42C1\",\"--shiki-dark\":\"#B392F0\"},\"children\":\"CustomNodeType\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e) \"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" s.nodes);\"}]]}]}]]}]]}]\n"])</script>
80<script>self.__next_f.push([1,"117:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"=\"}]\n118:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"{[\"}]\n119:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#D73A49\",\"--shiki-dark\":\"#F97583\"},\"children\":\"...\"}]\n11a:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"]}\u003e\"}]\n11b:[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"      \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"NodesLengthDisplay\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" /\u003e\"}]]}]\n11c:[\"$\",\"span\",null,{\"children\":[[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"    \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"ReactFlow\"}],[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}]\n11d:[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"  );\"}]}]\n11e:[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]\n120:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#22863A\",\"--shiki-dark\":\"#85E89D\"},\"children\":\"button\"}]\n121:[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e;\"}]\n122:[\"$\",\"span\",null,{\"children\":[\"$\",\"span\",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"}\"}]}]\n10d:[[\"$\",\"b\",null,{\"className\":\"x:mt-[1.25em] x:block\",\"children\":\"Parameters:\"}],[\"$\",\"table\",null,{\"className\":\"x:my-8 x:w-full x:text-sm\",\"children\":[[\"$\",\"thead\",null,{\"className\":\"nextra-border x:border-b x:text-left x:max-lg:hidden\",\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"className\":\"x:py-1.5\",\"children\":\"Name\"}],[\"$\",\"th\",null,{\"className\":\"x:p-1.5 x:px-3\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"className\":\"x:py-1.5\",\"children\":\"Default\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[\"$@123\",\"$@124\"]}]]}],[\"$\",\"b\",null,{\"className\":\"x:mt-[1.25em] x:block\",\"children\":\"Returns:\"}],[\"$\",\"div\",null,{\"id\":\"returns\",\"className\":\"x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:text-sm x:relative x:p-3 x:border x:before:content-[\\\"Type:_\\\"] x:mt-5\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#returns\",\"className\":\"x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[\\\"#\\\"] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)]\"}],[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"StateSlice\"]}],\"$undefined\"]}]]\n123:[\"$\",\"tr\",\"selector\",{\"id\":\"selector\",\"className\":\"x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:group x:mb-5 x:max-lg:block x:max-lg:border x:lg:border-b x:lg:not-target:[\u0026\u003etd\u003ea]:opacity-0\",\"children\":[[\"$\",\"td\",null,{\"className\":\"x:relative x:max-lg:block x:py-3 x:max-lg:px-3\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#selector\",\"className\":\"x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[\\\"#\\\"] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)] x:group-hover:opacity-100! x:lg:top-1/2 x:lg:right-full x:lg:-translate-y-1/2\"}],[\"$\",\"code\",null,{\"className\":\"nextra-code x:max-md:break-all\",\"dir\":\"ltr\",\"children\":\"selector\"}]]}],[\"$\",\"td\",null,{\"className\":\"x:p-3 x:max-lg:block x:max-lg:before:content-[\\\"Type:_\\\"]\",\"children\":[[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"(state: ReactFlowState) =\u003e StateSlice\"]}],[\"$\",\"div\",null,{\"className\":\"x:mt-2\",\"children\":[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":\"A selector function that returns a slice of the flow’s internal state.\\nExtracting or transforming just the state you need is a good practice to avoid unnecessary\\nre-renders.\"}]}]]}],[\"$\",\"td\",null,{\"className\":\"x:max-lg:block x:lg:after:content-"])</script>
80<script>self.__next_f.push([1,"[\\\"–\\\"]\"}]]}]\n"])</script>
80<script>self.__next_f.push([1,"124:[\"$\",\"tr\",\"equalityfn\",{\"id\":\"equalityfn\",\"className\":\"x:rounded-xl nextra-border x:hover:bg-primary-50 x:dark:hover:bg-primary-500/10 x:group x:mb-5 x:max-lg:block x:max-lg:border x:lg:border-b x:lg:not-target:[\u0026\u003etd\u003ea]:opacity-0\",\"children\":[[\"$\",\"td\",null,{\"className\":\"x:relative x:max-lg:block x:py-3 x:max-lg:px-3\",\"children\":[[\"$\",\"a\",null,{\"href\":\"#equalityfn\",\"className\":\"x:absolute x:top-0 x:right-0 x:text-lg x:font-black x:before:content-[\\\"#\\\"] x:hover:text-black x:dark:hover:text-white x:px-3 x:py-[min(1%,12px)] x:group-hover:opacity-100! x:lg:top-1/2 x:lg:right-full x:lg:-translate-y-1/2\"}],[\"$\",\"code\",null,{\"className\":\"nextra-code x:max-md:break-all x:after:content-[\\\"?\\\"]\",\"dir\":\"ltr\",\"children\":\"equalityFn\"}]]}],[\"$\",\"td\",null,{\"className\":\"x:p-3 x:max-lg:block x:max-lg:before:content-[\\\"Type:_\\\"]\",\"children\":[[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":[\"(a: StateSlice, b: StateSlice) =\u003e boolean\"]}],[\"$\",\"div\",null,{\"className\":\"x:mt-2\",\"children\":[\"$\",\"p\",null,{\"className\":\"x:not-first:mt-[1.25em] x:leading-7\",\"children\":[\"A function to compare the previous and next value. This is incredibly useful\\nfor preventing unnecessary re-renders. Good sensible defaults are using \",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"Object.is\"}],\" or importing\\n\",[\"$\",\"code\",null,{\"className\":\"nextra-code\",\"dir\":\"ltr\",\"children\":\"zustand/shallow\"}],\", but you can be as granular as you like.\"]}]}]]}],[\"$\",\"td\",null,{\"className\":\"x:max-lg:block x:lg:after:content-[\\\"–\\\"]\"}]]}]\n"])</script>
80<script>self.__next_f.push([1,"10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:null\n"])</script>
80<script>self.__next_f.push([1,"12:[[\"$\",\"title\",\"0\",{\"children\":\"useStore() - React Flow\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"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.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"React Flow\"}],[\"$\",\"meta\",\"3\",{\"name\":\"generator\",\"content\":\"Next.js\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"react,node-based UI,graph,diagram,workflow,react-flow,xyflow\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index,follow\"}],[\"$\",\"meta\",\"6\",{\"name\":\"docsearch:site\",\"content\":\"react\"}],[\"$\",\"link\",\"7\",{\"rel\":\"canonical\",\"href\":\"https://reactflow.dev/api-reference/hooks/use-store\"}],[\"$\",\"meta\",\"8\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"9\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"React Flow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"useStore() - React Flow\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"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.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://reactflow.dev/api-reference/hooks/use-store\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:site_name\",\"content\":\"React Flow\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image\",\"content\":\"https://reactflow.dev/opengraph-image.jpg?opengraph-image.13ofj5b.2-4go.jpg\"}],[\"$\",\"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:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:site\",\"content\":\"https://x.com/xyflowdev\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:creator\",\"content\":\"@xyflowdev\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:title\",\"content\":\"useStore() - React Flow\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:description\",\"content\":\"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.\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:image\",\"content\":\"https://reactflow.dev/opengraph-image.jpg?opengraph-image.13ofj5b.2-4go.jpg\"}],[\"$\",\"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\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0~w8zp6ovw0mv.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/icon.svg?icon.09l0-uedd1wof.svg\",\"sizes\":\"any\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"32\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.01tl0dlgd44gv.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L125\",\"33\",{}]]\n"])</script>
80<script>self.__next_f.push([1,"126:[\"mdxPath\"]\n14:\"$W126\"\n127:[\"mdxPath\"]\nb:\"$W127\"\n128:[]\nd:\"$W128\"\n129:[]\ne:\"$W129\"\n"])</script>
80</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.