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

Module: sdk-types/dist

Suggest Edits

Table of contents

Interfaces

Type aliases

Enumerations

Type aliases

Json

Ƭ Json: string | number | boolean | null | Json[] | { [key: string]: Json; }

FontFamily

Ƭ FontFamily: "arial" | "cursive" | "abril_fatface" | "bangers" | "eb_garamond" | "georgia" | "graduate" | "gravitas_one" | "fredoka_one" | "nixie_one" | "open_sans" | "permanent_marker" | "pt_sans" | "pt_sans_narrow" | "pt_serif" | "rammetto_one" | "roboto" | "roboto_condensed" | "roboto_slab" | "caveat" | "times_new_roman" | "titan_one" | "lemon_tuesday" | "roboto_mono" | "noto_sans" | "plex_sans" | "plex_serif" | "plex_mono" | "spoof" | "tiempos_text" | "noto_serif" | "noto_serif_jp" | "noto_sans_jp" | "noto_sans_hebrew" | "noto_serif_sc" | "noto_serif_kr" | "noto_sans_sc" | "noto_sans_kr" | "serif" | "sans_serif" | "monospace"

IconShape

Ƭ IconShape: "round" | "square"

StickyNoteShape

Ƭ StickyNoteShape: "square" | "rectangle"

TextAlign

Ƭ TextAlign: "left" | "center" | "right"

TextAlignVertical

Ƭ TextAlignVertical: "top" | "middle" | "bottom"

TextOrientation

Ƭ TextOrientation: "horizontal" | "aligned"

Origin

Ƭ Origin: "center"

AppCardStatus

Ƭ AppCardStatus: "disabled" | "disconnected" | "connected"

CardTaskStatus

Ƭ CardTaskStatus: "to-do" | "in-progress" | "done" | "none"

ConnectorShape

Ƭ ConnectorShape: "straight" | "elbowed" | "curved"

StrokeCapShape

Ƭ StrokeCapShape: "none" | "stealth" | "arrow" | "filled_triangle" | "triangle" | "filled_diamond" | "diamond" | "filled_oval" | "oval" | "erd_one" | "erd_many" | "erd_one_or_many" | "erd_only_one" | "erd_zero_or_many" | "erd_zero_or_one"

StrokeStyle

Ƭ StrokeStyle: "normal" | "dotted" | "dashed"

ItemType

Ƭ ItemType: "text" | "sticky_note" | "shape" | "image" | "frame" | "preview" | "card" | "app_card" | "connector" | "usm" | "mindmap" | "kanban" | "pipmatrix" | "document" | "mockup" | "curve" | "webscreen" | "table" | "svg" | "emoji" | "embed" | "unsupported" | "table_text" | "rallycard" | "stencil" | "code" | "red" | "stamp"

WidgetPropsOnly

Ƭ WidgetPropsOnly<T>: Omit<T, "sync" | "add" | "remove" | "getChildren" | "getMetadata" | "setMetadata">

Type parameters

Name
T

CardProps

