Importing assets

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

my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json

import {Img, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return ;
};

Using images

Use the `` tag from Remotion.

import {Img, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return ;
};

You can also pass a URL:

import {Img} from 'remotion';

export const MyComp: React.FC = () => {
  return ;
};

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.

my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json

import {Img, staticFile, useCurrentFrame} from 'remotion';

const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return ;
};

Using videos

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

import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('vid.webm')} />;
};

Loading videos via URL is also possible:

import {OffthreadVideo} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src="https://remotion.media/BigBuckBunny.mp4" />;
};

See also: Which video formats does Remotion support?

Using Audio

Use the <Html5Audio> component.

import {Html5Audio, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <Html5Audio src={staticFile('tune.mp3')} />;
};

Loading audio from an URL is also possible:

import {Html5Audio} from 'remotion';

export const MyComp: React.FC = () => {
  return <Html5Audio 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.

my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json

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:

import {Img} from 'remotion';
import logo from './logo.png';

export const MyComp: React.FC = () => {
  return ;
};

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 ``, <Video> and <Audio>

**Use [](/docs/img) or [`<Gif />`](/docs/gif)** over the native tag, <Image> from Next.js and CSS background-image.
Use <OffthreadVideo />, <Video /> or <Html5Video /> over the native <video> tag.
Use <Audio /> or <Html5Audio /> over the native <audio> tag.
Use <IFrame /> over the native <iframe> tag.

By using the components from Remotion, you ensure that:

<Step>1</Step> The assets are fully loaded before the the frame is rendered

<Step>2</Step> The images and videos are synchronized with Remotion's timeline.

See also

• staticFile()
• getStaticFiles()
• watchStaticFile()
• Why Remotion does not support absolute paths