If you haven't already, create a new app in the Developer Portal⁠(opens in a new tab or window). For more information, refer to our Quickstart guide.
In your app's configuration on the Developer Portal⁠(opens in a new tab or window), ensure the "Development URL" is set to http://localhost:8080.

Clone the starter kit:

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start drag_and_drop_text
```
SHELL
Click the Preview URL link shown in the terminal to open the example in the Canva editor.

Example app source code

// For usage information, see the README.md file.
import React, { useState, useCallback } from "react";
import {
  FormField,
  Rows,
  Select,
  Text,
  TextInput,
  Title,
  TypographyCard,
} from "@canva/app-ui-kit";
import type { FontWeight, TextAttributes, TextDragConfig } from "@canva/design";
import { ui } from "@canva/design";
import * as styles from "styles/components.css";
import { useFeatureSupport } from "utils/use_feature_support";

// UI state for text styling configuration
type UIState = {
  text: string;
  fontWeight: FontWeight;
  fontStyle: TextAttributes["fontStyle"];
  decoration: TextAttributes["decoration"];
  textAlign: TextAttributes["textAlign"];
};

const initialState: UIState = {
  text: "Hello world",
  fontWeight: "normal",
  fontStyle: "normal",
  decoration: "none",
  textAlign: "start",
};

export const App = () => {
  const [state, setState] = useState<UIState>(initialState);
  const isSupported = useFeatureSupport();

  const { text, fontWeight, fontStyle, decoration, textAlign } = state;

  // Check if drag-and-drop is supported in the current context
  const isDragDropSupported = isSupported(ui.startDragToPoint);

  // Handle drag start with feature detection for different Canva contexts
  const onDragStart = useCallback(
    (event: React.DragEvent<HTMLElement>) => {
      const dragData: TextDragConfig = {
        type: "text",
        children: [text],
        fontWeight,
        fontStyle,
        decoration,
        textAlign,
      };

      // Use feature detection to support different Canva Editor versions
      // startDragToPoint works for fixed design types (presentations, etc.)
      // Note: startDragToCursor does not support text elements, only images, videos, and embeds
      if (isSupported(ui.startDragToPoint)) {
        ui.startDragToPoint(event, dragData);
      }
    },
    [text, fontWeight, fontStyle, decoration, textAlign, isSupported],
  );

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="3u">
        <Text>
          This example demonstrates how apps can support drag-and-drop of
          customizable text elements with styling options.
        </Text>

        {isDragDropSupported ? (
          <>
            {/* Text input section */}
            <Rows spacing="1u">
              <Title size="small">Text content</Title>
              <FormField
                label="Text"
                value={text}
                control={(props) => (
                  <TextInput
                    {...props}
                    onChange={(value) => {
                      setState((prevState) => ({
                        ...prevState,
                        text: value,
                      }));
                    }}
                  />
                )}
              />
            </Rows>

            {/* Style customization section */}
            <Rows spacing="1u">
              <Title size="small">Text styling</Title>

              <FormField
                label="Font weight"
                value={fontWeight}
                control={(props) => (
                  <Select<FontWeight>
                    {...props}
                    stretch
                    onChange={(fontWeight) => {
                      setState((prevState) => ({
                        ...prevState,
                        fontWeight,
                      }));
                    }}
                    options={[
                      { value: "normal", label: "Normal" },
                      { value: "light", label: "Light" },
                      { value: "bold", label: "Bold" },
                    ]}
                  />
                )}
              />

              <FormField
                label="Font style"
                value={fontStyle}
                control={(props) => (
                  <Select<TextAttributes["fontStyle"]>
                    {...props}
                    stretch
                    onChange={(fontStyle) => {
                      setState((prevState) => ({
                        ...prevState,
                        fontStyle,
                      }));
                    }}
                    options={[
                      { value: "normal", label: "Normal" },
                      { value: "italic", label: "Italic" },
                    ]}
                  />
                )}
              />

              <FormField
                label="Decoration"
                value={decoration}
                control={(props) => (
                  <Select<TextAttributes["decoration"]>
                    {...props}
                    stretch
                    onChange={(decoration) => {
                      setState((prevState) => ({
                        ...prevState,
                        decoration,
                      }));
                    }}
                    options={[
                      { value: "none", label: "None" },
                      { value: "underline", label: "Underline" },
                    ]}
                  />
                )}
              />

              <FormField
                label="Text alignment"
                value={textAlign}
                control={(props) => (
                  <Select<TextAttributes["textAlign"]>
                    {...props}
                    stretch
                    onChange={(textAlign) => {
                      setState((prevState) => ({
                        ...prevState,
                        textAlign,
                      }));
                    }}
                    options={[
                      { value: "start", label: "Start" },
                      { value: "center", label: "Center" },
                      { value: "end", label: "End" },
                    ]}
                  />
                )}
              />
            </Rows>

            {/* Preview and drag section */}
            <Rows spacing="1u">
              <Title size="small">Preview and drag to design</Title>
              <Text size="small" tone="tertiary">
                Drag the text card below to add it to your design.
              </Text>

              <TypographyCard
                ariaLabel="Drag text to add to design"
                onDragStart={onDragStart}
              >
                <div
                  style={{
                    fontWeight,
                    fontStyle,
                    textDecoration:
                      decoration === "underline" ? "underline" : "none",
                    textAlign,
                  }}
                >
                  {text}
                </div>
              </TypographyCard>
            </Rows>
          </>
        ) : (
          <Rows spacing="2u">
            <Text tone="tertiary">
              Text drag-and-drop is not supported in this design type.
            </Text>
            <Text size="small" tone="tertiary">
              This feature only works in fixed design types like presentations,
              posters, and social media posts. It's not available in responsive
              document types like Canva Docs or Sheets.
            </Text>
          </Rows>
        )}
      </Rows>
    </div>
  );
};

TYPESCRIPT

// For usage information, see the README.md file.
import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";

const root = createRoot(document.getElementById("root") as Element);
function render() {
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

render();

// Hot Module Replacement for development (automatically reloads the app when changes are made)
if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

# Drag and drop text

Demonstrates how to implement drag-and-drop functionality for text elements with configurable styling properties. Shows text formatting, typography card usage, feature detection, and graceful degradation for unsupported design contexts.

For API reference docs and instructions on running this example, see: <https://www.canva.dev/docs/apps/examples/drag-and-drop-text/>.

Related examples: See drag_and_drop/drag_and_drop_image for implementing similar drag-and-drop functionality with image assets, or design_elements/text_elements for direct text insertion without drag-and-drop.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements

MARKDOWN

API reference

Need help?

Join our Community Forum⁠(opens in a new tab or window)
Report issues with this example on GitHub⁠(opens in a new tab or window)