Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
Reference<SvelteFlowProvider />

<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 />.
Last updated on