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.
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
- Sign in to your Miro account.
- Go to your board overview.
- Open an existing board or create a new board.
Action 2: create a sticky note
- With a board open, open the developer tools, and then go to the developer console.
- 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
Updated 3 days ago
In the second task of the guided onboarding, you modify and then update board items with the sync()
method.