Creating videos

Apps can add videos to a user's design, such as MP4 and MOV files. The user can arrange these videos in a Canva design or splice them together in Canva's video editor.

When an app adds a video to the user's design, the video file is uploaded to the user's media library.

While the video is uploading, a lower-resolution version of the video is shown to the user. If the user hasn't provided a lower-resolution version, a static image is shown as a fallback.

The user's media library has a storage quota. If the user has a Canva Pro⁠(opens in a new tab or window) account, their storage quota is 1TB. Otherwise, their storage quota is 5GB. If the user exceeds the storage quota, they'll see an error.

Once the video exists in the user's design, the video is indistinguishable from videos added via Canva's native features. This means the user can manipulate the video in all the same ways, including:

• Adjusting the size, position, and rotation of the video
• Applying effects to the video
• Using the video as a background
• Animating the video — for example, having it fade in

Apps can add the following types of videos to a user's design:

The maximum allowed file size is 100MB — except for Lottie files, which are limited to 0.5MB.

If you're uploading Lottie⁠(opens in a new tab or window) files, the following limitations apply:

• The maximum allowed size of Lottie files is 0.5MB (500KB).
• Lottie stickers must not exceed 10 seconds or 2048 x 2048 pixels.
• Lottie stickers must not contain:
  • 3D layers
  • Font references
  • Media assets
  • Property expressions
• Lottie compositions must not contain:
  • 3D layers
  • Audio
  • Gradient stroke shapes
  • Images
  • Solids
  • Star shapes
  • Text
  • Time remapping
  • Time stretching

In the Developer Portal, enable the following permissions:

• canva:design:content:write
• canva:asset:private:write

In the future, the Apps SDK will throw an error if the required permissions are not enabled.

To learn more, see Configuring permissions.

Import the upload method from the @canva/asset package:

import { upload } from "@canva/asset";

Call the method, passing in the options shown here:

const result = await upload({
  type: "video",
  mimeType: "video/mp4",
  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",
  aiDisclosure: "none",
});

When uploading videos, the URLs must be exposed via the internet and available to Canva's backend, as Canva needs access to the URLs to download them. This means you can't use localhost URLs.

The upload method returns an object that contains a ref property:

console.log(result.ref);

This property contains a reference, which is a unique identifier that points to a video asset in Canva's backend. An app can use this reference to interact with the file — even while it's uploading.

Import the addElementAtPoint method (or addElementAtCursor, depending on the current context) from the @canva/design package:

import { addElementAtPoint } from "@canva/design";

Call the method, passing in the options shown here:

await addElementAtPoint({
  type: "video",
  ref: result.ref,
  altText: {
    text: "Video description for accessibility",
    decorative: false
  },
});

• All videos must comply with Canva's Acceptable Use Policy⁠(opens in a new tab or window).
• All videos must comply with Canva's Upload formats and requirements⁠(opens in a new tab or window).

• addElementAtPoint
• upload

import React from "react";
import { addElementAtPoint } from "@canva/design";
import { upload } from "@canva/asset";

export function App() {
  async function handleClick() {
    // Upload a video file
    const result = await upload({
      type: "video",
      mimeType: "video/mp4",
      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",
      aiDisclosure: "none",
    });

    // Add the video to the design
    await addElementAtPoint({
      type: "video",
      ref: result.ref,
      altText: {
        text: "Video description for accessibility",
        decorative: false
      },
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Add video to design</button>
    </div>
  );
}