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_replacement
```
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 { Button, Rows, Text } from "@canva/app-ui-kit";
import { useState } from "react";
import * as styles from "styles/components.css";
import { upload } from "@canva/asset";
import { useSelection } from "utils/use_selection_hook";

export const App = () => {
  const [loading, setLoading] = useState(false);
  const selection = useSelection("video");

  const updateVideo = async () => {
    setLoading(true);
    const queuedVideo = await upload({
      type: "video",
      mimeType: "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",
      url: "https://www.canva.dev/example-assets/video-import/beach-video.mp4",
      width: 320,
      height: 180,
      aiDisclosure: "none",
    });
    const draft = await selection.read();
    draft.contents.forEach((s) => (s.ref = queuedVideo.ref));

    await draft.save();
    setLoading(false);
  };
  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          This example demonstrates how apps can replace the selected video.
          Select a video in the editor to begin.
        </Text>
        <Button
          variant="primary"
          onClick={updateVideo}
          disabled={selection.count === 0}
          loading={loading}
        >
          Replace with sample video
        </Button>
      </Rows>
    </div>
  );
};

TYPESCRIPT

import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";
import { AppUiProvider } from "@canva/app-ui-kit";

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 replacement

Demonstrates how to replace selected video elements in a design with new video content. Shows selection detection, video upload, and content replacement patterns for updating existing design elements.

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

Related examples: See content_replacement/image_replacement for image substitution, or asset_upload for general video import patterns.

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 should validate video formats and handle unsupported formats gracefully
- 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)