Viewport

viewport.Viewport

Table of contents

Methods

• get
• set
• zoomTo
• getZoom
• setZoom

Methods

get

▸ get(): Promise<Rect>

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
// }

Returns

Promise<Rect>

set

▸ set(options): Promise<Rect>

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.

The method takes viewport as a required argument:

The method takes padding and animationDurationInMs as optional arguments.

padding is an object with the following optional properties:

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}

Parameters

Returns

Promise<Rect>

zoomTo

▸ zoomTo(items): Promise<void>

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);

Parameters

Returns

Promise<void>

getZoom

▸ getZoom(): Promise<number>

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);

Returns

Promise<number>

setZoom

▸ setZoom(zoomLevel): Promise<void>

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%.

Parameters

Returns

Promise<void>