1: create your first board item with the Web SDK

Time to complete

~5 minutes

Learning objective

After completing this onboarding task, you’ll be able to:

• Create a sticky note on a Miro board.

Using the Web SDK, you can easily create, read, update, and delete different board items.
Make your first request by preparing a board, and then creating a sticky note.

Action 1: prepare a board

1. Sign in to your Miro account.
2. Go to your board overview.
3. Open an existing board or create a new board.

Action 2: create a sticky note

1. With a board open, open the developer tools, and then go to the developer console.
2. Copy and paste the createStickyNote snippet below into the developer console:

   const stickyNote = await miro.board.createStickyNote({
     content: '<p>This is a sticky note</p>',
     style: {
       fillColor: 'light_yellow', // Default value: light yellow
       textAlign: 'center', // Default alignment: center
       textAlignVertical: 'middle', // Default alignment: middle
     },
     x: 0, // Default value: horizontal center of the board
     y: 0, // Default value: vertical center of the board
     shape: 'square',
     width: 200, // Set either 'width', or 'height'
   });

   await miro.board.viewport.zoomTo(stickyNote); // Note: this command is optional, to take you to the item on the board.

Let's wrap up

In this task, you:

• Prepared a board, and
• Created a sticky note using the developer console in your browser.

Now that you’ve completed task 1, let's go ahead and update the sticky note's properties in your next task.

See also

• Web SDK quickstart
• Web SDK reference