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}.png`)} />;
};

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

Using videos

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

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

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

Loading videos via URL is also possible:

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

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

Be aware that if you are rendering using Chromium (as opposed to Chrome), the codec for MP4 videos is not included. Read the section on the <Video/ > page for more information.

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/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" />
  );
};

tsx
import { Audio } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <Audio src="https://file-examples.com/wp-content/uploads/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.