Module: sdk-types/dist

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"


Origin

Ƭ Origin: "center"


AppCardStatus

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


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" | "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">

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-
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 To set a custom color for the card border, assign cardTheme a valid hex value. 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'], }); // => []
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
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
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 To set a custom color for the card border, assign cardTheme a valid hex value. 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'], }); // => []
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
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
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. Only the app that created the app card has read and write access to it. \ Other apps can only view the app card properties.
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: disconnectedApp card status: disconnected disconnected - App card status: disabledApp card status: disabled disabled - App card status: connectedApp card status: connected connected The Miro Web SDK can set the following app card status value: - App card status: disconnectedApp card status: disconnected disconnected Default: App card status: disconnectedApp 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: disconnectedApp card status: disconnected \ The disconnected icon App card status: disconnectedApp 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: disabledApp card status: disabled \ The disabled icon App card status: disabledApp 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: connectedApp card status: connected \ The connected icon App card status: connectedApp 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 installedThe app for the app card is not installed \ The missing app icon The app for the app card is not installedThe 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.
fields?CardField[]An array of objects. \ Each object represents a custom preview field that you can define for the app card. \ The preview fields are displayed on the bottom half of the app card in the compact view. \ They are automatically sorted, based on the content of the value field, and ordered by the following criteria: - Numeric, ascending. - Alphabetic, from A to Z. - Horizontal, from left to right. - Vertical, from top to bottom, if the app card width isn't enough to accommodate all preview fields on one row. For each preview field, you can define: - The data value of the custom field. \ For example, you can use value to communicate status or completion information; or a due date; or a plain text string. - 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 displayed when clicking or hovering over the preview field. Preview field data structure: ```typescript { value?: string fillColor?: string textColor?: string iconUrl?: string iconShape?: 'round''square' tooltip?: string } `` ####<a id="fields-value"></a>value The actual data value of the custom field. \ It can be any type of information that you want to convey. \ For example, you can usevalueto communicate status or completion information; or a due date; or a plain text string. ####<a id="fields-fillcolor"></a>fillColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) that fills the background area of the preview field, when it's displayed on the app card. Default:transparent(no fill color) ####<a id="fields-textcolor"></a>textColor [Hex value](https://www.colorbook.io/hexcolors) representing the [color](https://htmlcolorcodes.com/) of the text string assigned tovalue. \ Default: [#1a1a1a](https://www.colorbook.io/hexcolors/view/1a1a1a) (black) ####<a id="fields-iconurl"></a> iconUrl A valid URL pointing to an image available online. \ The transport protocol must be HTTPS. Supported image file format: - PNG ####<a id="fields-iconshape"></a>iconShape Defines the shape of the icon on the preview field. \ Possible values: -round-square ####<a id="fields-tooltip"></a>tooltip` A short text displayed in a tooltip when clicking or hovering over the preview field. \ The text must be shorter than 6000 characters.

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
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
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
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 }


ConnectorProps

Ƭ ConnectorProps: Object

Type declaration

NameTypeDescription
type?"connector"-
style?Object#### startStrokeCap Sets the shape of the start/head of the connector line. \ 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 line. \ 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 line 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)
style.startStrokeCap?StrokeCapShape-
style.endStrokeCap?StrokeCapShape-
style.strokeStyle?StrokeStyle-
style.strokeWidth?number-
style.strokeColor?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
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
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
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 line attaches at. \ To define the start board item, you must specify the item ID. - The x and y coordinates that mark the start point of the connector line on the board item area. ℹ️ Note: - The default value is undefined. \ However, you must specify a start and an end for the connector line. - When creating connector lines 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. \ You must specify the x and y coordinates of both the start and end points of a connector line. start data structure: typescript start: { // Define the start board item for the start point of the connector line // 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 line cap is attached to. \ To define start and end board items of a connector line, 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 groups the x and y coordinates that mark the start and end points of the connector line. You must specify the x and y coordinates of both the start and end points of a connector line. \ x and y accept numerical values between 0.0 and 1.0 included. 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 line: - 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 line. \ 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 line: - 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 line. \ 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 line: - y: 0.0 = top - y: 0.5 = middle - y: 1.0 = bottom
start.item?string-
start.position?Object-
start.position.x?number-
start.position.y?number-
end?ObjectThe end object groups properties that define: - The board item that the end point of the connector line attaches at. \ To define the end board item, you must specify the item ID. - The x and y coordinates that mark the end point of the connector line on the board item area. ℹ️ Note: - The default value is undefined. \ However, you must specify a start and an end for the connector line. - When creating connector lines 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. \ You must specify the x and y coordinates of both the start and end points of a connector line. end data structure: typescript end: { // Define the end board item for the end point of the connector line // by specifying the item ID. item: '3458764511234567890', 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 line cap is attached to. \ To define start and end board items of a connector line, 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 groups the x and y coordinates that mark the start and end points of the connector line. You must specify the x and y coordinates of both the start and end points of a connector line. \ x and y accept numerical values between 0.0 and 1.0 included. 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 line: - 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 line. \ 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 line: - 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 line. \ 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 line: - y: 0.0 = top - y: 0.5 = middle - y: 1.0 = bottom
end.item?string-
end.position?Object-
end.position.x?number-
end.position.y?number-

UnsupportedType

Ƭ UnsupportedType: "curve" | "document" | "emoji" | "table" | "kanban" | "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
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
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
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
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: { fillColor: '#6DEB0C', // Default color: transparent (no fill) fontFamily: 'arial', // Default font type for the text fontSize: 14, // Default font size in dp for the text textAlign: 'center', // Default alignment: center textAlignVertical: 'middle', // Default alignment: middle }, #### fillColor Hex value representing the color that fills the area of the shape. ℹ️ Note: The following shapes don't support the fillColor property: - brace_left - brace_right Default: transparent (no fill color) #### 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
style.fillColor?string-
style.fontFamily?FontFamily-
style.fontSize?number-
style.textAlign?TextAlign-
style.textAlignVertical?TextAlignVertical-
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
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
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 stripped.

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
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
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> - <br> Unsupported HTML tags are automatically stripped.

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: { 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 }, #### fillColor Hex value representing the color that fills the area of the text item. Default: transparent (no fill color) #### fillOpacity Sets the opacity level of the background color defined in the fillColor property of the text item. \ Possible values: any number between 0 and 1. - If the value is 0, the background color is completely transparent or invisible. - If the value is 1, the background color is completely opaque or solid. Default: 1 (solid color) #### 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.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
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
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 stripped.

Item

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


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[]

EventPayloads

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


CustomEventType

Ƭ CustomEventType: `custom:${string}`


AppEventType

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


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