<SvelteFlowProvider />

<SvelteFlowProvider />

Source on GitHub (opens in a new tab)

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.

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


  • 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 />.