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_embed
```
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 from "react";
import { Rows, Text, EmbedCard } from "@canva/app-ui-kit";
import * as styles from "styles/components.css";
import { ui, type EmbedDragConfig } from "@canva/design";
import { useFeatureSupport } from "utils/use_feature_support";
import { useAddElement } from "utils/use_add_element";

export const App = () => {
  const isSupported = useFeatureSupport();
  const addElement = useAddElement();

  const thumbnailUrl =
    "https://www.canva.dev/example-assets/images/puppyhood.jpg";
  const previewSize = { width: 300, height: 200 };
  const embedUrl =
    "https://www.youtube.com/embed/L3MtFGWRXAA?si=duU555FqmToATe2j";

  const onDragStart = (event: React.DragEvent<HTMLElement>) => {
    const dragData: EmbedDragConfig = {
      type: "embed",
      previewUrl: thumbnailUrl,
      previewSize,
      embedUrl,
    };
    if (isSupported(ui.startDragToPoint)) {
      ui.startDragToPoint(event, dragData);
    } else if (isSupported(ui.startDragToCursor)) {
      ui.startDragToCursor(event, dragData);
    }
  };

  const onAddEmbed = () => {
    addElement({
      type: "embed",
      url: embedUrl,
    });
  };

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          This example demonstrates how apps can support drag-and-drop of embed.
        </Text>
        <EmbedCard
          ariaLabel="Add embed to design"
          thumbnailUrl={thumbnailUrl}
          title="Heartwarming Chatter: Adorable Conversation with a puppy"
          description="Pupppyhood"
          onDragStart={onDragStart}
          onClick={onAddEmbed}
        />
      </Rows>
    </div>
  );
};

TYPESCRIPT

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();

if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

# Drag and drop embed

Demonstrates how to implement drag-and-drop functionality for embed elements using EmbedCard and startDragToPoint. Shows embed URL handling, preview configuration, and design integration with feature detection.

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

Related examples: See design_elements/embed_elements for direct embed insertion, or drag_and_drop/drag_and_drop_video for video drag-and-drop patterns.

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

- Content is hardcoded for demonstration purposes only. Production apps should provide user input interfaces or dynamic content loading
- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- URL validation and sanitization is not implemented. Production apps should validate embed URLs and handle invalid URLs gracefully
- 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)