GuidesWeb SDK 2.0REST API 2.0Live EmbedSCIM APIChangelogRoadmapCommunity
Build your app

Update and sync item properties

Update an item's properties, and then sync the item to propagate the changes to the board.

Suggest Edits

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

Goal

Update the properties of a board item, and then run sync on the updated item, so that the changes become effective on the board.

Prerequisites

Before you begin, make sure that:

Sync after updating

You want to be able to change and update the properties of an existing board item.
In the Miro Web SDK, updating a board item is a 2-step process:

  1. Edit the values of the properties that you want to change.
  2. Use the sync method to propagate the changes to the board, and to make them visible on the board.

If you assign new values to an item property, and then don't run sync, the new values are stored locally; they aren't available on the board.
Every time you modify item properties, you need to run sync on the modified item, so that the changes are reflected on the board.

The following examples show how sync works.

Example: create, update, and sync a shape item

In this example, you:

  1. Create a shape item.
  2. Update the shape properties.
  3. sync the shape to propagate the changes to the board.

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: 0,
  y: 0,
  width: 280,
  height: 280,
});

The shape item is available on the board.

Update the shape properties

Assign new values to the shape properties to change text, shape, color, rotation, and position on the board.
In the developer console enter the following code, and then press Enter ↩:

shape.content = 'This is a cloud now.';
shape.shape = 'cloud';
shape.style.fillColor = '#13E3EB';
shape.rotation = 45;
shape.x = 3000;
shape.y = 4500;

The shape properties are updated locally.
In the developer console enter the following code, and then press Enter ↩:

console.log(shape);

The response returns the shape item with updated values for the changed properties.

{
  "type": "shape",
  "content": "This is a cloud now.",
  "shape": "cloud",
  "style": {
      "fillColor": "#13E3EB"
  },
  "x": 3000,
  "y": 4500,
  "width": 280,
  "height": 280,
  "id": "3458764514861530408",
  "createdAt": "2021-12-09T12:51:03.022Z",
  "createdBy": "3074457356556531234",
  "modifiedAt": "2021-12-09T12:51:03.022Z",
  "modifiedBy": "3074457356556531234",
  "rotation": 45
}

The updated values aren't propagated to the board, yet.
To verify it, zoom to the shape to view it:

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

sync the shape to update it on the board

To propagate the changes to the board, and to make them effective on the board, run sync.
In the developer console enter the following code, and then press Enter ↩:

await shape.sync();

The changes are propagated to the board, so that the shape is updated on the board, too.
To verify it, zoom to the shape to view it:

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

Example: create, update, and sync a frame item

In this example, you:

  1. Create a frame item.
  2. Add to the frame the previously created shape as a child item.
  3. Update the frame properties.
  4. sync the frame to propagate the changes to the board.
  5. remove the child item from the frame.
  6. Update the frame properties.
  7. sync the frame to propagate the changes to the board.

Create the frame and add the shape as a child item

In the developer console enter the following code, and then press Enter ↩:

// Create a frame
const frame = await miro.board.createFrame({
  title: 'This frame ratio is 16:9',
  x: 3000,
  y: 4500,
  width: 800,
  height: 450,
});

// Add the shape as a child item
await frame.add(shape);

// Update the frame properties
frame.title = 'This frame now has a child shape item';
frame.x = 4500;
frame.y = 6000;

// 'sync' the frame to update it on the board
await frame.sync();

// Zoom to the frame to view it on the board
await miro.board.viewport.zoomTo(frame);

// Output the updated frame to the developer console
console.log(frame);

The ID in the childrenIds array refers to the child shape: 

// Frame with child shape item 
{
  "type": "frame",
  "title": "This frame now has a child shape item",
  "childrenIds": [
    "3458764515082442768"
  ],
  "x": 4500,
  "y": 6000,
  "width": 800,
  "height": 450,
  "id": "3458764515082592959",
  "createdAt": "2021-12-13T14:03:21.323Z",
  "createdBy": "3074457356556531234",
  "modifiedAt": "2021-12-13T14:03:53.805Z",
  "modifiedBy": "3074457356556531234"
}

Remove the child shape and reposition the frame on the board

In the developer console enter the following code, and then press Enter ↩:

// Remove the child shape from the frame
await frame.remove(shape);

// Update the frame properties
frame.title = 'The shape is no longer a child item of the frame';
frame.x = 6000;
frame.y = 4000;

// 'sync' the frame to update it on the board
await frame.sync();

// Zoom to the frame to view it on the board
await miro.board.viewport.zoomTo(frame);

// Output the updated frame to the developer console
console.log(frame);

The frame has no children, and the childrenIds array is empty:

// The frame is moved to a new position, without the shape
{
    "type": "frame",
    "title": "The shape is no longer a child item of the frame",
    "childrenIds": [],
    "x": 6000,
    "y": 4000,
    "width": 800,
    "height": 450,
    "id": "3458764515082592959",
    "createdAt": "2021-12-13T14:03:21.323Z",
    "createdBy": "3074457356556531234",
    "modifiedAt": "2021-12-13T14:07:26.076Z",
    "modifiedBy": "3074457356556531234"
}

Example: create, update, and sync a tag

In this example, you:

  1. Create a tag.
  2. Create a card.
  3. Add the tag to the card.
  4. Update the tag properties.
  5. sync the tag to propagate the changes to the board.
  6. Remove the tag from the card, and update the card properties.
  7. sync the card to propagate the changes to the board.

In the developer console enter the following code, and then press Enter ↩:

// Create a tag
const todo = await miro.board.createTag({
  title: 'todo or not todo. not todo',
  color: 'magenta',
});

// Create a card and attach the tag to it
const card = await miro.board.createCard({
  title: 'This is an easy task',
  description: 'Paint wall. Watch paint dry.',
  dueDate: '2025-08-18',
  style: {
    cardTheme: '#2d9bf0',
  },
  tagIds: [todo.id], // To attach a tag to an item, add the tag ID to the array
  x: 6000, 
  y: 4000, 
  width: 280,
  rotation: 0.0,
});

// Update the tag title and color
todo.title = "nah, won't fix";
todo.color = 'dark_green';

// 'sync' the tag to update it on the board
await todo.sync();

// Update the card title and remove the tag from the card
card.title = "This task doesn't need fixing";
card.tagIds = []; // To remove a tag from an item, remove the tag ID from the array

// 'sync' the card to update it on the board
await card.sync();

See also

Updated 4 months ago

What's next

To discover and to get acquainted with more Web SDK features, check the other tutorials.