Text.Text

Text

Represents text on a board. Board users can edit the text with a rich text editor.
Text items are useful to add descriptions, or to provide context about the content of a board.

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

  • width can be set upon creation, and on update to resize the text item.
    Default width: 100 dp
  • height is read-only. It's calculated automatically, based on the text content and font size.

Example:

const text = await miro.board.createText({
  content: '<p>This is a piece of text to ramble on about something I forgot.</p>',
  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
    textAlign: 'left', // Default alignment: left
  },
  x: -300,
  y: 400,
  width: 720,
  // 'height' is calculated automatically, based on 'width'
  rotation: 180, // The text item is upside down on the board
});

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

Text item:

Text item.Text item.
Figure 1. Text item.

Table of contents

Properties

Methods

Properties

type

Readonly type: "text"

Defines the type of item.
Item type is useful to retrieve specific items from a board.
For example, you can fetch all card and shape items from the board, and then carry out an action on them.

Example:

// Get all items from the board
const items = await miro.board.get();

// Count all card and shape items on the board
let cards = 0;
let shapes = 0;

items.forEach((items) => {
  switch (items.type) {
    case 'card':
      cards++;
    case 'shape':
      shapes++;
  }
});

// Output to the console the total amount of card and shape items
console.log('The current board has ${cards} cards and ${shapes} shapes.');

Overrides

BaseItem.type


rotation

rotation: number

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

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

See also:


width

Readonly width: number

Width of the item in dp.

See also:


height

Readonly height: number

Height of the item in dp.

See also:


content

content: string = ''

The 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.


style

style: Object

The style object groups properties that define the layout, the look and feel of specific elements of an item, when it's displayed on the board.
For example: background color, font family, font type, horizontal and vertical alignment of the text, text color, and so on.

The Miro Web SDK doesn't support all standard style, yet. Additional styles will be included in future releases.

style data structure:

style: {
  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: 10
  • Max. font size: 999
  • 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

Type declaration

NameType
fillColorstring
fillOpacitynumber
fontFamilyFontFamily
fontSizenumber
textAlignTextAlign

id

Readonly id: string


origin

origin: "center"

origin marks:

  • The positioning reference point of a board item.
    This is the point used to calculate the x and y coordinates of an item when it's positioned on the board, or when it's a child inside a parent item.
  • The rotation pivot point of a board item that supports rotation.

origin accepts only one value: center.
Any other value throws an error.


parentId

Readonly parentId: null | string

If an item is a child of another item, the child's parentId returns the unique identifier of the corresponding parent item.
If an item has no parent, its parentId is null.

You can use the value to retrieve a tree structure when items are nested inside containers.
For example, sticky notes inside frames.


createdAt

Readonly createdAt: string

Timestamp

Date and time when the item was created.

Format: UTC, ISO 8601.
Includes a trailing Z offset.

Example: 2021-05-18T07:59:01Z


createdBy

Readonly createdBy: string

Miro users are automatically assigned a unique ID.

createdBy contains the ID of the user who created the item.

Example: 3658432978520043388


modifiedAt

Readonly modifiedAt: string

Timestamp

Date and time when the item was last modified.

Format: UTC, ISO 8601.
Includes a trailing Z offset.

Example: 2021-05-18T07:59:01Z


modifiedBy

Readonly modifiedBy: string

Miro users are automatically assigned a unique ID.

modifiedBy contains the ID of the user who applied the most recent edit to the item.

Example: 3658432978520043388


x

x: number

The x-axis coordinate of an item is the horizontal distance in dp of the center point of the item from the center point of the board.

The center point of the board has x: 0 and y: 0 coordinates.

Default: 0

See also:


y

y: number

The y-axis coordinate of an item is the vertical distance in dp of the center point of the item from the center point of the board.

The center point of the board has x: 0 and y: 0 coordinates.

Default: 0

See also:

Methods

sync

sync(): Promise<void>

sync propagates to the board any changes to item and tag properties.
After updating the properties of an item or a tag, sync it with the board to:

  • Propagate to the board the changes applied to the item or to the tag.
  • Make the changes visible on the board.

All board items and tags require sync to make any changes to their properties visible on the board.

For more information and examples, see Update and sync item properties.

Returns

Promise<void>


Did this page help you?