1: create your first board item with the Web SDK

In the first task of the guided onboarding, you use the Miro Web SDK to create a board.


10%

Time to complete

Time to complete ~5 minutes

Learning objective

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

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


What's next

In the second task of the guided onboarding, you modify and then update board items with the sync() method.