Viewport

Source on GitHub

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!