Skip to main content

Exporting subtitles

This guide covers different ways to export subtitles from your Remotion video.

Burned-in subtitles​

If you want the subtitles to be part of the video itself (burned in), follow the instructions in Displaying captions to render the captions, then simply render the video as usual.

bash
npx remotion render

Exporting as a separate .srt file​

To export subtitles as a separate .srt file, use the <Artifact> component together with serializeSrt().

Exporting captions as .srt
tsx
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  // Convert captions to SRT format
  // Each caption becomes its own line
  const srtContent = serializeSrt({
    lines: captions.map((caption) => [caption]),
  });
 
  return (
    <>
      {/* Only emit the artifact on the first frame */}
      {frame === 0 ? <Artifact filename="subtitles.srt" content={srtContent} /> : null}
      {/* Rest of your video content */}
    </>
  );
};

The artifact will be saved to out/[composition-id]/subtitles.srt when rendering.

Grouping words into lines​

If your captions are word-by-word, you may want to group multiple words into a single subtitle line. You can use createTikTokStyleCaptions() to create pages, then convert them back to the format expected by serializeSrt():

Grouping captions into lines
tsx
const {pages} = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 3000,
});
 
const srtContent = serializeSrt({
  lines: pages.map((page) => {
    // Convert page tokens back to Caption format
    return page.tokens.map((token) => ({
      text: token.text,
      startMs: token.fromMs,
      endMs: token.toMs,
      timestampMs: (token.fromMs + token.toMs) / 2,
      confidence: null,
    }));
  }),
});

See also​