Quickstart

Developer tools in this how-to refer to Chrome DevTools.
Developer tools for other browsers work in a very similar way.

Goal

Create a board item with the Miro Web SDK in the developer console in 1 minute or less.

Prerequisites

Before you begin, make sure that:

You have a Miro account.

Open a Miro board

After signing in to your Miro account:

Go to your board overview.
Open an existing board, or create a new one.

Open the developer tools

On the browser tab with the open Miro board:

Open the developer tools.
Go to the developer console.

Create a board item

Using the Miro Web SDK and the developer console, let's create a shape item.
In the developer console enter the following code, and then press ↵ Enter:

const shape = await miro.board.createShape({
  content: "<p>This is a very yellow star shape.</p>",
  shape: "star",
  style: {
    fillColor: "#FEFF45",
  },
  x: 3000,
  y: 4500,
  width: 280,
  height: 280,
});

Now, check what you just created by logging it to the console.
In the developer console enter the following code, and then press ↵ Enter:

console.log(shape);

The response returns the created shape item.
This is also a practical way to inspect a board item's data structure on the fly.

Where is the star?
It may have been created outside the current viewport.
To view it on the board, let's zoom to it:

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

You just:

Created a board item.
Printed it to the console to view its data structure.
Zoomed to it to find it, and to view it on the board.

Goal

Prerequisites

Open a Miro board

Open the developer tools

Create a board item

See also