Skip navigation

Skip to main content

On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.
API reference
Intents: design
API reference

GroupContentElement

API reference for the GroupContentElement type.
This version of the API is a preview. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

An element that can exist in a group element.

Type declaration

An element that renders a rectangle.

The rectangle can be filled with image content, video content, or a solid color.

typestringRead-only
Required

The element type

This must be "rect".

fillFillRead-only
Required

Describes how a fill is filled with color or media.

If both media and color are defined, media takes precedence.

For more information, see Fill.

strokeStrokeRead-only
Required

The outline of the rectangle.

For more information, see Stroke.

widthnumberRead-only
Required

A width, in pixels.

heightnumberRead-only
Required

A height, in pixels.

lockedbooleanRead-only
Required

If true, the element is locked and cannot be modified.

topnumber
Required

The distance from the top edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

leftnumber
Required

The distance from the left edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

rotationnumber
Required

A rotation, in degrees.

Minimum: -180

Maximum: 180

transparencynumber
Required

Transparency as a percentage.

Minimum: 0

Maximum: 1

An element that renders a vector shape.

typestringRead-only
Required

The type of content.

This must be "shape".

viewBoxAlignedBoxRead-only
Required

The scale and cropping of the shape.

topnumberRead-only
Required

The distance of the shape from the top edge of the element, in pixels.

leftnumberRead-only
Required

The distance of the shape from the left edge of the element, in pixels.

widthnumberRead-only
Required

The width of the view box, in pixels.

heightnumberRead-only
Required

The height of the view box, in pixels.

pathsReadableList<Path>Read-only
Required

The paths that define the structure of the shape.

For more information, see ReadableList and Path.

widthnumberRead-only
Required

A width, in pixels.

heightnumberRead-only
Required

A height, in pixels.

lockedbooleanRead-only
Required

If true, the element is locked and cannot be modified.

topnumber
Required

The distance from the top edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

leftnumber
Required

The distance from the left edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

rotationnumber
Required

A rotation, in degrees.

Minimum: -180

Maximum: 180

transparencynumber
Required

Transparency as a percentage.

Minimum: 0

Maximum: 1

An element that embeds rich media, such as a YouTube video.

typestringRead-only
Required

The type of content.

This must be "embed".

urlstringRead-only
Required

The URL of the rich media.

This URL must be supported by the Iframely API.

widthnumberRead-only
Required

A width, in pixels.

heightnumberRead-only
Required

A height, in pixels.

lockedbooleanRead-only
Required

If true, the element is locked and cannot be modified.

topnumber
Required

The distance from the top edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

leftnumber
Required

The distance from the left edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

rotationnumber
Required

A rotation, in degrees.

Minimum: -180

Maximum: 180

transparencynumber
Required

Transparency as a percentage.

Minimum: 0

Maximum: 1

An element that renders text content.

typestringRead-only
Required

This must be "text".

textRichtextRangeRead-only
Required

Provides methods for interacting with a range of formatted text.

formatParagraphfunction
Required

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

boundsBounds
Required

The segment of the range on which to apply the formatting.

indexnumber
Required

The starting position of the segment.

This is zero-based, meaning the first character of the range is at index 0.

lengthnumber
Required

The number of characters in the segment, starting from the index.

formattingRichtextFormatting
Required

The formatting to apply to the paragraph(s).

colorstring
Optional

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"
TS
fontWeightFontWeight
Optional

The weight (thickness) of the font.

The available font weights depend on the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestring
Optional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstring
Optional

The decoration of the text.

Default value: "none"

Available values:

  • "none"
  • "underline"
strikethroughstring
Optional

The strikethrough of the text.

Default value: "none"

Available values:

  • "none"
  • "strikethrough"
fontRefFontRef
Optional

A unique identifier that points to a font asset in Canva's backend.

fontSizenumber
Optional

The size of the text, in pixels.

  • In the Canva editor, this number is shown as points (pts), not pixels.

Minimum: 1

Maximum: 100

textAlignstring
Optional

The alignment of the text.

Default value: "start"

Available values:

  • "start"
  • "center"
  • "end"
  • "justify"
listLevelnumber
Optional

The list indentation level of the paragraph.

listMarkerstring
Optional

The appearance of list item markers.

This property only has an effect if listLevel is greater than 0.

Default value: "none"

Available values:

  • "none"
  • "disc"
  • "circle"
  • "square"
  • "decimal"
  • "lower-alpha"
  • "lower-roman"
  • "checked"
  • "unchecked"

Returns

void

formatTextfunction
Required

Formats a region of text with inline formatting properties.

Parameters

boundsBounds
Required

The segment of the range on which to apply the formatting.

indexnumber
Required

The starting position of the segment.

This is zero-based, meaning the first character of the range is at index 0.

lengthnumber
Required

The number of characters in the segment, starting from the index.

