Canva Developers logo
Drag and Drop
Getting started
Drag and Drop

DraggableText

Renders text that users can drag and drop into their design.

Import

import { DraggableText } from "../components/DraggableText";

Usage

Basic usage

<DraggableText>Drag me into the design</DraggableText>

Styling the text

You can use the style prop to style the text in the app's iframe. Where possible, Canva will use these styles to determine the style of the text that's dropped into the design.

<DraggableText
  style={{
    fontStyle: "italic",
    fontWeight: "bold",
    textAlign: "center",
    textDecoration: "underline",
  }}
>
  Drag me into the design
</DraggableText>

Customizing the drag data

If you want the text that's dropped into the design to look different from the text that's in the app's iframe, set properties that are distinct from the style prop.

<DraggableText
  style={{
    fontStyle: "italic",
    fontWeight: "bold",
    textAlign: "center",
    textDecoration: "underline",
  }}
  decoration="none"
  fontStyle="normal"
  fontWeight="normal"
  textAlign="end"
>
  Drag me into the design
</DraggableText>

Props

children

The text to render within the app's user interface. This is also the text that's added to the user's design at the end of a drag event.

Type
string
decoration

The decoration of the text. The default value is "none".

Type
'none' | 'underline'
fontStyle

The style of the text. The default value is "normal".

Type
'normal' | 'italic'
fontWeight

The weight of the text. The default value is "normal".

Type
'normal' | 'bold'
textAlign

The alignment of the text. The default value is "start".

Type
'start' | 'center' | 'end'