1---
2name: import-srt-captions
3description: Importing .srt subtitle files into Remotion using @remotion/captions
4metadata:
5  tags: captions, subtitles, srt, import, parse
6---
7 
8# Importing .srt subtitles into Remotion
9 
10If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
11 
12If you don't have a .srt file, read [Transcribing audio](transcribe-captions.md) for how to generate captions instead.
13 
14## Prerequisites
15 
16First, the @remotion/captions package needs to be installed.
17If it is not installed, use the following command:
18 
19```bash
20npx remotion add @remotion/captions # If project uses npm
21bunx remotion add @remotion/captions # If project uses bun
22yarn remotion add @remotion/captions # If project uses yarn
23pnpm exec remotion add @remotion/captions # If project uses pnpm
24```
25 
26## Reading an .srt file
27 
28Use `staticFile()` to reference an `.srt` file in your `public` folder, then fetch and parse it:
29 
30```tsx
31import { useState, useEffect, useCallback } from "react";
32import { AbsoluteFill, staticFile, useDelayRender } from "remotion";
33import { parseSrt } from "@remotion/captions";
34import type { Caption } from "@remotion/captions";
35 
36export const MyComponent: React.FC = () => {
37  const [captions, setCaptions] = useState<Caption[] | null>(null);
38  const { delayRender, continueRender, cancelRender } = useDelayRender();
39  const [handle] = useState(() => delayRender());
40 
41  const fetchCaptions = useCallback(async () => {
42    try {
43      const response = await fetch(staticFile("subtitles.srt"));
44      const text = await response.text();
45      const { captions: parsed } = parseSrt({ input: text });
46      setCaptions(parsed);
47      continueRender(handle);
48    } catch (e) {
49      cancelRender(e);
50    }
51  }, [continueRender, cancelRender, handle]);
52 
53  useEffect(() => {
54    fetchCaptions();
55  }, [fetchCaptions]);
56 
57  if (!captions) {
58    return null;
59  }
60 
61  return <AbsoluteFill>{/* Use captions here */}</AbsoluteFill>;
62};
63```
64 
65Remote URLs are also supported - you can `fetch()` a remote file via URL instead of using `staticFile()`.
66 
67## Using imported captions
68 
69Once parsed, the captions are in the `Caption` format and can be used with all `@remotion/captions` utilities.
70