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

  • Notes
Question? Give us feedback → (opens in a new tab)Edit this pageWhat's new here?
Reference
Types
CoordinateExtent

CoordinateExtent

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.

export type CoordinateExtent = [[number, number], [number, number]];

Notes

  • Props (like nodeExtent or transtalteExtent) that expect a CoordinateExtent usually default to [[-∞, -∞], [+∞, +∞]] to represent an unbounded extent.
ConnectionLineTypeDefaultEdgeOptions

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