Skip to main content

Importing assets

To import assets in Remotion, create a public/ folder in your project and use staticFile() to import it.

txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

Using images​

Use the <Img/> tag from Remotion.

MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};
MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

You can also pass a URL:

MyComp.tsx
tsx
import { Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src="https://picsum.photos/id/237/200/300" />;
};
MyComp.tsx
tsx
import { Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src="https://picsum.photos/id/237/200/300" />;
};

Using image sequences​

If you have a series of images, for example exported from another program like After Effects or Rotato, you can interpolate the path to create a dynamic import.

txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};

Using videos​

Use the <OffthreadVideo /> or <Video /> component to keep the timeline and your video in sync.

tsx
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("vid.webm")} />;
};
tsx
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("vid.webm")} />;
};

Loading videos via URL is also possible:

tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};
tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};

See also: Which video formats does Remotion support?

Using Audio​

Use the <Audio/ > component.

tsx
import { Audio, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Audio src={staticFile("tune.mp3")} />;
};
tsx
import { Audio, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Audio src={staticFile("tune.mp3")} />;
};

Loading audio from an URL is also possible:

tsx
import { Audio } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <Audio src="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />
  );
};
tsx
import { Audio } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <Audio src="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />
  );
};

See the audio guide for guidance on including audio.

Using CSS​

Put the .css file alongside your JavaScript source files and use an import statement.

txt
my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
txt
my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
MyComp.tsx
tsx
import "./style.css";
MyComp.tsx
tsx
import "./style.css";
note

Want to use SASS, Tailwind or similar? See examples on how to override the Webpack configuration.

Using Fonts​

Read the separate page for fonts.

import statements​

As an alternative way to import files, Remotion allows you to import or require() several types of files in your project:

  • Images (.png, .svg, .jpg, .jpeg, .webp, .gif, .bmp)
  • Videos (.webm, .mov, .mp4)
  • Audio (.mp3, .wav, .aac, .m4a)
  • Fonts (.woff, .woff2, .otf, .ttf, .eot)

For example:

MyComp.tsx
tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};
MyComp.tsx
tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};

Caveats​

While this was previously the main way of importing files, we now recommend against it because of the following reasons:

  • Only the above listed file extensions are supported.
  • The maximum file size is 2GB.
  • Dynamic imports such as require('img' + frame + '.png') are funky.

Prefer importing using staticFile() if possible.

Dynamic duration based on assets​

To make your videos duration dependent based on your assets, see: Dynamic duration, FPS & dimensions

Files outside of the project​

Remotion runs in the browser, so it does not have access to arbitrary files on your computer.
It is also not possible to use the fs module from Node.js in the browser.
Instead, put assets in the public/ folder and use getStaticFiles() to enumerate them.

See why does Remotion does not support absolute paths.

Adding assets after bundling​

Before rendering, the code gets bundled using Webpack, and only bundled assets can be accessed afterwards.
For this reason, assets that are being added to the public folder after bundle() is called will not be accessible during render.
However, if you use the server-side rendering APIs, you can add assets to the public folder that is inside the bundle after the fact.

Use <Img>, <Video> and <Audio>​

Prefer <Img /> or <Gif /> over the native <img> tag, <Image> from Next.js and CSS background-image.
Prefer <OffthreadVideo /> or <Video /> over the native <video> tag.
Prefer <Audio /> over the native <audio> tag.
Prefer <IFrame /> over the native <iframe> tag.


By using the components from Remotion, you ensure that:

The assets are fully loaded before the the frame is rendered
2
 The images and videos are synchronized with Remotion's timeline.

See also​