Creating text

Text is an essential ingredient in a designer's toolkit and apps can create text that users can then edit and manipulate with Canva's native features.

The user experience

After an app adds text to a user's design, the user can manipulate the text in all the same ways they normally can using the Canva editor.

How to create text

Import the addNativeElement method from the @canva/design package:

import { addNativeElement } from "@canva/design";

Call the method, passing in the options shown here:

await addNativeElement({
  type: "TEXT",
  children: ["Hello world"],
});

The children property accepts an array of strings, with each array item representing a separate line of text. Currently, only one item (or line of text) is supported.

Customizing the appearance of text

To customize the appearance of text, pass additional options into the addNativeElement method:

await addNativeElement({
  type: "TEXT",
  children: ["Hello world"],

  // Optional
  color: "#ff0099",
  decoration: "underline",
  fontStyle: "italic",
  fontWeight: "bold",
  textAlign: "center",
  fontSize: 30,
  top: 50,
  left: 50,
  width: 200,
});

Customizing the position of text

You can set the position of a text element using the top, left, and width properties:

• top: The distance from the top edge of the container, in pixels.
• left: The distance from the left edge of the container, in pixels.
• width: The width of the element, in pixels.

If you set a fontSize value when adding a text element, you must also set the position of the text element. If you don't set the position properties, then the setting for fontSize is ignored.

Known limitations

• Apps can't set the font family of text.
• Apps can't set the line spacing of text.
• Apps can't create text with multiple paragraphs.
• Apps can't create text with a vertical writing mode.
• Text can't have a predefined height.

API reference

• addNativeElement

Code sample

import React from "react";
import { addNativeElement } from "@canva/design";

export function App() {
  async function handleClick() {
    // Add the text to the design
    await addNativeElement({
      type: "TEXT",
      children: ["Hello world"],

      // Optional
      color: "#ff0099",
      decoration: "underline",
      fontStyle: "italic",
      fontWeight: "bold",
      textAlign: "center",
      fontSize: 30,
      top: 50,
      left: 50,
      width: 200,
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Add text to design</button>
    </div>
  );
}