The software I work on allows users to design video clips in the browser. Users can combine video clips with captions and other elements into multiple scenes, which we render to a rasterised video.

This means we need to keep different forms of playable media in sync over time, while playing, seeking, and scrubbing in the designer UI, as well as during rendering. My talk will cover how we implemented our time state tracking in React, including: • Embracing the concept of “derived state” for reliable, deterministic rendering • Optimising performance through various techniques • How to test time-based state (or, how to time-travel in your tests) • How to sync various types of media (videos, captions, etc) with a single source of truth This will help anyone, who wants to build a video editor and/or rendering system in the browser, set up a solid foundation for handling time in their UI. Presented at Demuxed 2021.