Svelte Flow is still alpha! Check out the latest changes here.

Svelte Flow

LearnLearnReferenceReferenceExamplesExamples
GitHub (opens in a new tab)Support Us
  • API Reference
  • <SvelteFlow />
  • <SvelteFlowProvider />
  • Components
    • <Background />
    • <BaseEdge />
    • <ControlButton />
    • <Controls />
    • <EdgeLabelRenderer />
    • <Handle />
    • <MiniMap />
    • <NodeResizer />
    • <NodeResizeControl />
    • <NodeToolbar />
    • <Panel />
  • Hooks
    • useConnection()
    • useEdges()
    • useHandleConnections()
    • useNodes()
    • useNodesData()
    • useSvelteFlow()
    • useStore()
    • useUpdateNodeInternals()
  • Types
    • BackgroundVariant
    • ColorMode
    • Connection
    • ConnectionLineType
    • CoordinateExtent
    • DefaultEdgeOptions
    • Edge
    • EdgeMarker
    • EdgeProps
    • FitViewOptions
    • KeyDefinition
    • MarkerType
    • Node
    • NodeProps
    • NodeOrigin
    • PanelPosition
    • Position
    • SvelteFlowStore
    • Viewport
    • XYPosition
    • addEdge()
    • getBezierPath()
    • getConnectedEdges()
    • getIncomers()
    • getNodesBounds()
    • getOutgoers()
    • getSimpleBezierPath()
    • getSmoothStepPath()
    • getStraightPath()
    • getViewportForBounds()
    • isEdge()
    • isNode()
    • updateEdge()

On This Page

  • Signature
Question? Give us feedback → (opens in a new tab)Edit this pageWhat's new here?
Reference
Hooks
useNodes()

useNodes

Source on GitHub (opens in a new tab)

This hook returns a store of the current nodes array. When you subscribe to this store, it will trigger whenever the nodes array changes. This happens when nodes are added, removed, or updated (dragged for example).

<script lang="ts">
  import { useNodes } from '@xyflow/svelte';
 
  const nodes = useNodes();
</script>

Signature

NameType
#Returns
#
Writable<Node[]>
The current nodes store.
useHandleConnections()useNodesData()

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Svelte Flow

Quickstart GuideAPI ReferenceExamplesShowcaseSupport Us

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of Conduct

info@xyflow.com — Copyright © 2024 webkid GmbH. All rights reserved — website design by Facu Montanaro