💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
Viewport

Viewport

Source on GitHub (opens in a new tab)

Internally, React 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

#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!