Skip to content

Sec-ant/subtitle-editor

 
 

Repository files navigation

subtitle-editor.org

Design principles

  • Permanently free and open-source under MIT license
  • Fully web-based, no download or installation required
  • No account signup or login required, edit subtitles directly in the landing page
  • Front-end only with zero backend, thus fully extensible and can be plugged in to a custom backend
  • Minimalist UX

I talked about my design principles in the FAQ and this issue.

Features

  • Multi-track editing
  • Waveform visualization
  • Localization
  • .srt / .vtt format support

Tech stacks

  • NextJS 15 + React 19
  • shadcn + radix-ui + Tailwind CSS
  • wavesurfer.js
  • react-player
  • Tabler icons
  • Motion

Local Development

Setup

git clone https://github.com/laufei/subtitle-editor.git
cd subtitle-editor
npm install
# Run the development server with Turbopack.
npm run dev
# Create a production build and type-check.
npm run build
# Serve the pre-built app.
npm run start

Project Structure

  • app/ – Next.js 15 routing, including the localized editor in app/[locale]/ and static pages such as app/faq.
  • components/ – UI building blocks, with components/ui/ holding shadcn-based primitives and domain widgets like subtitle-list.tsx.
  • context/ – Global state, including the undoable subtitle store.
  • hooks/ – Reusable client hooks (use-undoable-state, toast helpers).
  • lib/ – Pure utilities for parsing SRT/VTT, time conversions, and locale helpers.
  • messages/ – Per-locale translation catalogs consumed by next-intl.
  • tests/ – Node-based unit tests plus fixtures in tests/fixtures/.
  • public/ – Static assets (icons, favicons, etc.).

Testing

npm test                # Run the entire suite
npm test -- parse-vtt.test.ts  # Focus on a single file

Tests rely on Node’s built-in node:test runner and cover parsing, time conversions, and multi-track behavior. Add fixtures under tests/fixtures/ when validating new subtitle edge cases.

Internationalization

Locales are configured in lib/locales.ts. Add new locales by extending the locales array, providing metadata, creating a messages/<locale>.json file, and translating keys surfaced in app/[locale]/page.tsx. Middleware routes traffic based on locale prefixes while defaulting to English.

Contributing

I will check issues and accept PRs regularly, but I am quite busy these days so I may not have time to develop new features. This is a community project and your contributions are always welcomed!

License

Released under the MIT License. See LICENSE for details.

About

Free, open-sourced, fully-web srt editor. No account registration required.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.2%
  • CSS 1.7%
  • JavaScript 0.1%