Chapter 670: Displaying captions

Core Idea

This guide explains how to display captions in Remotion, assuming you already have captions in the Caption format - see Transcribing audio for how to generate them.

Key Concepts

• Fetching captions
• Creating pages
• Rendering with Sequences
• Rendering a caption page
• Full example
• Next steps
• See also

Code Examples

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('captions.json'));
      const data = await response.json();
      setCaptions(data);
      continueRender(handle);
    } catch (e) {
      cancelRender(e);
    }
  }, [continueRender, cancelRender, handle]);

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

  if (!captions) {
    return null;
  }

  return <AbsoluteFill>{/* Render captions here */}</AbsoluteFill>;
};

• What it demonstrates: Usage pattern for Displaying captions from the official docs.

Key Takeaways

1. Understand fetching captions when working with Displaying captions.
2. Understand creating pages when working with Displaying captions.
3. Understand rendering with sequences when working with Displaying captions.
4. Understand rendering a caption page when working with Displaying captions.
5. Understand full example when working with Displaying captions.

Connects To

• api: related page in the Captions (@remotion/captions) section.
• Caption: related page in the Captions (@remotion/captions) section.
• Create Tiktok Style Captions: related page in the Captions (@remotion/captions) section.