Skip to main content

Viewport

Methods

get(...)

() => Promise<Rect>
🔒 Requires scope: boards:read or boards:write

Fetches the dimensions of the current viewport and its position, relative to the center of board with x: 0 and y: 0.

The viewport x and y coordinates define the horizontal and vertical position of the top-left corner of the viewport, relative to the center point of the board with x: 0 and y: 0.
Values are in dp.

The method takes no arguments.

Example:

// Get the current viewport.
const viewport = await miro.board.viewport.get();

// Print coordinates and dimensions of the current viewport.
console.log(viewport);
// {
//   x: -29570.817261000782,
//   y: -18247.315051361205,
//   width: 64157.213365973126,
//   height: 32763.49326537
// }

set(...)

(options: { animationDurationInMs?: number; padding?: Offset; viewport: Rect }) => Promise<Rect>
🔒 Requires scope: boards:read or boards:write

Updates the dimensions of the viewport and its position, relative to the center of board with x: 0 and y: 0.

There can be a discrepancy between the input that you pass to viewport.set(), and the corresponding output.
The output depends on specific factors such as the actual screen size, any vertical or horizontal navigation bars, and so on.

viewport

The method takes viewport as a required argument:

PropertyTypeDescription
xNumberHorizontal position of the top-left corner of the viewport, relative to the center point of the board, in dp.
yNumberVertical position of the top-left corner of the viewport, relative to the center point of the board, in dp.
widthNumberWidth of the viewport, in dp.
heightNumberHeight of the viewport, in dp.

The method takes padding and animationDurationInMs as optional arguments.

padding

padding is an object with the following optional properties:

PropertyTypeDescription
topNumberPadding area above the target viewport, in dp.
Default: 0 (no padding)
bottomNumberPadding area below the target viewport, in dp.
Default: 0 (no padding)
rightNumberPadding area right of the target viewport, in dp.
Default: 0 (no padding)
leftNumberPadding area left of the target viewport, in dp.
Default: 0 (no padding)

animationDurationInMs

animationDurationInMs defines the duration in milliseconds of a zoom animation effect that plays when setting the viewport.
Default: 0 (no animation)

Example:

const myViewport = await miro.board.viewport.set({
  viewport: {
    x: 200, // top-left corner of the viewport, relative to the center of the board
    y: 100, // top-left corner of the viewport, relative to the center of the board
    width: 1280,
    height: 720,
  },
  padding: {
    top: 100,
    left: 200,
    bottom: 50,
    right: 20,
  },
  animationDurationInMs: 1000,
});

console.log(myViewport); // => {x: 224.2903225806451, y: 119.00000000000003, width: 1328.5806451612902, height: 718.7872340425532}

zoomTo(...)

(items: OneOrMany<BoardItem>) => Promise<void>
🔒 Requires scope: boards:read or boards:write

Zooms to one or more items on the board.
If you zoom to items that are scattered across the board, the method can zoom out to include in the viewport all the items that you pass as arguments.
If you don't pass any items as arguments, the method throws an error.

Example:

// Create three sticky notes
const first = await miro.board.createStickyNote({
  content: 'first',
  x: 400,
  y: 400,
});

const second = await miro.board.createStickyNote({
  content: 'second',
  x: -400,
  y: -400,
});

const third = await miro.board.createStickyNote({
  content: 'third',
});

// Zoom to a sticky note on the board
await miro.board.viewport.zoomTo(first);

// Or: zoom to multiple sticky notes on the board
await miro.board.viewport.zoomTo([second, third]);

// Or: zoom to all sticky notes on the board
const stickyNotes = await miro.board.get({
  type: 'sticky_note',
});

await miro.board.viewport.zoomTo(stickyNotes);

getZoom(...)

() => Promise<number>
🔒 Requires scope: boards:read or boards:write

Returns the current zoom level on the board.
The method takes no arguments.

Example:

// Get the current zoom level.
const zoomLevel = await miro.board.viewport.getZoom();

// Print the current zoom level.
console.log(zoomLevel);

setZoom(...)

(zoomLevel: number) => Promise<void>
🔒 Requires scope: boards:read or boards:write

Updates the zoom level on the board.

The method takes zoomLevel as a required argument.
The zoomLevel accepts a value between 0.01 (1% zoom on the board UI) and 4 (400% zoom on the board UI).

Example:

// Set the zoom level to 400%.
await miro.board.viewport.setZoom(4);
// The board will be zoomed at 400%.

All properties

PropertyType
get(...) 
() => Promise<Rect>
getZoom(...) 
() => Promise<number>
set(...) 
(options: { animationDurationInMs?: number; padding?: Offset; viewport: Rect }) => Promise<Rect>
setZoom(...) 
(zoomLevel: number) => Promise<void>
zoomTo(...) 
(items: OneOrMany<BoardItem>) => Promise<void>