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

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!