> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# Drag and drop text

Demonstrates how to implement drag-and-drop functionality for text elements with configurable styling properties.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

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

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example drag_and_drop_text
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // 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 "@canva/app-hooks";

    // 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>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```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";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

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

  <Tab name="README.md">
    ```markdown
    # 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
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`ui.startDragToPoint`](https://www.canva.dev/docs/apps/api/latest/design-ui-start-drag-to-point/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)