Importing assets in Remotion

The public folder

Place assets in the public/ folder at your project root.

Using staticFile()

You MUST use staticFile() to reference files from the public/ folder:

  return ;
};

The function returns an encoded URL that works correctly when deploying to subdirectories.

Using with components

Images:

;

Videos:

;

Audio:

;

Fonts:

const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
await fontFamily.load();
document.fonts.add(fontFamily);

Remote URLs

Remote URLs can be used directly without staticFile():

Important notes

• Remotion components (, , ``) ensure assets are fully loaded before rendering
• Special characters in filenames (#, ?, &) are automatically encoded