formattingInlineFormatting
Required

The formatting to apply to the text.

colorstring
Optional

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"
TS
fontWeightFontWeight
Optional

The weight (thickness) of the font.

The available font weights depend on the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestring
Optional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstring
Optional

The decoration of the text.

Default value: "none"

Available values:

  • "none"
  • "underline"
strikethroughstring
Optional

The strikethrough of the text.

Default value: "none"

Available values:

  • "none"
  • "strikethrough"

Returns

void

appendTextfunction
Required

Appends the specified characters to the end of the range.

Parameters

charactersstring
Required

The characters to append to the richtext range.

formattingInlineFormatting
Optional

Options for formatting inline richtext.

colorstring
Optional

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"
TS
fontWeightFontWeight
Optional

The weight (thickness) of the font.

The available font weights depend on the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestring
Optional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstring
Optional

The decoration of the text.

Default value: "none"

Available values:

  • "none"
  • "underline"
strikethroughstring
Optional

The strikethrough of the text.

Default value: "none"

Available values:

  • "none"
  • "strikethrough"

Returns

boundsBounds

A segment of a richtext range.

indexnumber

The starting position of the segment.

This is zero-based, meaning the first character of the range is at index 0.

lengthnumber

The number of characters in the segment, starting from the index.

replaceTextfunction
Required

Replaces a region of text with the specified characters.

Parameters

boundsBounds
Required

The segment of the range to replace.

indexnumber
Required

The starting position of the segment.

This is zero-based, meaning the first character of the range is at index 0.

lengthnumber
Required

The number of characters in the segment, starting from the index.

charactersstring
Required

The replacement characters.

formattingInlineFormatting
Optional

The formatting to apply to the replaced text.

colorstring
Optional

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"
TS
fontWeightFontWeight
Optional

The weight (thickness) of the font.

The available font weights depend on the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestring
Optional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstring
Optional

The decoration of the text.

Default value: "none"

Available values:

  • "none"
  • "underline"
strikethroughstring
Optional

The strikethrough of the text.

Default value: "none"

Available values:

  • "none"
  • "strikethrough"

Returns

boundsBounds

The bounds of the replacement characters within the updated range.

indexnumber

The starting position of the segment.

This is zero-based, meaning the first character of the range is at index 0.

lengthnumber

The number of characters in the segment, starting from the index.

readPlaintextfunction
Required

Returns the current state of the richtext as plaintext.

Returns

string

readTextRegionsfunction
Required

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

textstring

The plaintext content of the region.

formattingPartial<RichtextFormatting>
Optional

The formatting of the region.

colorstring
Optional

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"
TS
fontWeightFontWeight
Optional

The weight (thickness) of the font.

The available font weights depend on the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestring
Optional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstring
Optional

The decoration of the text.

Default value: "none"

Available values:

  • "none"
  • "underline"
strikethroughstring
Optional

The strikethrough of the text.

Default value: "none"

Available values:

  • "none"
  • "strikethrough"
fontRefFontRef
Optional

A unique identifier that points to a font asset in Canva's backend.

fontSizenumber
Optional

The size of the text, in pixels.

  • In the Canva editor, this number is shown as points (pts), not pixels.

Minimum: 1

Maximum: 100

textAlignstring
Optional

The alignment of the text.

Default value: "start"

Available values:

  • "start"
  • "center"
  • "end"
  • "justify"
listLevelnumber
Optional

The list indentation level of the paragraph.

listMarkerstring
Optional

The appearance of list item markers.

This property only has an effect if listLevel is greater than 0.

Default value: "none"

Available values:

  • "none"
  • "disc"
  • "circle"
  • "square"
  • "decimal"
  • "lower-alpha"
  • "lower-roman"
  • "checked"
  • "unchecked"
widthnumberRead-only
Required

A width, in pixels.

heightnumberRead-only
Required

A height, in pixels.

lockedbooleanRead-only
Required

If true, the element is locked and cannot be modified.

topnumber
Required

The distance from the top edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

leftnumber
Required

The distance from the left edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

rotationnumber
Required

A rotation, in degrees.

Minimum: -180

Maximum: 180

transparencynumber
Required

Transparency as a percentage.

Minimum: 0

Maximum: 1

An element that is not supported by the Apps SDK.

typestringRead-only
Required

This must be "unsupported".

widthnumberRead-only
Required

A width, in pixels.

heightnumberRead-only
Required

A height, in pixels.

lockedbooleanRead-only
Required

If true, the element is locked and cannot be modified.

topnumber
Required

The distance from the top edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

leftnumber
Required

The distance from the left edge of the container, in pixels.

  • The pixels are relative to their container.

Minimum: -32768

Maximum: 32767

rotationnumber
Required

A rotation, in degrees.

Minimum: -180

Maximum: 180

transparencynumber
Required

Transparency as a percentage.

Minimum: 0

Maximum: 1