Card

Card

Cards hold information in a structured way. They help organize tasks and todo-items within an initiative or a project.
You can give cards a title and a description, assign them to users, set due dates, and group them by labeling them with tags.

Cards are useful to:

Monitor workload and task progress.
Manage projects using a Miro board.
Sync board data with a third-party project management tool.

You can nest cards inside parent items such as a User Story Mapping (USM) or a Kanban item: these parent items help structure, organize, and plan user tasks and product releases with a Scrum or a Kanban methodology.

When creating or updating a card item, you can define its dimensions in the following way:

width can be set on creation, and on update to resize the card.
Default width: 320 dp
height is read-only. It's calculated automatically, based on the values assigned to the card properties.
Default height: 94 dp

Example:

const card = await miro.board.createCard({
  title: 'This is an easy task',
  description: 'Paint wall. Watch paint dry.',
  dueDate: '2025-08-18',
  assignee: {
    userId: '3074457356556531234',
  },
  style: {
    cardTheme: '#2d9bf0', // Default color: light blue
  },
  x: 0, // Default value: horizontal center of the board
  y: 0, // Default value: vertical center of the board
  width: 320,
  rotation: 0.0,
});

// Output the created item to the developer console
console.log(card);

Card item, compact view:

Compact view of a card. You can view only basic information.
Figure 1. Compact view of a card. You can view only basic information.

Card item, detail view:

Detail view of a card. You can view and edit all the card fields.
Figure 2. Detail view of a card. You can view and edit all the card fields.

Properties

Methods

sync

Properties

type

• Readonly type: "card"

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

BaseItem.type

width

• width: number

Width of the item in dp.

See also:

Pixels and dimensions

height

• Readonly height: number

Height of the item in dp.

See also:

Pixels and dimensions

rotation

• rotation: number

Rotation angle of an item in degrees, relative to the board.
You can rotate items clockwise (right) and counterclockwise (left) by specifying positive and negative values, respectively.

The rotation property doesn't perform a rotation action on an item; it assigns the item a rotation angle.
Invoking the same rotation value multiple times on an item re-applies the same value; it doesn't result in multiple rotations of the item.

See also:

Item geometry

title

• title: string = ''

A short text header for the card.
The text must be shorter than 6000 characters.

title supports plain text, and the following HTML tags:


<a>

Unsupported HTML tags are automatically stripped.

description

• description: string = ''

A short text description to add context about the card.
The text must be shorter than 6000 characters.

description supports plain text, and the following HTML tags:


<a>





<ol>
<ul>
<li>

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: {
    cardTheme: '#2d9bf0', // Default value: '#2d9bf0' (light blue)
},

`cardTheme`

To set a custom color for the card border, assign cardTheme a valid hex value.

Default: #2d9bf0 (light blue)

Type declaration

Name	Type
`cardTheme?`	`string`

dueDate

• dueDate: undefined

Timestamp

The date when the task is due to be completed.

Format: YYYY-MM-DD

Example: 2021-09-30

assignee

• assignee: undefined

`userId`

assignee.userId identifies the user who is designated as the owner of the task described in the card.
Miro users are automatically assigned a unique ID.

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, or sticky_note.
Specify one or more tags as filtering criteria.

Add and remove tags to and from a card

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 card and attach the tags to it
const card = await miro.board.createCard({
  content: 'card with tags: "todo", "urgent"',
  tagIds: [todo.id, urgent.id],
});

// Call 'sync' to make the attached tags visible on the card on the board
await card.sync();

console.log(card.tagIds); // => ['3074457345627244742', '307445734562724503']

// Remove option 1: remove tags from the array
card.tagIds = [todo.id];

// Remove option 2: remove tags by filtering them out of the array
card.tagIds = card.tagIds.filter((id) => id !== todo.id);

// Call 'sync' to update the card after removing the tags
await card.sync();

console.log(card.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 the x and y 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>

Table of contents

Properties

Methods

Properties

type

Overrides

width

height

rotation

title

description

style

cardTheme

Type declaration

dueDate

assignee

userId

tagIds

id

origin

parentId

createdAt

createdBy

modifiedAt

modifiedBy

x

y

Methods

sync

Returns

`cardTheme`

`userId`