Skip to main content

Importing .srt or .vtt subtitles into Remotion

If you have an existing subtitle file, you can import it into Remotion using parseSrt() for .srt files or parseVtt() for WebVTT (.vtt) files from @remotion/captions.

Reading an .srt file​

Use staticFile() to reference an .srt file in your public folder, then fetch and parse it:

Importing captions from .srt
import {useState, useEffect, useCallback} from 'react';
import {staticFile, useDelayRender} from 'remotion';
import {parseSrt} from '@remotion/captions';
import type {Caption} from '@remotion/captions';

export const MyComponent: React.FC = () => {
  const [captions, setCaptions] = useState<Caption[] | null>(null);
  const {delayRender, continueRender, cancelRender} = useDelayRender();
  const [handle] = useState(() => delayRender());

  const fetchCaptions = useCallback(async () => {
    try {
      const response = await fetch(staticFile('subtitles.srt'));
      const text = await response.text();
      const {captions: parsed} = parseSrt({input: text});
      setCaptions(parsed);
      continueRender(handle);
    } catch (e) {
      cancelRender(e);
    }
  }, [continueRender, cancelRender, handle]);

  useEffect(() => {
    fetchCaptions();
  }, [fetchCaptions]);

  if (!captions) {
    return null;
  }

  return <>{/* Use captions here */}</>;
};

Alternatively, you can also fetch() a remote file via URL.

Reading a .vtt filev4.0.537​

Use the same loading pattern as above, replacing parseSrt() with parseVtt() and fetching your .vtt file:

Importing captions from .vtt
import {parseVtt} from '@remotion/captions';
import {staticFile} from 'remotion';

const response = await fetch(staticFile('subtitles.vtt'));
const text = await response.text();
const {captions} = parseVtt({input: text});

Using imported captions​

Once parsed, the captions are in the recommended Caption format and can be used with all @remotion/captions utilities.

Possible next steps:

See also​