StickyNote
StickyNote.StickyNote
Sticky note
Represents a sticky note on a board.
Useful to take quick notes while brainstorming, to drive design thinking sessions, to visualize content structure and information architecture hierarchies.
When creating or updating a sticky note item, you can define its dimensions in the following way:
- Set or update only
width
.
Default width:shape: 'square'
:199
dpshape: 'rectangle'
:350
dp
- Set or update only
height
.
Default height with eithershape: 'square'
, orshape: 'rectangle'
:228
dp (it includes the sticky note shadow)
Based on the specified value, the sticky note is scaled accordingly to keep its aspect ratio.
Example:
const stickyNote = await miro.board.createStickyNote({
content: '<p>This is a sticky note. It looks just like the actual paper one.</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'
});
// Output the created item to the developer console
console.log(stickyNote);
Sticky note item:
Figure 1. Sticky note item.
Table of contents
Properties
- type
- width
- height
- shape
- content
- style
- tagIds
- id
- origin
- parentId
- createdAt
- createdBy
- modifiedAt
- modifiedBy
- x
- y
Methods
Properties
type
• Readonly
type: "sticky_note"
Defines the type of item.
Item type is useful to retrieve specific items from a board.
For example, you can fetch all card and shape items from the board, and then carry out an action on them.
Example:
// Get all items from the board
const items = await miro.board.get();
// Count all card and shape items on the board
let cards = 0;
let shapes = 0;
items.forEach((items) => {
switch (items.type) {
case 'card':
cards++;
case 'shape':
shapes++;
}
});
// Output to the console the total amount of card and shape items
console.log('The current board has ${cards} cards and ${shapes} shapes.');
Overrides
width
• width: number
Width of the item in dp.
See also:
height
• height: number
Height of the item in dp.
See also:
shape
• shape: StickyNoteShape
= 'square'
Defines the shape of the sticky note item.
Possible values:
square
: the sticky note item is square (sticky note shadow excluded).rectangle
: the sticky note item is rectangular.
Default: square
- Default width:
shape: 'square'
:199
dpshape: 'rectangle'
:350
dp
- Default height with either
square
, orrectangle
:228
dp (it includes the sticky note shadow)
content
• content: string
= ''
The text that you want to display on the sticky note.
The text must be shorter than 6000 characters.
content
supports plain text, and the following HTML tags:
<p>
<a>
<br>
Unsupported HTML tags are automatically stripped.
style
• style: Object
The style
object groups properties that define the layout, the look and feel of specific elements of an item, when it's displayed on the board.
For example: background color, font family, font type, horizontal and vertical alignment of the text, text color, and so on.
The Miro Web SDK doesn't support all standard style, yet. Additional styles will be included in future releases.
style
data structure:
style: {
fillColor: 'light_yellow', // Default value: light yellow
textAlign: 'center', // Default alignment: center
textAlignVertical: 'middle', // Default alignment: middle
},
A literal value that assigns a color to the background of the sticky note.
Possible values:
gray
light_yellow
yellow
orange
light_green
green
dark_green
cyan
light_pink
pink
violet
red
light_blue
blue
dark_blue
black
Default: light_yellow
Sets the horizontal alignment of any text in the content
property of the sticky note item.
Possible values:
left
: the text is aligned with the left margin of the text area.center
: the text is at an equal distance from the left and right margins of the text area.right
: the text is aligned with the right margin of the text area.
Default: center
Sets the vertical alignment of any text in the content
property of the sticky note item.
Possible values:
top
: the text is aligned with the top margin of the text area.middle
: the text is at an equal distance from the top and bottom margins of the text area.bottom
: the text is aligned with the bottom margin of the text area.
Default: middle
Type declaration
Name | Type |
---|---|
fillColor | StickyNoteColor | "gray" | "light_yellow" | "yellow" | "orange" | "light_green" | "green" | "dark_green" | "cyan" | "light_pink" | "pink" | "violet" | "red" | "light_blue" | "blue" | "dark_blue" | "black" |
textAlign | TextAlign |
textAlignVertical | TextAlignVertical |
tagIds
• tagIds: never
[] = []
An array of tag IDs.
Each ID corresponds to a board tag attached to a card or a sticky note.
To add a tag to a card or a sticky note:
- Add the tag ID to the
tagIds
array. - Call
sync
on the item to update it on the board (see example below).
To remove a tag from a card or a sticky note:
- Remove the tag ID from the
tagIds
array. - Call
sync
on the item to update it on the board (see example below).
When you remove a tag from an item, the tag still exists on the board.
To retrieve all cards or sticky notes with one or more specific tags:
- Specify the item type to retrieve: either
card
, orsticky_note
. - Specify one or more tags as filtering criteria.
Add and remove tags to and from a sticky note
Example (tag):
// Create a tag
const todo = await miro.board.createTag({
title: 'todo',
color: 'yellow',
});
// Create another tag
const urgent = await miro.board.createTag({
title: 'urgent',
color: 'magenta',
});
// Create a sticky note and attach the tags to it
const stickyNote = await miro.board.createStickyNote({
content: 'sticky note with tags: "todo", "urgent"',
tagIds: [todo.id, urgent.id],
});
// Call 'sync' to make the attached tags visible on the sticky note on the board
await stickyNote.sync();
console.log(stickyNote.tagIds); // => ['3074457345627244742', '307445734562724503']
// Remove option 1: remove tags from the array
stickyNote.tagIds = [todo.id];
// Remove option 2: remove tags by filtering them out of the array
stickyNote.tagIds = stickyNote.tagIds.filter((id) => id !== todo.id);
// Call 'sync' to update the sticky note after removing the tags
await stickyNote.sync();
console.log(stickyNote.tagIds); // => []
// Delete the tags from the board.
// Bulk operations aren't supported at the moment:
// remove the tags one at a time
await miro.board.remove(todo);
await miro.board.remove(urgent);
await miro.board.get({
tags: ['todo', 'urgent'],
}); // => []
id
• Readonly
id: string
origin
• origin: "center"
origin
marks:
- The positioning reference point of a board item.
This is the point used to calculate thex
andy
coordinates of an item when it's positioned on the board, or when it's a child inside a parent item. - The rotation pivot point of a board item that supports rotation.
origin
accepts only one value: center
.
Any other value throws an error.
parentId
• Readonly
parentId: null
| string
If an item is a child of another item, the child's parentId
returns the unique identifier of the corresponding parent item.
If an item has no parent, its parentId
is null
.
You can use the value to retrieve a tree structure when items are nested inside containers.
For example, sticky notes inside frames.
createdAt
• Readonly
createdAt: string
Timestamp
Date and time when the item was created.
Format: UTC, ISO 8601.
Includes a trailing Z offset.
Example: 2021-05-18T07:59:01Z
createdBy
• Readonly
createdBy: string
Miro users are automatically assigned a unique ID.
createdBy
contains the ID of the user who created the item.
Example: 3658432978520043388
modifiedAt
• Readonly
modifiedAt: string
Timestamp
Date and time when the item was last modified.
Format: UTC, ISO 8601.
Includes a trailing Z offset.
Example: 2021-05-18T07:59:01Z
modifiedBy
• Readonly
modifiedBy: string
Miro users are automatically assigned a unique ID.
modifiedBy
contains the ID of the user who applied the most recent edit to the item.
Example: 3658432978520043388
x
• x: number
The x-axis coordinate of an item is the horizontal distance in dp of the center point of the item from the center point of the board.
The center point of the board has x: 0
and y: 0
coordinates.
Default: 0
See also:
y
• y: number
The y-axis coordinate of an item is the vertical distance in dp of the center point of the item from the center point of the board.
The center point of the board has x: 0
and y: 0
coordinates.
Default: 0
See also:
Methods
sync
▸ sync(): Promise
<void
>
sync
propagates to the board any changes to item and tag properties.
After updating the properties of an item or a tag, sync it with the board to:
- Propagate to the board the changes applied to the item or to the tag.
- Make the changes visible on the board.
All board items and tags require sync
to make any changes to their properties visible on the board.
For more information and examples, see Update and sync item properties.
Returns
Promise
<void
>
Updated 6 days ago