SubSync — Next.js SRT Subtitle Resync Tool

Fix audio/subtitle sync delays by shifting .srt timestamps visually.

Quick start

npm install
npm run dev

Then open http://localhost:3000.

Features

• Drag-and-drop.srt file loading
• Visual offset control — slider (±30s), step buttons, quick presets, manual ms input
• Split preview — original vs shifted timestamps side-by-side
• Inline text editing — click any entry to fix subtitle text
• FPS conversion — rescale all timestamps across frame rates (23.976 → 25fps etc.)
• Undo stack — up to 50 steps, Ctrl+Z
• Search — filter entries by text with highlight
• Smart download — filename encodes the applied offset

Keyboard shortcuts

Key	Action
← / →	Nudge offset ±500ms
Ctrl+Z	Undo last change
Ctrl+S	Download resynced .srt

Project structure

src/
app/
layout.tsx # Root layout, font loading
page.tsx # Main page, composes all components
globals.css # Design tokens (CSS variables)
page.module.css # Page-level layout styles
components/
DropZone.tsx # File upload with drag-and-drop
OffsetControls.tsx # Slider, presets, FPS converter, actions
EntryList.tsx # Virtualisation-ready subtitle list with inline editing
Toast.tsx # Notification toasts
lib/
srt.ts # SRT parser, serialiser, FPS converter, timestamp utils
useSubSync.ts # All app state via useReducer + history stack

Build for production

npm run build
npm start

Or deploy to Vercel with zero config.