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 video_elements
```
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 {
  Box,
  Button,
  FormField,
  Grid,
  VideoCard,
  Rows,
  Text,
} from "@canva/app-ui-kit";
import React from "react";
import * as styles from "styles/components.css";
import { upload } from "@canva/asset";
import { useAddElement } from "utils/use_add_element";

const videos = {
  building: {
    title: "Pinwheel on building",
    url: "https://www.canva.dev/example-assets/video-import/video.mp4",
    thumbnailImageUrl:
      "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
    thumbnailVideoUrl:
      "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
  },
  beach: {
    title: "A beautiful beach scene",
    url: "https://www.canva.dev/example-assets/video-import/beach-video.mp4",
    thumbnailImageUrl:
      "https://www.canva.dev/example-assets/video-import/beach-thumbnail-image.jpg",
    thumbnailVideoUrl:
      "https://www.canva.dev/example-assets/video-import/beach-thumbnail-video.mp4",
  },
};

export const App = () => {
  const [selected, setSelected] = React.useState("building");
  const [isLoading, setIsLoading] = React.useState(false);
  const addElement = useAddElement();

  const items = Object.entries(videos).map(([key, value]) => {
    const { title, thumbnailImageUrl, thumbnailVideoUrl } = value;
    return {
      key,
      title,
      thumbnailImageUrl,
      thumbnailVideoUrl,
      active: selected === key,
      onClick: () => {
        setSelected(key);
      },
    };
  });

  const addVideo = React.useCallback(async () => {
    setIsLoading(true);
    try {
      const item = videos[selected];
      const { ref } = await upload({
        type: "video",
        mimeType: "video/mp4",
        url: item.url,
        thumbnailImageUrl: item.thumbnailImageUrl,
        thumbnailVideoUrl: item.thumbnailVideoUrl,
        aiDisclosure: "none",
      });

      await addElement({
        type: "video",
        ref,
        altText: {
          text: item.title,
          decorative: undefined,
        },
      });
    } finally {
      setIsLoading(false);
    }
  }, [selected]);

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          This example demonstrates how apps can add video elements to a design.
        </Text>
        <FormField
          label="Select a video"
          control={(props) => (
            <Box {...props} padding="1u">
              <Grid columns={2} spacing="1.5u">
                {items.map((item) => (
                  <VideoCard
                    ariaLabel="Add video to design"
                    key={item.key}
                    mimeType="video/mp4"
                    thumbnailUrl={item.thumbnailImageUrl}
                    thumbnailHeight={150}
                    videoPreviewUrl={item.thumbnailVideoUrl}
                    onClick={item.onClick}
                    selectable={true}
                    selected={item.active}
                    borderRadius="standard"
                  />
                ))}
              </Grid>
            </Box>
          )}
        />
        <Button
          variant="primary"
          loading={isLoading}
          onClick={addVideo}
          stretch
        >
          Add element
        </Button>
      </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

# Video elements

Demonstrates how to add video elements to designs using predefined video assets. Shows video selection, upload handling, and video insertion with thumbnail previews.

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

Related examples: See app_video_elements for videos within app elements, or drag_and_drop/drag_and_drop_video for drag-and-drop video insertion.

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

- Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
- Video format validation is not implemented. Production apps must validate video formats, dimensions, and file sizes
- 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)