Skip to main content

TypeScript Types Reference

The following types are part of the API of @remotion/renderer:

Codec​

import type {Codec} from '@remotion/renderer';
              
(alias) type Codec = "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "h264-ts" | "gif"
import Codec

Refer to the Encoding guide for more information.

AudioCodec​

import type {AudioCodec} from '@remotion/renderer';
                 
(alias) type AudioCodec = "pcm-16" | "aac" | "mp3" | "opus"
import AudioCodec

Refer to the Encoding guide to see defaults and supported combinations.

VideoImageFormat​

import type {VideoImageFormat} from '@remotion/renderer';
                    
(alias) type VideoImageFormat = "png" | "jpeg" | "none"
import VideoImageFormat

StillImageFormat​

import type {StillImageFormat} from '@remotion/renderer';
                    
(alias) type StillImageFormat = "png" | "jpeg" | "pdf" | "webp"
import StillImageFormat

PixelFormat​

import type {PixelFormat} from '@remotion/renderer';
                 
(alias) type PixelFormat = "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le"
import PixelFormat

FrameRange​

import type {FrameRange} from '@remotion/renderer';
                 
(alias) type FrameRange = number | [number, number] | [number, null]
import FrameRange
  • A single number renders only that frame
  • A tuple [start, end] renders frames from start to end (inclusive)
  • A tuple [start, null] renders frames from start to the end of the compositionv4.0.421

Concurrency​

import type {Concurrency} from '@remotion/renderer';
                 
(alias) type Concurrency = string | number | null
import Concurrency

LogLevel​

import type {LogLevel} from '@remotion/renderer';
                
(alias) type LogLevel = "trace" | "verbose" | "info" | "warn" | "error"
import LogLevel

OpenGlRenderer​

import type {OpenGlRenderer} from '@remotion/renderer';
                   
(alias) type OpenGlRenderer = "swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl"
import OpenGlRenderer

ChromeMode​

import type {ChromeMode} from '@remotion/renderer';
                 
(alias) type ChromeMode = "headless-shell" | "chrome-for-testing"
import ChromeMode

ColorSpace​

import type {ColorSpace} from '@remotion/renderer';
                 
(alias) type ColorSpace = "default" | "bt601" | "bt709" | "bt2020-ncl"
import ColorSpace

X264Preset​

import type {X264Preset} from '@remotion/renderer';
                 
(alias) type X264Preset = "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow" | "placebo"
import X264Preset

Crf​

import type {Crf} from '@remotion/renderer';
             
(alias) type Crf = number | undefined
import Crf

Bitrate​

import type {Bitrate} from '@remotion/renderer';
               
(alias) type Bitrate = `${number}k` | `${number}K` | `${number}M`
import Bitrate

ChromiumOptions​

import type {ChromiumOptions} from '@remotion/renderer';
                   
(alias) type ChromiumOptions = {
    ignoreCertificateErrors?: boolean;
    disableWebSecurity?: boolean;
    gl?: ("swangle" | "angle" | "egl" | "swiftshader" | "vulkan" | "angle-egl") | null;
    userAgent?: string | null;
    enableMultiProcessOnLinux?: boolean;
    darkMode?: boolean;
} & {
    headless?: boolean;
}
import ChromiumOptions

OnStartData​

import type {OnStartData} from '@remotion/renderer';
                 
(alias) type OnStartData = {
    frameCount: number;
    parallelEncoding: boolean;
    resolvedConcurrency: number;
}
import OnStartData
  • frameCount: The number of frames that will be rendered
  • parallelEncoding: Whether parallel encoding is enabledv4.0.52
  • resolvedConcurrency: The concurrency that will be usedv4.0.180

RenderMediaOnProgress​

import type {RenderMediaOnProgress} from '@remotion/renderer';
                      
(alias) type RenderMediaOnProgress = (progress: {
    renderedFrames: number;
    encodedFrames: number;
    encodedDoneIn: number | null;
    renderedDoneIn: number | null;
    renderEstimatedTime: number;
    progress: number;
    stitchStage: StitchingState;
}) => void
import RenderMediaOnProgress

StitchingState​

import type {StitchingState} from '@remotion/renderer';
                   
(alias) type StitchingState = "encoding" | "muxing"
import StitchingState
  • encoding: Rendering frames and encoding into video
  • muxing: Encoding audio and combining it with video (only when parallel encoding is used)

SlowFrame​

import type {SlowFrame} from '@remotion/renderer';
                
(alias) type SlowFrame = {
    frame: number;
    time: number;
}
import SlowFrame

RenderMediaOnDownload​

import type {RenderMediaOnDownload} from '@remotion/renderer';
                      
(alias) type RenderMediaOnDownload = (src: string) => ((progress: {
    percent: number | null;
    downloaded: number;
    totalSize: number | null;
}) => void) | undefined | void
import RenderMediaOnDownload

BrowserLog​

import type {BrowserLog} from '@remotion/renderer';
                 
(alias) type BrowserLog = {
    text: string;
    stackTrace: ConsoleMessageLocation[];
    type: ConsoleMessageType;
}
import BrowserLog
  • type: The console.* method (log, warn, error, etc.)
  • text: The logged message
  • stackTrace: The stack trace of the log

