VTT to SubRip (SRT) Subtitle Converter Specification

Overview

A high-performance, browser-based utility designed to transform WebVTT (.vtt) subtitle files into the SubRip (.srt) format. The application is built for video editors, content creators, and accessibility specialists who need a reliable, client-side conversion tool without the privacy risks of cloud-based converters.

Core Features

• Drag-and-Drop Processing: Users can drop a .vtt file onto the browser or paste raw VTT text directly into the input field.
• Intelligent Parsing: Automatically detects and removes the WEBVTT identifier, ignores standard VTT metadata, and reformats timestamp delimiters (e.g., converting '.' to ',' for SRT compatibility).
• Live Preview: Real-time side-by-side comparison of input (VTT) and output (SRT) text.
• Direct Download: A one-click download button that generates a downloadable .srt file using the Blob API.
• Copy-to-Clipboard: Quick button to copy processed text for integration into other applications.

UI/UX Design

• Aesthetic: A clean, airy "SaaS" interface using a high-contrast light mode palette. Focus on readability and minimal cognitive load.
• Color Palette:
  • Background: #ffffff (Primary White)
  • Surfaces: #f9fafb (Light Gray)
  • Accents: #2563eb (Primary Blue for Actions)
  • Text: #1f2937 (Dark Gray)
  • Borders: #e5e7eb (Neutral Border)
• Layout:
  • Header: Simple application title and brief 1-sentence instruction.
  • Main Area: Two-pane horizontal layout (mobile: stacked). Left side for VTT input, right side for SRT output.
  • Actions: A prominent "Convert" action strip separating input/output, featuring a secondary "Clear" button and primary "Download .srt" button.

Technical Implementation Constraints

• Single-File Requirement: All HTML, CSS, and Vanilla JavaScript must be contained in one file. Use CDN links for any required icons or fonts.
• In-Memory Logic: All processing occurs in browser RAM. No localStorage, sessionStorage, or cookies are permitted. If the user refreshes, data is cleared.
• Sandboxed Execution: The code must not attempt to open popups (alert, confirm). Use custom DOM-based modal elements for notifications.
• Accessibility: All interactive elements must have proper aria-labels and keyboard support.
• Performance: The converter logic must utilize regex parsing to handle large subtitle files efficiently without freezing the browser main thread.
• Responsive Strategy: Use CSS Flexbox/Grid for the split-pane design, stacking inputs vertically on viewports narrower than 768px.