🎵 VTT Editor Pro v3.1

🚀 Try it online → https://rdtvlokip.github.io/vtt-editor-pro/vtt-editor-pro-v3.1.html

A modern, lightweight, and powerful WebVTT subtitle editor that runs entirely in your browser. No installation, no signup, no cloud dependencies – just one HTML file.

Clean starting point:

In action with live preview:

✨ Features

🎨 Modern Interface

• Clean, themed UI with 5 color themes
• Color-coded regions for easy organization
• Real-time waveform visualization
• Responsive timeline with zoom controls
• Minimap for global timeline overview
• Enhanced visual resize handles with real-time tooltips

⚡ Powerful Editing

• Drag & Drop: Move and resize regions directly on the timeline
• Visual Resize Handles: See exact timestamps while resizing regions
• Snap-to-Grid: Align regions precisely with configurable intervals (10ms to 1s)
• Split & Merge: Divide cues or combine consecutive ones
• Shift All Timings: Offset all cues by ±X seconds
• Batch Text Editing: Transform multiple cues at once with Find & Replace
• Anti-overlap Enforcement: Optional feature to prevent subtitle collisions
• Live Preview: Scrolling lyrics display synchronized with playback
• Auto-save: Your work is saved every 5 seconds (localStorage)

🎯 Workflow Optimized

• Import MP3/audio files directly
• Import/Export VTT, SRT, ASS, SBV, DFXP, JSON formats
• Real-time cue search and filtering
• Keyboard shortcuts for rapid editing
• Precise timestamp control with snap-to-grid
• Visual waveform for accurate timing
• Undo/Redo with 20-step history

🚀 Technical Highlights

• 7200+ lines of vanilla JavaScript – no frameworks
• ~200 MB RAM usage
• Offline-first: Works without internet connection
• Single file: Just download and open in your browser
• Zero external dependencies (except WaveSurfer.js CDN)
• Support for 1000+ cues and markers without lag

🆕 What's New in v3.1

📋 Copy / Paste Cues

Duplicate a cue in seconds.

Features:

• Copy the selected cue with Ctrl+C
• Paste it at the playhead with Ctrl+V (keeps text, color and duration)
• Overlap-aware: respects the Allow Overlap setting

⏱️ Go to Time

Jump straight to a precise timestamp.

Features:

• Accepts MM:SS.mmm, HH:MM:SS.mmm or raw seconds
• Press G to focus the field instantly

⌨️ Customizable Keyboard Shortcuts

Make the editor yours.

Features:

• New ⌨️ Shortcuts panel listing every action
• Click a shortcut, then press the new key combo to rebind it
• Duplicate-binding protection and one-click Reset to defaults
• Saved to localStorage across sessions

🗂️ Batch Export – All Tracks at Once

Export every track in a single click.

Features:

• New All Tracks (.zip) entry in the Export menu
• Bundles one .vtt per non-empty track into a single .zip
• Built-in ZIP writer — no extra dependency, fully offline

🔍 Ctrl + Scroll Zoom

Zoom the waveform naturally with Ctrl + mouse wheel — no more hunting for the zoom buttons.

⏸️ Auto-Pause on Edit

Playback pauses automatically when you start editing a cue, so the audio doesn't run away while you type. Toggle it from the top bar.

📜 Looking for older releases (v3.0, v2.2, v2.1)? See the full CHANGELOG.md.

📦 Installation

Option 1: Direct Download (Recommended)

1. Download vtt-editor-pro-v3.1.html
2. Double-click to open in your browser
3. Start editing!

Option 2: Use Online Version

Visit: https://rdtvlokip.github.io/vtt-editor-pro/vtt-editor-pro-v3.1.html

Option 3: Local Server

# Clone the repository
git clone https://github.com/RDTvlokip/vtt-editor-pro.git
cd vtt-editor-pro

# Open with a local server (optional)
python -m http.server 8000
# Navigate to http://localhost:8000/vtt-editor-pro-v3.1.html

🎯 Quick Start

1. Import Audio: Click 📂 Import MP3 to load your audio file
2. Add Regions: Click ➕ Add Region or drag on the timeline
3. Enable Snap Grid (optional): Toggle 🧲 Snap Grid and select interval
4. Edit Text: Type your subtitles in the text field
5. Adjust Timing: Drag region edges or use Start/End fields
6. Use Search: Find specific cues with the search box
7. Check Stats: Click 📊 Stats to view validation
8. Choose Theme: Select your preferred color theme
9. Export: Click 💾 Export and choose your format

⌨️ Keyboard Shortcuts

💡 All shortcuts are customizable — open the ⌨️ Shortcuts panel to rebind any of them. Defaults below.

🖱️ Tip: Hold Ctrl and scroll over the waveform to zoom in/out.

🎨 Usage Tips

Working with Multiple Tracks

1. Create new track: Click 🎬 Tracks
2. Name your track (EN, FR, Music, etc)
3. Edit independently
4. Export all tracks at once with 💾 Export → 🗂️ All Tracks (.zip)
5. Merge tracks in final video editor

Using the Validation System

1. Click 📊 Stats to open statistics panel
2. Review validation warnings and errors
3. Click on any issue to jump to that cue
4. Fix timing or text issues
5. Re-check until all green

