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

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

Viewport

Internally, Svelte Flow maintains a coordinate system that is independent of the rest of the page. The Viewport type tells you where in that system your flow is currently being display at and how zoomed in or out it is.

export type Viewport = {
  x: number;
  y: number;
  zoom: number;
};

Fields

NameType
#x
number
#y
number
#zoom
number

Notes

  • A Transform has the same properties as the viewport, but they represent different things. Make sure you don't get them muddled up or things will start to look weird!
SvelteFlowStoreXYPosition

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