YouTube Transcript Extractor

A simple web application to extract and display YouTube video transcripts with timestamps and export to Markdown.

Features

  • Extract transcripts from YouTube videos using video URLs
  • Display transcripts with proper timestamps
  • Export transcripts to Markdown format
  • Minimalistic, clean UI
  • Proper error handling for various edge cases

Project Structure

├── backend/
│   └── index.ts          # Main Hono server
├── frontend/
│   ├── index.html        # Main HTML template
│   ├── index.tsx         # React frontend
│   └── style.css         # Minimal styling
└── shared/
    └── types.ts          # Shared TypeScript types

Usage

  1. Enter a YouTube video URL (supports various formats: youtube.com/watch?v=, youtu.be/, etc.)
  2. Click "Extract Transcript"
  3. View the transcript with timestamps in MM:SS or HH:MM:SS format
  4. Export to Markdown file with formatted timestamps

Supported URL Formats

  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID
  • https://www.youtube.com/embed/VIDEO_ID
  • https://www.youtube.com/v/VIDEO_ID

Error Handling

  • Invalid YouTube URLs
  • Videos without available transcripts
  • Network connectivity issues
  • CORS proxy failures
  • Malformed transcript data

Technical Details

  • Uses YouTube's transcript API via corsproxy.io
  • Built with Hono backend and React frontend
  • TypeScript for type safety
  • Responsive design with mobile support
  • Client-side Markdown export functionality
  • Proper error boundaries and user feedback