The viewpoint

The React Flow viewport controls how users navigate and interact with a node-based canvas. It manages canvas positioning, zoom levels, and panning, making it easier to explore large workflow diagrams, flowcharts, and visual applications.

1. What Is the React Flow Viewport?

The viewport represents the visible area of a React Flow canvas. It uses three properties: x, y, and zoom to control the canvas position and magnification.

import { ReactFlow } from '@xyflow/react';

const defaultViewport = {
  x: 0,
  y: 0,
  zoom: 1,
};

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        defaultViewport={defaultViewport}
      />
    </div>
  );
}

x: Horizontal viewport position.

y: Vertical viewport position.

Zoom: Canvas magnification level.

2. Panning and Zooming

React Flow supports smooth canvas navigation through panning and zooming. Users can drag the canvas to move around and scroll or pinch to change the zoom level.

<ReactFlow
  nodes={nodes}
  edges={edges}
  panOnDrag={true}
  zoomOnScroll={true}
  zoomOnPinch={true}
  zoomOnDoubleClick={true}
/>

These options provide flexible navigation for interactive diagrams and large workflow editors.

3. Setting the Initial Viewport

Use the defaultViewport property to define the initial canvas position and zoom level when your React Flow application loads.

<ReactFlow
  nodes={nodes}
  edges={edges}
  defaultViewport={{
    x: 100,
    y: 50,
    zoom: 1.2,
  }}
/>

This helps position important workflow elements within the visible canvas when users open your application.

4. Automatically Fit Nodes into the Viewport

The fitView property automatically adjusts the canvas position and zoom level to display all nodes within the viewport.

<ReactFlow
  nodes={nodes}
  edges={edges}
  fitView
  fitViewOptions={{
    padding: 0.2,
    minZoom: 0.5,
    maxZoom: 1.5,
  }}
/>

This is particularly useful for workflow editors containing multiple nodes or dynamically generated diagrams.

5. Adding Viewport Controls

React Flow provides a built-in component with buttons for zooming in, zooming out, fitting the view, and toggling interaction.

import { ReactFlow, Controls } from '@xyflow/react';

export default function App() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        fitView
      >
        <Controls />
      </ReactFlow>
    </div>
  );
}

These controls improve canvas navigation and provide users with an easy way to manage their workflow view.

6. Customizing Viewport Navigation

React Flow allows developers to customize canvas navigation to match different application experiences. For example, you can enable scroll-based panning and use drag selection to create a design-tool-like interface.

<ReactFlow
  nodes={nodes}
  edges={edges}
  panOnScroll={true}
  panOnDrag={false}
  selectionOnDrag={true}
  selectionMode="partial"
/>

This configuration is useful for applications inspired by visual design tools, whiteboards, and diagram editors.

7. Controlling Viewport Programmatically

Use the useReactFlow() hook to control viewport movement and zoom through JavaScript. It provides methods such as zoomIn(), zoomOut(), zoomTo(), and setViewport().

import { useReactFlow } from '@xyflow/react';

function CustomViewportControls() {
  const { zoomIn, zoomOut, fitView } = useReactFlow();

  return (
    <div>
      <button onClick={() => zoomIn()}>
        Zoom In
      </button>

      <button onClick={() => zoomOut()}>
        Zoom Out
      </button>

      <button onClick={() => fitView()}>
        Fit View
      </button>
    </div>
  );
}

Use this approach to create custom toolbar buttons and application-specific canvas navigation features.

8. Reading the Current Viewport Position

The useViewport() hook allows you to access the current viewport coordinates and zoom level. It is useful for displaying live canvas information or building custom navigation interfaces.

import { useViewport } from '@xyflow/react';

function ViewportInfo() { const { x, y, zoom } = useViewport();

return (

This component updates automatically whenever the viewport changes.