Efficient Editing Workflow

1. Import audio and create rough cues
2. Use Shift All Timings to sync with audio
3. Use Split Cue for long segments
4. Use Merge Cues for fragmented text
5. Run validation check
6. Export in desired format

Using Search Effectively

1. Type in the search box to filter cues
2. See highlighted matches
3. Click cue to jump and edit
4. Clear search to see all cues

📚 Advanced Features

Multi-Track Management

• Independent timelines per track
• Sync control to keep tracks aligned
• Track visibility toggle
• Export flexibility (individual or combined)

Marker System

• Visual bookmarks on waveform
• Custom labels for organization
• Color coding for different marker types
• Quick navigation between markers
• Performance optimized for 1000+ markers

Format Support

Auto-save System

• Saves every 5 seconds to localStorage
• Restores on page reload with confirmation prompt
• Works offline – no cloud required
• Clear with browser cache if needed

Undo/Redo System

• 20-step history
• Works with all operations (add, edit, delete, batch, shift, split, merge)
• Keyboard shortcuts: Ctrl+Z (undo), Ctrl+Y (redo)
• Visual button feedback (disabled when at history limit)

🗺️ Roadmap

✅ v2.1 (Released)

• [x] Visual resize handles with tooltips
• [x] Snap-to-grid alignment
• [x] Batch text editing

✅ v2.2 (Released)

• [x] Multi-Track Subtitle Support
• [x] Waveform Markers/Bookmarks
• [x] SRT Export/Import
• [x] Current Time Update
• [x] VTT Import Validation
• [x] Keyboard Shortcut Conflict Resolution
• [x] Waveform Color Update
• [x] Color Persistence in VTT

✅ v3.0 (Released)

• [x] Export to ASS, SBV, DFXP, JSON formats
• [x] Import from ASS, SBV, DFXP, JSON formats
• [x] Theme system (5 themes)
• [x] Advanced editing (Split, Merge, Shift)
• [x] Real-time cue search
• [x] Statistics panel with validation
• [x] Editable markers with labels
• [x] Minimap timeline view
• [x] Enhanced dropdown UI

✅ v3.1 (Released)

• [x] Copy/Paste cues (Ctrl+C / Ctrl+V)
• [x] Go to time – Jump to precise timestamp
• [x] Customizable keyboard shortcuts UI
• [x] Batch export – all tracks at once (single .zip)
• [x] Ctrl+Scroll waveform zoom
• [x] Auto-pause on edit

v3.2 (Planned)

• [ ] Loop a region – repeat a segment on loop to nail the timing (highly requested)
• [ ] Insert-cue shortcut – add a cue at the current position without using the button
• [ ] Video preview – accept MP4 video alongside MP3, with subtitles overlaid on the video

Future Ideas (Under Consideration)

• [ ] Whisper API integration for auto-transcription
• [ ] Electron app with offline Whisper
• [ ] Local model support (tiny/base/small/medium)
• [ ] Native FFMPEG integration
• [ ] GPU acceleration for faster processing

🤝 Contributing

Contributions are welcome! This project is actively maintained.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Keep it vanilla JS (no frameworks)
• Maintain single-file architecture
• Write clear comments for complex logic
• Test in Chrome, Firefox, and Safari
• Follow existing code style

Reporting Issues

Found a bug or have a suggestion? Open an issue

Please include:

• Browser version
• Steps to reproduce
• Expected vs actual behavior
• Screenshots if applicable

🔧 Technical Details

Architecture

• Single HTML file: All CSS, JS, and HTML in one file (7200+ lines)
• Vanilla JavaScript: No build tools, no frameworks
• WaveSurfer.js v7: Waveform visualization and audio playback
• localStorage: Client-side persistence

Performance

• Load time: <5ms (scripting only)
• Memory usage: ~200 MB (depends on audio file size)
• Max cues tested: 1000+ without performance issues
• Max markers tested: 1000+ without lag
• Audio formats: MP3, WAV, OGG, M4A, AAC

Browser Compatibility

📄 License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0) - see the LICENSE.md file for details.

You are free to:

• ✅ Share: Copy and redistribute in any medium or format
• ✅ Adapt: Remix, transform, and build upon the material

Under these terms:

• 📝 Attribution: Give appropriate credit to the original author
• 🚫 NonCommercial: Not for commercial use without permission

Commercial use requires explicit permission. Contact me for licensing inquiries.

🙏 Acknowledgments

• WaveSurfer.js - Audio waveform visualization library
• Inspired by Aegisub, but built for the modern web
• Community feedback from subtitle editors and content creators

👤 Author

RDTvlokip (Théo)

• 🧬 Creator of AG-BPE (Attention-Guided Byte Pair Encoding)
• 🤖 Developer of InfiniGPT model family
• 🎓 TSSR Student specializing in Network Administration
• 🔗 GitHub: @RDTvlokip

☕ Support

If VTT Editor Pro helps you, consider supporting the project:

Your support helps maintain and improve this tool!

📊 Stats

Built with ❤️ using vanilla JavaScript

🐛 Report Bug • ✨ Request Feature • 📖 Documentation

🌟 Star History

If you find this project useful, please consider giving it a ⭐ on GitHub!