FfmpegOverrideFn​

import type {FfmpegOverrideFn} from '@remotion/renderer';
                    
(alias) type FfmpegOverrideFn = (info: {
    type: "pre-stitcher" | "stitcher";
    args: string[];
}) => string[]
import FfmpegOverrideFn

OnArtifact​

import type {OnArtifact} from '@remotion/renderer';
                 
(alias) type OnArtifact = (asset: EmittedArtifact) => void
import OnArtifact

EmittedArtifact​

import type {EmittedArtifact} from '@remotion/renderer';
                   
(alias) type EmittedArtifact = {
    filename: string;
    content: string | Uint8Array;
    frame: number;
    downloadBehavior: DownloadBehavior | null;
}
import EmittedArtifact
  • filename: The name of the artifact file
  • content: The content of the artifact as a string or Uint8Array
  • frame: The frame number at which the artifact was emitted

OnBrowserDownload​

import type {OnBrowserDownload} from '@remotion/renderer';
                    
(alias) type OnBrowserDownload = (options: {
    chromeMode: ChromeMode;
}) => {
    onProgress: DownloadBrowserProgressFn;
    version: string | null;
}
import OnBrowserDownload

DownloadBrowserProgressFn​

import type {DownloadBrowserProgressFn} from '@remotion/renderer';
                        
(alias) type DownloadBrowserProgressFn = (progress: {
    alreadyAvailable: boolean;
    percent: number;
    downloadedBytes: number;
    totalSizeInBytes: number;
}) => void
import DownloadBrowserProgressFn

NumberOfGifLoops​

import type {NumberOfGifLoops} from '@remotion/renderer';
                    
(alias) type NumberOfGifLoops = number | null
import NumberOfGifLoops

RenderMediaOptions​

import type {RenderMediaOptions} from '@remotion/renderer';
                     
(alias) type RenderMediaOptions = {
    outputLocation?: string | null | undefined;
    codec: Codec;
    composition: VideoConfig;
    inputProps?: Record<string, unknown> | undefined;
    crf?: number | null | undefined;
    imageFormat?: VideoImageFormat | undefined;
    pixelFormat?: PixelFormat | undefined;
    envVariables?: Record<string, string> | undefined;
    quality?: never | undefined;
    jpegQuality?: number | undefined;
    frameRange?: (FrameRange | null) | undefined;
    everyNthFrame?: number | undefined;
    puppeteerInstance?: HeadlessBrowser | undefined;
    overwrite?: boolean | undefined;
    onProgress?: RenderMediaOnProgress | undefined;
    ... 26 more ...;
    isProduction?: boolean | undefined;
} & (({
    ...;
} | {
    ...;
}) & Partial<...>)
import RenderMediaOptions

RenderStillOptions​

import type {RenderStillOptions} from '@remotion/renderer';
                     
(alias) type RenderStillOptions = {
    port?: number | null;
    composition: VideoConfig;
    output?: string | null;
    frame?: number;
    inputProps?: Record<string, unknown>;
    imageFormat?: StillImageFormat;
    puppeteerInstance?: HeadlessBrowser;
    dumpBrowserLogs?: boolean;
    envVariables?: Record<string, string>;
    overwrite?: boolean;
    browserExecutable?: BrowserExecutable;
    onBrowserLog?: (log: BrowserLog) => void;
    chromiumOptions?: ChromiumOptions;
    ... 7 more ...;
    isProduction?: boolean;
} & Partial<...> & {
    ...;
}
import RenderStillOptions

RenderFramesOptions​

import type {RenderFramesOptions} from '@remotion/renderer';
                     
(alias) type RenderFramesOptions = {
    onStart: (data: OnStartData) => void;
    onFrameUpdate: (framesRendered: number, frameIndex: number, timeToRenderInMilliseconds: number) => void;
    outputDir: string | null;
    inputProps: Record<string, unknown>;
    envVariables?: Record<string, string> | undefined;
    imageFormat?: VideoImageFormat | undefined;
    quality?: never | undefined;
    frameRange?: (FrameRange | null) | undefined;
    everyNthFrame?: number | undefined;
    dumpBrowserLogs?: boolean | undefined;
    verbose?: boolean | undefined;
    puppeteerInstance?: HeadlessBrowser | undefined;
    ... 23 more ...;
    readonly imageSequencePattern?: string | ... 1 more ... | undefined;
}
import RenderFramesOptions

SelectCompositionOptions​

import type {SelectCompositionOptions} from '@remotion/renderer';
                        
(alias) type SelectCompositionOptions = {
    inputProps?: Record<string, unknown> | undefined;
    envVariables?: Record<string, string> | undefined;
    puppeteerInstance?: HeadlessBrowser | undefined;
    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
    browserExecutable?: BrowserExecutable | undefined;
    chromiumOptions?: ChromiumOptions | undefined;
    port?: number | null | undefined;
    verbose?: boolean | undefined;
    serveUrl: string;
    id: string;
    readonly mediaCacheSizeInBytes?: number | null | undefined;
    readonly offthreadVideoCacheSizeInBytes?: number | null | undefined;
    ... 5 more ...;
    readonly chromeMode?: "chrome-for-testing" | ... 1 more ... | undefined;
}
import SelectCompositionOptions