Project
Roulette

Subtitle Editor

Type the caption, nudge the timing, watch it land on the frame.

IntermediateWeb appMedia12–26hAI-buildable 3/5no setup

Edit subtitles against a playing video: a cue list synced to the timeline, drag to adjust timing, and live preview. Enforcing readability rules — minimum duration, maximum characters per line, no overlapping cues — is what makes it a real tool.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Load a video and an existing subtitle file, or start fresh
  • A cue list shows text with start and end times
  • The active cue highlights as the video plays
  • Cue timings adjust by dragging on a timeline
  • Cues that overlap or are too short are flagged
  • Characters per line and reading speed warnings
  • Export as SRT or WebVTT

The interesting part

  • Parsing and writing timestamp formats exactly
  • Keeping the cue list scrolled to the active cue without fighting the user
  • Preventing overlaps while allowing quick sequential edits

Once it works

  • Add waveform display to align cues to speech
  • Add a shift-all-timings control for sync offsets
  • Add translation mode showing source and target side by side

Suggested stack

reacttypescripttailwind

Track it