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"],// Optionalcolor: "#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
Code sample
import React from "react";import { addNativeElement } from "@canva/design";export function App() {async function handleClick() {// Add the text to the designawait addNativeElement({type: "TEXT",children: ["Hello world"],// Optionalcolor: "#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>);}