Add element to responsive documents, which slot things into a text stream
Parameters
element
ElementAtCursor
Elements targeting a cursor are a subset of the base Element
An element that renders image content.
type
string
The type of element.
This must be "image"
.
altText
AltText | undefined
A description of the image content.
Properties of altText
text
string
The text content.
decorative
boolean | undefined
Indicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
dataUrl
string
A data URL that contains the image data.
ref
ImageRef
A unique identifier that points to an image asset in Canva's backend.
An element that renders video content.
type
string
The type of element.
This must be "video"
.
ref
VideoRef
A unique identifier that points to a video asset in Canva's backend.
altText
AltText | undefined
A description of the video content.
Properties of altText
text
string
The text content.
decorative
boolean | undefined
Indicates where the alternative text should be displayed.
- If
true
, the alternative text will only be displayed in the editor. - If
false
, the alternative text will be displayed in the editor and in view-only mode.
An element that renders rich media, such as a YouTube video.
type
string
The type of element.
This must be "embed"
.
url
string
The URL of the rich media.
This URL must be supported by the Iframely API.
An element that renders text content.
type
string
The type of element.
This must be "text"
.
children
string[]
The text content.
Only the first element in this array is used.
fontSize
number
The size of the text.
- Minimum: 1
- Maximum: 100
Default Value: 16
textAlign
string
The alignment of the text.
Default Value: "start"
The available options include:
"start"
"center"
"end"
"justify"
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontRef
FontRef
A unique identifier that points to a font asset in Canva's backend.
fontWeight
FontWeight
The weight (thickness) of the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the font.
Default Value: "none"
The available options include:
"none"
"underline"
An element that renders richtext content.
type
string
The type of element.
This must be "richtext"
.
range
RichtextRange
The richtext content.
Properties of range
formatParagraph
function
Formats all of the paragraphs that overlap the given bounds.
- The
\n
character indicates the end of a paragraph. - All paragraphs that overlap the provided bounds will be formatted in their entirety.
Parameters
bounds
Bounds
The segment of the range on which to apply the formatting.
Properties of bounds
index
number
The starting position of the segment.
This is zero-based, meaning the first character of the range is at index 0.
length
number
The number of characters in the segment, starting from the index.
formatting
RichtextFormatting
The formatting to apply to the paragraph(s).
Properties of formatting
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontWeight
FontWeight
The weight (thickness) of the font.
The available font weights depend on the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the text.
Default Value: "none"
The available options include:
"none"
"underline"
strikethrough
string
The strikethrough of the text.
Default Value: "none"
The available options include:
"none"
"strikethrough"
link
string
An external URL that the text links to.
fontRef
FontRef
A unique identifier that points to a font asset in Canva's backend.
fontSize
number
The size of the text, in pixels.
- In the Canva editor, this number is shown as points (pts), not pixels.
- Minimum: 1
- Maximum: 100
textAlign
string
The alignment of the text.
Default Value: "start"
The available options include:
"start"
"center"
"end"
"justify"
listLevel
number
The list indentation level of the paragraph.
listMarker
string
The appearance of list item markers.
This property only has an effect if listLevel
is greater than 0.
Default Value: "none"
The available options include:
"none"
"disc"
"circle"
"square"
"decimal"
"lower-alpha"
"lower-roman"
"checked"
"unchecked"
Returns
void
formatText
function
Formats a region of text with inline formatting properties.
Parameters
bounds
Bounds
The segment of the range on which to apply the formatting.
Properties of bounds
index
number
The starting position of the segment.
This is zero-based, meaning the first character of the range is at index 0.
length
number
The number of characters in the segment, starting from the index.
formatting
InlineFormatting
The formatting to apply to the text.
Properties of formatting
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontWeight
FontWeight
The weight (thickness) of the font.
The available font weights depend on the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the text.
Default Value: "none"
The available options include:
"none"
"underline"
strikethrough
string
The strikethrough of the text.
Default Value: "none"
The available options include:
"none"
"strikethrough"
link
string
An external URL that the text links to.
Returns
void
appendText
function
Appends the specified characters to the end of the range.
Parameters
characters
string
The characters to append to the richtext range.
formatting
InlineFormatting
Options for formatting inline richtext.
Properties of formatting
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontWeight
FontWeight
The weight (thickness) of the font.
The available font weights depend on the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the text.
Default Value: "none"
The available options include:
"none"
"underline"
strikethrough
string
The strikethrough of the text.
Default Value: "none"
The available options include:
"none"
"strikethrough"
link
string
An external URL that the text links to.
Returns
bounds
Bounds
A segment of a richtext range.
Properties of bounds
index
number
The starting position of the segment.
This is zero-based, meaning the first character of the range is at index 0.
length
number
The number of characters in the segment, starting from the index.
replaceText
function
Replaces a region of text with the specified characters.
Parameters
bounds
Bounds
The segment of the range to replace.
Properties of bounds
index
number
The starting position of the segment.
This is zero-based, meaning the first character of the range is at index 0.
length
number
The number of characters in the segment, starting from the index.
characters
string
The replacement characters.
formatting
InlineFormatting
The formatting to apply to the replaced text.
Properties of formatting
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontWeight
FontWeight
The weight (thickness) of the font.
The available font weights depend on the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the text.
Default Value: "none"
The available options include:
"none"
"underline"
strikethrough
string
The strikethrough of the text.
Default Value: "none"
The available options include:
"none"
"strikethrough"
link
string
An external URL that the text links to.
Returns
bounds
Bounds
The bounds of the replacement characters within the updated range.
Properties of bounds
index
number
The starting position of the segment.
This is zero-based, meaning the first character of the range is at index 0.
length
number
The number of characters in the segment, starting from the index.
readPlaintext
function
Returns the current state of the richtext as plaintext.
Returns
string
readTextRegions
function
Returns the current state of the richtext as one or more text regions. Each region is an object that contains the text content and its formatting.
Returns
text
string
The plaintext content of the region.
formatting
Partial<RichtextFormatting>
The formatting of the region.
An element that renders a table.
type
string
The type of element.
This must be "table"
.
rows
object[]
The rows of the table.
Properties of rows
cells
Array<Cell | null | undefined>
The cells (columns) of the row.
Each row must have the same number of cells.
This should be either the following object, null
, or undefined
.
attributes
CellAttributes
The attributes of the cell.
Properties of attributes
backgroundColor
string
The background color of the cell, as a hex code.
fontSize
number
The size of the text.
- Minimum: 1
- Maximum: 100
Default Value: 16
textAlign
string
The alignment of the text.
Default Value: "start"
The available options include:
"start"
"center"
"end"
"justify"
color
string
The color of the text as a hex code.
The hex code must include all six characters and be prefixed with a #
symbol.
Example
"#ff0099"
fontRef
FontRef
A unique identifier that points to a font asset in Canva's backend.
fontWeight
FontWeight
The weight (thickness) of the font.
Default Value: "normal"
The available options include:
"normal"
"thin"
"extralight"
"light"
"medium"
"semibold"
"bold"
"ultrabold"
"heavy"
fontStyle
string
The style of the font.
Default Value: "normal"
The available options include:
"normal"
"italic"
decoration
string
The decoration of the font.
Default Value: "none"
The available options include:
"none"
"underline"
colSpan
number
The number of columns that the cell occupies.
rowSpan
number
The number of rows that the cell occupies.
type
string
The available options include:
"empty"
"string"
value
string
The plaintext content of the cell.
If an empty string is provided, the type
will change to "empty"
.
Returns
Promise<void>