Creating text

How to add text to a user's design.

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.

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.

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

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

Call the method, passing in the options shown here:

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

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.

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,
});
ts

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.

Text element added to a design with a visual representation of the top, left, and width parameters

  • 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.
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>
);
}
tsx