viewport.Viewport

Table of contents

Methods

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:

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

NameType
optionsSetOptions

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

NameType
itemsItems

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

NameType
zoomLevelnumber

Returns

Promise<void>


What's next

Go to board.notifications to learn more about the methods to show informational and error notification messages on the board UI.