Ƭ CardProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"card"-
title?stringA short text header for the card. \ The text must be shorter than 6000 characters. title supports plain text, and the following HTML tags: - <p> - <a> - <br> Unsupported HTML tags are automatically stripped.
description?stringA 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: - <p> - <a> - <strong> - <b> - <em> - <i> - <u> - <ol> - <ul> - <li> - <br> Unsupported HTML tags are automatically stripped.
dueDate?stringTimestamp The date when the task is due to be completed. Format: YYYY-MM-DD Example: 2021-09-30
assignee?Object#### 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.
assignee.userId?string-
taskStatus?CardTaskStatustaskStatus assigns a status to the card. \ The status indicates the progress of the task described in the card. Possible values: - to-do: the task hasn't been picked up; work hasn't begun. - in-progress: the task has been picked up; work has begun, but it's not completed. - done: the work related to the task has been completed. - none: the task has no progress status. \ The status isn't displayed on the card on the board UI. Default: none to-do, in-progress, done, and none statuses as rendered on the UI
Video 1. to-do, in-progress, done, and none statuses as rendered on the UI.
style?ObjectThe 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: typescript style: { cardTheme: '#2d9bf0', // Default value: '#2d9bf0' (light blue) }, #### cardTheme Hex value representing the color of the border of the card. Default: #2d9bf0 (light blue)
style.cardTheme?string-
tagIds?string[]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: 1. Add the tag ID to the tagIds array. 2. 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: 1. Remove the tag ID from the tagIds array. 2. 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: 1. Specify the item type to retrieve: either card, or sticky_note. 2. Specify one or more tags as filtering criteria. Add and remove tags to and from a card Example (tag): typescript doctest // 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'], }); // => []
fields?CardField[]An array of objects. \ Each object represents a custom preview field that you can define for the card. \ The preview fields are displayed on the bottom half of the card in the compact view. \ When rendered in the card on the board UI, the fields are automatically sorted, based on the content of the value property. The current sort order criteria are UI-based; they may change in the future: - Numeric, ascending. - Alphabetic, from A to Z. - Horizontal, from left to right. - Vertical, from top to bottom, if the card isn't wide enough to accommodate all preview fields on one row. For each preview field, you can define: - The data value of the custom field. - The color of the text. - A background color for the preview field. - An image for the icon. - The shape of the icon: either round, or square. - A short text for the tooltip that is displayed when clicking or hovering over the preview field. There's a limit to the number of custom fields that you can add: - Cards and app cards support up to 20 custom fields. - If you try to create a card or an app card with more than 20 custom fields, the operation fails silently, and the card or app card isn't created. Preview field data structure: ```typescript { value?: string fillColor?: string textColor?: string iconUrl?: string iconShape?: 'round''square' tooltip?: string } `` ####value The actual data value of the custom field; it's visible to board users. \ It can be any type of information that you want to convey. \ Thevaluecustom field property can contain hard-coded values, as well as dynamic ones that are mapped and retrieved from an external data source. ####fillColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) that fills the background area of the preview field displayed on the card. Default:transparent(no fill color) ####textColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) of the text string assigned to thevalue property. Default: [#1a1a1a](https://www.colorbook.io/hexcolors/view/1a1a1a) (black) #### iconUrl A valid URL pointing to an image available online: - The image must be publicly available. - The transport protocol must be HTTPS. Supported image file format: - PNG ####iconShape Defines the shape of the icon on the preview field. \ Possible values: -round-square ####tooltip` A short piece of text displayed in a tooltip. \ The tooltip is displayed when clicking or hovering over the preview field. \ The text must be shorter than 6000 characters.
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
rotation?numberRotation 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

AppCardProps

Ƭ AppCardProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"app_card"-
title?stringA short text header for the card. \ The text must be shorter than 6000 characters. title supports plain text, and the following HTML tags: - <p> - <a> - <br> Unsupported HTML tags are automatically stripped.
description?stringA 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: - <p> - <a> - <strong> - <b> - <em> - <i> - <u> - <ol> - <ul> - <li> - <br> Unsupported HTML tags are automatically stripped.
style?ObjectThe 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: typescript style: { cardTheme: '#2d9bf0', // Default value: '#2d9bf0' (light blue) }, #### cardTheme Hex value representing the color of the border of the card. Default: #2d9bf0 (light blue)
style.cardTheme?string-
tagIds?string[]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: 1. Add the tag ID to the tagIds array. 2. 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: 1. Remove the tag ID from the tagIds array. 2. 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: 1. Specify the item type to retrieve: either card, or sticky_note. 2. Specify one or more tags as filtering criteria. Add and remove tags to and from a card Example (tag): typescript doctest // 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'], }); // => []
fields?CardField[]An array of objects. \ Each object represents a custom preview field that you can define for the card. \ The preview fields are displayed on the bottom half of the card in the compact view. \ When rendered in the card on the board UI, the fields are automatically sorted, based on the content of the value property. The current sort order criteria are UI-based; they may change in the future: - Numeric, ascending. - Alphabetic, from A to Z. - Horizontal, from left to right. - Vertical, from top to bottom, if the card isn't wide enough to accommodate all preview fields on one row. For each preview field, you can define: - The data value of the custom field. - The color of the text. - A background color for the preview field. - An image for the icon. - The shape of the icon: either round, or square. - A short text for the tooltip that is displayed when clicking or hovering over the preview field. There's a limit to the number of custom fields that you can add: - Cards and app cards support up to 20 custom fields. - If you try to create a card or an app card with more than 20 custom fields, the operation fails silently, and the card or app card isn't created. Preview field data structure: ```typescript { value?: string fillColor?: string textColor?: string iconUrl?: string iconShape?: 'round''square' tooltip?: string } `` ####value The actual data value of the custom field; it's visible to board users. \ It can be any type of information that you want to convey. \ Thevaluecustom field property can contain hard-coded values, as well as dynamic ones that are mapped and retrieved from an external data source. ####fillColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) that fills the background area of the preview field displayed on the card. Default:transparent(no fill color) ####textColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) of the text string assigned to thevalue property. Default: [#1a1a1a](https://www.colorbook.io/hexcolors/view/1a1a1a) (black) #### iconUrl A valid URL pointing to an image available online: - The image must be publicly available. - The transport protocol must be HTTPS. Supported image file format: - PNG ####iconShape Defines the shape of the icon on the preview field. \ Possible values: -round-square ####tooltip` A short piece of text displayed in a tooltip. \ The tooltip is displayed when clicking or hovering over the preview field. \ The text must be shorter than 6000 characters.
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
rotation?numberRotation 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
owned?booleanA read-only Boolean value that controls read and write access to the app card. - owned: true: the app requesting access can read and write to the app card properties. - owned: false: the app requesting access can only read the app card properties. ℹ️ Note: - Only the app that creates the app card has read and write access to it. \ Other apps can only do the following: - Read the app card properties. - Read and update the app card x and y position on the board.
status?AppCardStatusApps can set the status property of an app card to notify users about the availability of the app card, and the actions that they can perform on it. \ Apps can set the following app card status values: - App card status: disconnected disconnected - App card status: disabled disabled - App card status: connected connected The Miro Web SDK can set the following app card status value: - App card status: disconnected disconnected Default: App card status: disconnected disconnected \ This is the default status of all newly created app cards, before they are mapped to a data source in the external application.
Figure 1. After installing and authorizing the app, it can update the status of its app cards as shown in the diagram. #### App card status: disconnected Status icon: App card status: disconnected \ The disconnected icon App card status: disconnected is clickable. By default, newly created app cards have a disconnected status, unless the app card constructor sets a different value. \ The app needs to include the logic to map the app card to a corresponding data source in the external application, and to maintain data syncing. If an app card is created without using the app, the app card status is set to disconnected. \ When an app card is disconnected, it's not mapped to a data source. The app card is out of sync, and its content isn't updated to reflect the external data source. \ This can occur when an app card: - Is created manually on the board UI by duplicating an existing app card. - Is created as a result of copying a board. - Is created as a result of restoring a board from board history. - Is restored from the board activity. - Is uploaded to the board from a backup copy. ##### Manual copy of app cards on the UI Users who haven't authorized the app can still manually duplicate app cards on the board UI. For example, by copying and pasting them. \ This action produces a new app card that differs from the original it was copied from only for the item id. The Web SDK detects the manually copied app card, and it sets the app card status to disconnected. \ Even if the current user has the app to create app cards, the copied app card is available in read-only mode. #### App card status:disabled Status icon: App card status: disabled \ The disabled icon App card status: disabled isn't clickable. An app can set an app card status to disabled when the corresponding data source is deleted in the external application. \ Since the data source is missing, the app card no longer receives updates. A disabled app card is available in read-only mode. #### App card status: connected Status icon: App card status: connected \ The connected icon App card status: connected is clickable. An app can set an app card status to connected. \ If the app listens to the app_card:connect event, the event handler can include the logic to map the app card to a data source in the external application so that the app card can sync with and receive updates from it. When users click the icon, the app_card:open event fires, and it opens a modal with the detail view of the app card. \ Typically, an app card detail view maps to the fields in the corresponding data source. ##### Connect an app card To connect a disconnected app card to an external data source, developers can include in the app card a unique reference to the corresponding data source. \ This source ID can be a ticket number, or a card ID. As a developer, you can store this reference in a number of ways. \ For example, you can include the source ID in: - The title of the app card, and parse it at a later time. \ Example: javascript doctest appCard.title: '[JIRA-1234] Pre-release checks' - A custom field of the app card. \ Example: javascript doctest appCard.fields.push({value: 'JIRA-1234'}); #### Missing app for the app card Missing app icon: The app for the app card is not installed \ The missing app icon The app for the app card is not installed is clickable. If the app that creates app cards isn't installed on the board for the current team or user, a clickable icon and a tooltip notify them. - If an app for the app card is available on the Miro Marketplace, the icon tooltip includes the name of the app so that users can look it up on the Marketplace and install it. - If no compatible app is available on the Miro Marketplace, the tooltip message notifies about it. \ In this case, the app card isn't accessible to the current user.

FrameProps

Ƭ FrameProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"frame"-
title?stringA short text header for the frame. \ The text must be shorter than 6000 characters. title supports only plain text.
style?ObjectThe 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: typescript style: { fillColor: 'transparent', // Default value: transparent (no fill color) }, #### fillColor Hex value representing the background color that fills the area of the frame. Default: transparent (no fill color)
style.fillColor?string-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
showContent?booleanExperimental feature Experimental showContent enables to programmatically hide or reveal the content inside a frame. \ The functionality works like the show frame and hide frame options available on the item context menu when the frame is selected on the board UI. showContent is a boolean property: - showContent: true: all the content inside the frame is visible. - showContent: false: all the content inside the frame is hidden. \ On the board UI, an overlay is displayed over the frame to visually notify board users that they cannot view the frame content. Default: true ℹ️ Note: - Hiding and revealing the content inside frames is only available to board owners and co-owners on Consultant and Enterprise plans. \ If your app attempts to toggle the visibility of content inside a frame with showContent for users who are on different subscription plans and who aren't board owners or co-owners, the operation throws an error.
Figure 1. showContent: true reveals the content inside the frame.
Figure 2. showContent: false hides the content inside the frame.
childrenIds?string[]An array of unique identifiers. \ The IDs represent child items inside the frame. \ They help retrieve child items inside a parent item.

ImageProps

Ƭ ImageProps: { height?: number ; width?: number ; type?: "image" ; title?: string ; parentId?: string | null ; origin?: Origin ; id?: string ; x?: number ; y?: number ; createdAt?: string ; createdBy?: string ; modifiedAt?: string ; modifiedBy?: string ; rotation?: number ; url?: string } & { url: string }

SnapToValues

Ƭ SnapToValues: "auto" | "top" | "left" | "bottom" | "right"

ConnectorProps

Ƭ ConnectorProps: Object

Type declaration

NameTypeDescription
type?"connector"-
style?Object#### startStrokeCap Sets the shape of the start/head of the connector. \ It accepts values from a list of supported shape types. Default: none (No shape for the start point of the connector.) #### endStrokeCap Sets the shape of the tail end of the connector. \ It accepts values from a list of supported shape types. Default: stealth (An arrow shape for the end point of the connector.) Available stroke cap values and their corresponding left and right shapes on the board:Stroke capLeftRight:--:-::-:---
  • none
  • stealth
  • arrow
  • filled_triangle
  • triangle
  • filled_diamond
  • diamond
  • filled_oval
  • oval
  • erd_one
  • erd_many
  • erd_one_or_many
  • erd_only_one
  • erd_zero_or_many
  • erd_zero_or_one

Figure 1. Visual representation of the supported connector stroke cap values with left and right orientation, respectively. #### strokeStyle Sets the type of line for the connector item. \ Possible values: - normal: the line is solid. - dashed: the line is represented by a series of short dashes. - dotted: the line is represented by a series of dots. Default: normal
Figure 1. Visual representation of normal, dashed, and dotted line types. #### strokeWidth Sets the thickness of the line for the connector item. \ It accepts an integer between 1 and 24 included. - Min. (thin): 1 - Max. (thick): 24 Default: 1 #### strokeColor Hex value representing the color of the connector item line. Default: #000000 (black) #### fontSize Defines the font size, in dp, for the caption of the connector. - Default font size: 14 #### color Hex value representing the color of the connector captions. Default: #1a1a1a (dark grey) #### textOrientation The orientation of the caption relative to the curvature of the connector. Possible values: - aligned: the caption is aligned with the curvature of the connector. - horizontal: the caption appears horizontally regardless of the curvature of the connector. Default: aligned
style.startStrokeCap?StrokeCapShape-
style.endStrokeCap?StrokeCapShape-
style.strokeStyle?StrokeStyle-
style.strokeWidth?number-
style.strokeColor?string-
style.fontSize?number-
style.color?string-
style.textOrientation?TextOrientation-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
shape?ConnectorShape#### shape Sets the shape of the line for the connector item. \ Possible values: - straight: the line is completely straight. - elbowed: the line isn't straight. It bends at 90 degree angles. - curved: the line isn't straight. It bends in smooth curves. Default: curved
Figure 1. Visual representation of straight, elbowed, and curved line shapes.
start?ObjectThe start object groups properties that define: - The board item that the start point of the connector attaches at. \ To define the start board item, you must specify the item ID. - Position of the start point that can be defined in one of the following ways: - snapTo values that are based on predefined positions (specifically center of a connected item's edge) - x and y coordinates for custom location on the connected shape ℹ️ Note: - The default value is undefined. \ However, you must specify a start and an end for the connector. - When creating connectors programmatically, either with the Web SDK or the REST API, it's not yet possible to create loose (both ends disconnected) or dangling (one end disconnected) connectors. start data structure with snapTo: typescript start: { // Define the start board item for the start point of the connector // by specifying the item ID. item: '3458764511234567896', snapTo: 'right' } start data structure with custom position: typescript start: { // Define the start board item for the start point of the connector // by specifying the item ID. item: '3458764511234567896', position: { // x: 0.0 = left; x: 0.5 = center; x: 1.0 = right x: 1.0, // y: 0.0 = top; y: 0.5 = center; y: 1.0 = bottom y: 0.0 } } #### item The start or end item that each connector point is attached to. \ To define start and end board items of a connector, you specify the ID of the corresponding items. Example: typescript item: '3458764511234567890'; #### position The position object is nested inside the start and end objects. \ It includes the x and y coordinates that mark the start and end points of the connector. ℹ️ Note: - You cannot specify both position coordinates and snapTo properties for the start and end points. For reference, these are the x and y coordinates that define top-left, center, and bottom-right positions to mark the start or end point of a connector: - x: 0.0, y: 0.0 = top-left corner of the border of the start or end shape. - x: 0.5, y: 0.5 = center of the start or end shape. - x: 1.0, y: 1.0 = bottom-right corner of the border of the start or end shape. position data structure: typescript position: { // x: 0.0 = left; x: 0.5 = center; x: 1.0 = right x: 1.0, // y: 0.0 = top; y: 0.5 = center; y: 1.0 = bottom y: 0.0 }
Figure 1. Visual representation of horizontal and vertical reference coordinates. #### x The x-axis coordinate of the start or end point of a connector. \ x accepts numerical values between 0.0 and 1.0 included. For reference, these are the x coordinates that define horizontal left, center, and right positions to mark the start or end point of a connector: - x: 0.0 = left - x: 0.5 = center - x: 1.0 = right #### y The y-axis coordinate of the start or end point of a connector. \ y accepts numerical values between 0.0 and 1.0 included. For reference, these are the y coordinates that define vertical top, middle, and bottom positions to mark the start or end point of a connector: - y: 0.0 = top - y: 0.5 = middle - y: 1.0 = bottom #### snapTo The snapTo property is nested inside the start and end objects. \ You can set the snapTo property as an alternative to position.x and position.y to set a connector terminal point to a specific, predefined position on the shape border. The snapTo property accepts the following values: - top: the terminal point is positioned at the top of the connected board item. \ It corresponds to the position coordinates x: 0.5, y: 0.0. - bottom: the terminal point is positioned at the bottom of the connected board item. \ It corresponds to the position coordinates x: 0.5, y: 1.0. - left: the terminal point is positioned on the left side of the connected board item. \ It corresponds to the position coordinates x: 0.0; y: 0.5. - right: the terminal point is positioned on the right side of the connected board item. \ It corresponds to the position coordinates x: 1.0; y: 0.5. - auto: the terminal point is positioned dynamically, and it updates automatically, based on the location on the board of the connected item. \ It corresponds to the position coordinates undefined. ℹ️ Note: - You cannot specify both position coordinates and snapTo properties for the start and end points. snapTo and position are always in sync, and they're mutually exclusive. \ The following table lists the snapTo property values, the position property values, and the description of the connector point position.		positionsnapToConnector point position---------x: 0.5; y: 0.0topTop of the connected item.x: 0.0; y: 0.5leftLeft of the connected item.x: 0.5; y: 1.0bottomBottom of the connected item.x: 1.0; y: 0.5rightRight of the connected item.undefinedautoDynamically updates the point position, based on the location on the board of the connected item.
Figure 1. Visual representation of the predefined snapTo positions.
start.item?string-
start.position?Object-
start.position.x?number-
start.position.y?number-
start.snapTo?SnapToValues-
end?ObjectThe end object groups properties that define: - The board item that the end point of the connector attaches at. \ To define the end board item, you must specify the item ID. - Position of the end point that can be defined in one of the following ways: - snapTo values that are based on predefined position (specifically center of a connected item's edge) - x and y coordinates for custom location on the connected shape ℹ️ Note: - The default value is undefined. \ However, you must specify a start and an end for the connector. - When creating connectors programmatically, either with the Web SDK or the REST API, it's not yet possible to create loose (both ends disconnected) or dangling (one end disconnected) connectors. end data structure with snapTo: typescript end: { // Define the end board item for the end point of the connector // by specifying the item ID. item: '3458764511234567896', snapTo: 'left' } end data structure with custom position: typescript end: { // Define the end board item for the end point of the connector // by specifying the item ID. item: '3458764511234567896', position: { // x: 0.0 = left; x: 0.5 = center; x: 1.0 = right x: 1.0, // y: 0.0 = top; y: 0.5 = center; y: 1.0 = bottom y: 0.0 } } #### item The start or end item that each connector point is attached to. \ To define start and end board items of a connector, you specify the ID of the corresponding items. Example: typescript item: '3458764511234567890'; #### position The position object is nested inside the start and end objects. \ It includes the x and y coordinates that mark the start and end points of the connector. ℹ️ Note: - You cannot specify both position coordinates and snapTo properties for the start and end points. For reference, these are the x and y coordinates that define top-left, center, and bottom-right positions to mark the start or end point of a connector: - x: 0.0, y: 0.0 = top-left corner of the border of the start or end shape. - x: 0.5, y: 0.5 = center of the start or end shape. - x: 1.0, y: 1.0 = bottom-right corner of the border of the start or end shape. position data structure: typescript position: { // x: 0.0 = left; x: 0.5 = center; x: 1.0 = right x: 1.0, // y: 0.0 = top; y: 0.5 = center; y: 1.0 = bottom y: 0.0 }
Figure 1. Visual representation of horizontal and vertical reference coordinates. #### x The x-axis coordinate of the start or end point of a connector. \ x accepts numerical values between 0.0 and 1.0 included. For reference, these are the x coordinates that define horizontal left, center, and right positions to mark the start or end point of a connector: - x: 0.0 = left - x: 0.5 = center - x: 1.0 = right #### y The y-axis coordinate of the start or end point of a connector. \ y accepts numerical values between 0.0 and 1.0 included. For reference, these are the y coordinates that define vertical top, middle, and bottom positions to mark the start or end point of a connector: - y: 0.0 = top - y: 0.5 = middle - y: 1.0 = bottom #### snapTo The snapTo property is nested inside the start and end objects. \ You can set the snapTo property as an alternative to position.x and position.y to set a connector terminal point to a specific, predefined position on the shape border. The snapTo property accepts the following values: - top: the terminal point is positioned at the top of the connected board item. \ It corresponds to the position coordinates x: 0.5, y: 0.0. - bottom: the terminal point is positioned at the bottom of the connected board item. \ It corresponds to the position coordinates x: 0.5, y: 1.0. - left: the terminal point is positioned on the left side of the connected board item. \ It corresponds to the position coordinates x: 0.0; y: 0.5. - right: the terminal point is positioned on the right side of the connected board item. \ It corresponds to the position coordinates x: 1.0; y: 0.5. - auto: the terminal point is positioned dynamically, and it updates automatically, based on the location on the board of the connected item. \ It corresponds to the position coordinates undefined. ℹ️ Note: - You cannot specify both position coordinates and snapTo properties for the start and end points. snapTo and position are always in sync, and they're mutually exclusive. \ The following table lists the snapTo property values, the position property values, and the description of the connector point position.		positionsnapToConnector point position---------x: 0.5; y: 0.0topTop of the connected item.x: 0.0; y: 0.5leftLeft of the connected item.x: 0.5; y: 1.0bottomBottom of the connected item.x: 1.0; y: 0.5rightRight of the connected item.undefinedautoDynamically updates the point position, based on the location on the board of the connected item.
Figure 1. Visual representation of the predefined snapTo positions.
end.item?string-
end.position?Object-
end.position.x?number-
end.position.y?number-
end.snapTo?SnapToValues-
captions?ConnectorCaption[]#### captions An array of objects. \ Each caption object groups properties that define: - The text that appears along the connector. - The position of the caption, relative to the connector. - The vertical alignment of the caption, relative to the connector. Caption data structure: ```typescript { content?: string position?: number textAlignVertical?: 'top''middle''bottom' } `` ####content(captions) The accompanying text displayed along the connector. \ For example, you add text tocontentto describe the relationship between the two items that the connector links. ####position(captions) The position of the caption, relative to the connector. \positionaccepts numerical values between0.0and1.0included. For example: -0.0: the caption is at the start of the connector. \ - 0.5: the caption is in the middle of the connector. \ - 1.0: the caption is at the end of the connector. \ Default: 0.5(middle) ####textAlignVertical(captions) The vertical alignment of the caption, relative to the connector. \ For example, settextAlignVerticaltobottomto display the caption under the connector. Possible values: -top: the caption is above the connector. - middle: the caption is in the middle, along the the connector. - bottom: the caption is under the connector. Default: middle`

UnsupportedType

Ƭ UnsupportedType: "curve" | "document" | "emoji" | "table" | "kanban" | "pipmatrix" | "mockup" | "svg" | "usm" | "mindmap" | "webscreen" | "stencil" | "code" | "unsupported"

UnsupportedProps

Ƭ UnsupportedProps: Object

Type declaration

NameTypeDescription
type?UnsupportedType-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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

PreviewProps

Ƭ PreviewProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"preview"-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
url?stringA valid URL pointing to a web page containing Open Graph metadata in the HTML <head></head> section. Possible transport protocols: - HTTP - HTTPS ℹ️ Note: - It's possible to initially set url, but at the moment it's not possible to update it.

ShapeProps

Ƭ ShapeProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"shape"-
style?ObjectThe 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: typescript style: { color: '#ff0000', // Default text color: '#1a1a1a' (black) fillColor: '#ffff00', // Default shape fill color: transparent (no fill) fontFamily: 'arial', // Default font type for the text fontSize: 14, // Default font size for the text, in dp textAlign: 'center', // Default horizontal alignment for the text textAlignVertical: 'middle', // Default vertical alignment for the text borderStyle: 'normal', // Default border line style borderOpacity: 1.0, // Default border color opacity: no opacity borderColor: '#ff7400', // Default border color: '#ffffff` (white) borderWidth: 2, // Default border width fillOpacity: 1.0, // Default fill color opacity: no opacity }, #### color Hex value representing the color of the text string assigned to the the content property of the board item. Default: #1a1a1a (black) #### fillColor Hex value representing the color that fills the area of the text item. Default: transparent (no fill color) #### fillOpacity fillOpacity works similarly to the opacity property in CSS. \ It sets the opacity level of the background fill color defined in the fillColor property of the board item. Allowed values: any number between 0.0 and 1.0 included. - If the value is 0.0, the background fill color is completely transparent or invisible. - If the value is 1.0, the background fill color is completely opaque or solid. Default: 1 (solid color, no opacity) #### fontFamily Sets the type of font for the text in the content property of the shape item. Possible font families: - arial - cursive - abril_fatface - bangers - eb_garamond - georgia - graduate - gravitas_one - fredoka_one - nixie_one - open_sans - permanent_marker - pt_sans - pt_sans_narrow - pt_serif - rammetto_one - roboto - roboto_condensed - roboto_slab - caveat - times_new_roman - titan_one - lemon_tuesday - roboto_mono - noto_sans - plex_sans - plex_serif - plex_mono - spoof - tiempos_text - noto_serif - noto_serif_jp - noto_sans_jp - noto_sans_hebrew - noto_serif_sc - noto_serif_kr - noto_sans_sc - noto_sans_kr - serif - sans_serif - monospace Default: arial #### fontSize Defines the font size, in dp, for the text in the content property of the shape item. Default: 14 #### textAlign Sets the horizontal alignment of any text in the content property of the shape 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 #### textAlignVertical Sets the vertical alignment of any text in the content property of the shape 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 #### borderStyle Sets the type of line that defines the boundaries of the shape item. \ Possible values: - normal: the line is solid. - dashed: the line is represented by a series of short dashes. - dotted: the line is represented by a series of dots. Default: normal
Figure 1. Visual representation of normal, dashed, and dotted line types. #### borderOpacity borderOpacity works similarly to the opacity property in CSS. \ It sets the opacity level of the color of the line that defines the boundaries of the board item, and that delineates its shape. \ The borderColor property defines the color of the line. Allowed values: any number between 0.0 and 1.0 included. - If the value is 0.0, the border line color is completely transparent or invisible. - If the value is 1.0, the border line color is completely opaque or solid. Default: 1 (solid color, no opacity) #### borderColor Hex value representing the color of the line that defines the boundaries of the board item. Default: #ffffff (white) #### borderWidth Sets the thickness of the line that defines the boundaries of the board item. \ It accepts an integer between 0 and 24 included. - Min.: 0 (no border line) - Max.: 24 (thick border line) Default: 2
style.color?string-
style.fillColor?string-
style.fillOpacity?number-
style.fontFamily?FontFamily-
style.fontSize?number-
style.textAlign?TextAlign-
style.textAlignVertical?TextAlignVertical-
style.borderStyle?StrokeStyle-
style.borderOpacity?number-
style.borderColor?string-
style.borderWidth?number-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
rotation?numberRotation 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
shape?ShapeType | `${ShapeType}`The geometric shape of the item displayed on a board. Possible values: - rectangle - round_rectangle - circle - triangle - rhombus - parallelogram - trapezoid - pentagon - hexagon - octagon - wedge_round_rectangle_callout - star - flow_chart_predefined_process - cloud - cross - can - right_arrow - left_arrow - left_right_arrow - left_brace - right_brace Default: rectangle
content?stringThe text that you want to display on the shape item. \ The text must be shorter than 6000 characters. content supports plain text, and the following HTML tags: - <p> - <a> - <strong> - <b> - <em> - <i> - <u> - <s> - <span> - <br> Unsupported HTML tags are automatically escaped. Therefore, in the shape item on the board they're rendered as plain text literals, instead of HTML output.

StickyNoteProps

Ƭ StickyNoteProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"sticky_note"-
style?ObjectThe 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: typescript style: { fillColor: 'light_yellow', // Default value: light yellow textAlign: 'center', // Default alignment: center textAlignVertical: 'middle', // Default alignment: middle }, #### fillColor 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 #### textAlign 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 #### textAlignVertical 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
style.fillColor?StickyNoteColor | `${StickyNoteColor}`-
style.textAlign?TextAlign-
style.textAlignVertical?TextAlignVertical-
tagIds?string[]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: 1. Add the tag ID to the tagIds array. 2. 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: 1. Remove the tag ID from the tagIds array. 2. 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: 1. Specify the item type to retrieve: either card, or sticky_note. 2. Specify one or more tags as filtering criteria. Add and remove tags to and from a sticky note Example (tag): typescript doctest // 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'], }); // => []
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
shape?StickyNoteShapeDefines 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 dp - shape: 'rectangle': 350 dp - Default height with either square, or rectangle: 228 dp (it includes the sticky note shadow)
content?stringThe 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> - <strong> - <b> - <em> - <i> - <u> - <s> - <br> Unsupported HTML tags are automatically escaped. Therefore, in the sticky note item on the board they're rendered as plain text literals, instead of HTML output.

EmbedProps

Ƭ EmbedProps: { height?: number ; width?: number ; type?: "embed" ; parentId?: string | null ; origin?: Origin ; id?: string ; x?: number ; y?: number ; createdAt?: string ; createdBy?: string ; modifiedAt?: string ; modifiedBy?: string ; url?: string ; previewUrl?: string ; mode?: "inline" | "modal" } & { url: string }

TextProps

Ƭ TextProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"text"-
style?ObjectThe 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: typescript style: { color: '#1a1a1a', // Default value: #1a1a1a (black) fillColor: 'transparent', // Default value: transparent (no fill) fillOpacity: 1, // Default value: 1 (solid color) fontFamily: 'arial', // Default font type for the text fontSize: 14, // Default font size for the text textAlign: 'left', // Default alignment: left }, #### color Hex value representing the color of the text string assigned to the the content property of the board item. Default: #1a1a1a (black) #### fillColor Hex value representing the color that fills the area of the text item. Default: transparent (no fill color) #### fillOpacity fillOpacity works similarly to the opacity property in CSS. \ It sets the opacity level of the background fill color defined in the fillColor property of the board item. Allowed values: any number between 0.0 and 1.0 included. - If the value is 0.0, the background fill color is completely transparent or invisible. - If the value is 1.0, the background fill color is completely opaque or solid. Default: 1 (solid color, no opacity) #### fontFamily Sets the type of font for the text item. Possible font families: - arial - cursive - abril_fatface - bangers - eb_garamond - georgia - graduate - gravitas_one - fredoka_one - nixie_one - open_sans - permanent_marker - pt_sans - pt_sans_narrow - pt_serif - rammetto_one - roboto - roboto_condensed - roboto_slab - caveat - times_new_roman - titan_one - lemon_tuesday - roboto_mono - noto_sans - plex_sans - plex_serif - plex_mono - spoof - tiempos_text - noto_serif - noto_serif_jp - noto_sans_jp - noto_sans_hebrew - noto_serif_sc - noto_serif_kr - noto_sans_sc - noto_sans_kr - serif - sans_serif - monospace Default: arial #### fontSize Defines the font size, in dp, for the text item. - Min. font size: 0.001 - Max. font size: no max. limit - Default font size: 14 #### textAlign Sets the horizontal alignment of any text in the content property of the text 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: left
style.color?string-
style.fillColor?string-
style.fillOpacity?number-
style.fontFamily?FontFamily-
style.fontSize?number-
style.textAlign?TextAlign-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
rotation?numberRotation 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
content?stringThe text that you want to display on the text item. \ The text must be shorter than 6000 characters. content supports plain text, and the following HTML tags: - <p> - <a> - <strong> - <b> - <em> - <i> - <u> - <s> - <span> - <ol> - <ul> - <li> - <br> Unsupported HTML tags are automatically escaped. Therefore, in the text item on the board they're rendered as plain text literals, instead of HTML output.

MindmapProps

Ƭ MindmapProps: Object

Type declaration

NameTypeDescription
height?numberHeight of the item in dp. See also: - Pixels and dimensions
width?numberWidth of the item in dp. See also: - Pixels and dimensions
type?"mindmap"-
parentId?string | nullIf 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.
origin?Originorigin 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.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
x?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
y?numberThe 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: - Item geometry - Board coordinates - x and y: -Infinity
createdAt?stringTimestamp Date and time when the item was created. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
createdBy?stringMiro users are automatically assigned a unique ID. createdBy contains the ID of the user who created the item. Example: 3658432978520043388
modifiedAt?stringTimestamp Date and time when the item was last modified. Format: UTC, ISO 8601. \ Includes a trailing Z offset. Example: 2021-05-18T07:59:01Z ℹ️ Note: - Timestamps indicating creation and update times are always in UTC time, regardless of the time offset configured on the machine where the app runs or where the code is executed.
modifiedBy?stringMiro 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
rootView?Object-
rootView.type?"text"-
rootView.content?string-

Item

Ƭ Item: Card | AppCard | Frame | Image | Unsupported | Preview | Shape | StickyNote | Text | Embed | Connector | Mindmap

EntityType

Ƭ EntityType: "tag"

TagProps

Ƭ TagProps: Object

Type declaration

NameTypeDescription
type?"tag"-
title?stringThe text to label card and sticky note items with. The title property has the following characteristics: - Alphanumeric, space, special characters (non-alphanumeric characters; for example: ! @ # $ % ˆ & *), emojis - Case-sensitive - Must be unique - Maximum length: 120 characters, spaces included.
id?stringUnique ID of the item, assigned automatically upon creation. Example: 3658432978520043388
color?TagColor | `${TagColor}`A literal value that assigns a color to the background of the tag. Possible values: - red - magenta - violet - light_green - green - dark_green - cyan - blue - dark_blue - yellow - gray - black Default: red

Entity

Ƭ Entity: Tag

DropEvent

Ƭ DropEvent: Object

Type declaration

NameType
xnumber
ynumber
targetHTMLElement

AppCardOpenEvent

Ƭ AppCardOpenEvent: Object

Type declaration

NameType
appCardAppCard

AppCardConnectEvent

Ƭ AppCardConnectEvent: Object

Type declaration

NameType
appCardAppCard

SelectionUpdateEvent

Ƭ SelectionUpdateEvent: Object

Type declaration

NameType
itemsItem[]

CustomEvent

Ƭ CustomEvent: Object

Type declaration

NameType
itemsItem[]

ItemsCreateEvent

Ƭ ItemsCreateEvent: Object

Type declaration

NameType
itemsItem[]

ItemsDeleteEvent

Ƭ ItemsDeleteEvent: Object

Type declaration

NameType
itemsItem[]

ItemsUpdateEvent

Ƭ ItemsUpdateEvent: Object

Type declaration

NameType
itemsItem[]

EventPayloads

Ƭ EventPayloads: DropEvent | AppCardOpenEvent | AppCardConnectEvent | SelectionUpdateEvent | CustomEvent

CustomEventType

Ƭ CustomEventType: `custom:${string}`

ItemsEventType

Ƭ ItemsEventType: "items:create" | "experimental:items:update" | "items:delete"

AppEventType

Ƭ AppEventType: "icon:click" | "app_card:open" | "app_card:connect" | "selection:update" | CustomEventType | ItemsEventType

EventType

Ƭ EventType: "drop" | AppEventType

NotificationOptions

Ƭ NotificationOptions: Object

Type declaration

NameTypeDescription
typeNotificationTypetype defines the type of notification to display on the board UI. \ You must explicitly set type: - Either to type: 'info' - Or to type: 'error' The value assigned to the type property affects the layout of the notification, when it's displayed on the board UI.
messagestringmessage holds the text that the notification displays on the board UI. - The content of the message can include Unicode-compliant alphanumeric characters, spaces, special characters (non-alphanumeric characters; for example: ! @ # $ % ˆ & *), and emojis. - The format can be either a string, or a template literal. - Maximum length: 80 characters, spaces included.

BoardNode

Ƭ BoardNode: Item | Tag

BoardWidgets

Ƭ BoardWidgets: Item | Item[]

BoardInfo

Ƭ BoardInfo: Object

Type declaration

NameType
idstring
createdAtstring
updatedAtstring

GetFilter

Ƭ GetFilter: { id: string[] | string } | { type?: string[] | string ; tags?: string[] | string }

AppDataValue

Ƭ AppDataValue: Exclude<Json, null>

AppData

Ƭ AppData: Record<string, AppDataValue>

UserInfo

Ƭ UserInfo: Object

Type declaration

NameType
idstring

Updated 16 days ago