DocumentationResourcesMarketplaceCommunity
Documentation
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.

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 and store it in shape variable const shape = await miro.board.createShape({ content: 'This is a very yellow star shape.', shape: 'star', style: { fillColor: '#FEFF45', }, x: 0, y: 0, width: 280, height: 280, }); // Assign new values to the shape properties to change // text, shape, color, rotation, and position on the board. 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 now updated in memory // and not yet visible on the board console.log(shape); // To propagate the changes to other users // and make them visible on the board use the sync method await shape.sync(); // Zoom to the new shape position 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. removethe 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

// Get previously created shape item const [shapeItem] = await miro.board.get({type: 'shape'}) // 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(shapeItem); // 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 // The ID in the `childrenIds` array refers to the child shape. console.log(frame);

Remove the child shape and reposition the frame on the board

const [shapeToRemove] = await miro.board.get({type: 'shape'}) const [frameItem] = await miro.board.get({type: 'frame'}) // Remove the child shape from the frame await frameItem.remove(shapeToRemove); // Update the frame properties frameItem.title = 'The shape is no longer a child item of the frame'; frameItem.x = 6000; frameItem.y = 4000; // 'sync' the frame to update it on the board await frameItem.sync(); // Zoom to the frame to view it on the board await miro.board.viewport.zoomTo(frameItem); // Output the updated frame to the developer console console.log(frameItem);

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.
// 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 about 1 year ago

What's next

Add an app icon to your app so that board users can discover your app on the app toolbar.