<SvelteFlowProvider />

Source on GitHub

The <SvelteFlowProvider /> component wraps its child nodes with a Svelte context that makes it possible to access a flow’s internal state outside of the <SvelteFlow /> component. Many of the hooks we provide rely on this component to work.

App.svelte


<script>
  import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  import Sidebar from './Sidebar.svelte';
 
  /* ... */
</script>
 
<SvelteFlowProvider>
  <SvelteFlow bind:nodes bind:edges />
  <Sidebar />
</SvelteFlowProvider>

Sidebar.svelte


<script>
  import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte'
 
  // This hook will only work if the component it's used in
  // is a child of <SvelteFlowProvider />
  const nodes = useNodes()
</script>
 
<aside>
  {#each nodes.current as node (node.id)}
    <div key={node.id}>
      Node {node.id} -
        x: {node.position.x.toFixed(2)},
        y: {node.position.y.toFixed(2)}
    </div>
  {/each}
</aside>

The state provided by <SvelteFlowProvider /> is first initialized with default values. Only after the <SvelteFlow /> component initializes, will the state be replaced with correct values. However, you can expect this to happen before the first render.

Notes

If you’re using a router and want your flow’s state to persist across routes, it’s vital that you place the <SvelteFlowProvider /> component outside of your router.
If you have multiple flows on the same page you will need to use a separate <SvelteFlowProvider />.