\n \n\n",[],[183,190],{"_104":199,"_95":200,"_154":201,"_156":184,"_157":139,"_158":202,"_160":22,"_106":203,"_100":204,"_163":205,"_165":206,"_166":22,"_167":-5,"_168":207,"_98":208},"71f51eda-3d7a-11f0-af97-76b3cceeab13","index.tsx","db5a3e74-3d79-11f0-86e9-76b3cceeab13",20,["D",1748625655559],10,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport type { TranscriptResponse, TranscriptEntry } from \"../shared/types.ts\";\n\ninterface AppState {\n url: string;\n loading: boolean;\n error: string | null;\n transcript: TranscriptEntry[] | null;\n title: string | null;\n videoId: string | null;\n copySuccess: boolean;\n}\n\nfunction formatTimestamp(seconds: number): string {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const secs = Math.floor(seconds % 60);\n \n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n }\n return `${minutes}:${secs.toString().padStart(2, '0')}`;\n}\n\nfunction extractVideoId(url: string): string | null {\n const patterns = [\n /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([^&\\n?#]+)/,\n /youtube\\.com\\/v\\/([^&\\n?#]+)/,\n /youtube\\.com\\/watch\\?.*v=([^&\\n?#]+)/\n ];\n \n for (const pattern of patterns) {\n const match = url.match(pattern);\n if (match) {\n return match[1];\n }\n }\n \n return null;\n}\n\nfunction copyToMarkdown(transcript: TranscriptEntry[], title: string): string {\n let markdown = `# ${title}\\n\\n`;\n \n for (const entry of transcript) {\n const timestamp = formatTimestamp(entry.start);\n markdown += `**[${timestamp}]** ${entry.text}\\n\\n`;\n }\n \n return markdown;\n}\n\nfunction exportToMarkdown(transcript: TranscriptEntry[], title: string): void {\n const markdown = copyToMarkdown(transcript, title);\n const blob = new Blob([markdown], { type: 'text/markdown' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_transcript.md`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n}\n\nfunction App() {\n const [state, setState] = useState({\n url: '',\n loading: false,\n error: null,\n transcript: null,\n title: null,\n videoId: null,\n copySuccess: false\n });\n\n const handleExtract = async () => {\n if (!state.url.trim()) {\n setState(prev => ({ ...prev, error: 'Please enter a YouTube URL' }));\n return;\n }\n\n setState(prev => ({ \n ...prev, \n loading: true, \n error: null, \n transcript: null, \n title: null,\n videoId: null,\n copySuccess: false\n }));\n\n try {\n const response = await fetch('/api/transcript', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ url: state.url.trim() }),\n });\n\n const data: TranscriptResponse = await response.json();\n\n if (data.success && data.transcript) {\n const videoId = extractVideoId(state.url.trim());\n setState(prev => ({\n ...prev,\n loading: false,\n transcript: data.transcript!,\n title: data.title || 'Unknown Title',\n videoId: videoId,\n error: null\n }));\n } else {\n setState(prev => ({\n ...prev,\n loading: false,\n error: data.error || 'Failed to extract transcript'\n }));\n }\n } catch (error) {\n setState(prev => ({\n ...prev,\n loading: false,\n error: 'Network error. Please check your connection and try again.'\n }));\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !state.loading) {\n handleExtract();\n }\n };\n\n const handleCopy = async () => {\n if (state.transcript && state.title) {\n try {\n const markdown = copyToMarkdown(state.transcript, state.title);\n await navigator.clipboard.writeText(markdown);\n setState(prev => ({ ...prev, copySuccess: true }));\n setTimeout(() => {\n setState(prev => ({ ...prev, copySuccess: false }));\n }, 2000);\n } catch (error) {\n console.error('Failed to copy to clipboard:', error);\n }\n }\n };\n\n const handleTimestampClick = (timestamp: number) => {\n if (state.videoId) {\n const url = `https://www.youtube.com/watch?v=${state.videoId}&t=${Math.floor(timestamp)}s`;\n window.open(url, '_blank');\n }\n };\n\n const handleExport = () => {\n if (state.transcript && state.title) {\n exportToMarkdown(state.transcript, state.title);\n }\n };\n\n return (\n

YouTube Transcript Extractor

Extract and export video transcripts with timestamps

\n\n

\n setState(prev => ({ ...prev, url: e.target.value, error: null, copySuccess: false }))}\n onKeyPress={handleKeyPress}\n disabled={state.loading}\n />\n \n {state.loading ? 'Extracting...' : 'Extract Transcript'}\n \n

\n\n {state.error && (\n

\n {state.error}\n

\n )}\n

\n\n {state.loading && (\n

Extracting transcript... This may take a few moments.

\n )}\n\n {state.transcript && state.title && (\n

{state.title}

\n \n \n

\n {state.transcript.map((entry, index) => (\n

\n handleTimestampClick(entry.start)}\n title=\"Click to open video at this timestamp\"\n >\n {formatTimestamp(entry.start)}\n \n \n {entry.text}\n \n

\n ))}\n

\n )}\n

\n );\n}\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[183,200],{"_104":210,"_95":211,"_154":212,"_156":184,"_157":139,"_158":213,"_160":161,"_106":214,"_100":175,"_163":194,"_165":215,"_166":22,"_167":-5,"_168":216,"_98":217},"82e4beee-3d7a-11f0-8851-76b3cceeab13","style.css","cc4da4de-3d79-11f0-a2fb-76b3cceeab13",23,["D",1748625683972],"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: #333;\n background: #f8f9fa;\n}\n\n.container {\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem 1rem;\n}\n\n.header {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.header h1 {\n font-size: 2rem;\n font-weight: 600;\n color: #2c3e50;\n margin-bottom: 0.5rem;\n}\n\n.header p {\n color: #6c757d;\n font-size: 1rem;\n}\n\n.input-section {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n margin-bottom: 2rem;\n}\n\n.input-group {\n display: flex;\n gap: 0.75rem;\n margin-bottom: 1rem;\n}\n\n.url-input {\n flex: 1;\n padding: 0.75rem;\n border: 2px solid #e9ecef;\n border-radius: 6px;\n font-size: 1rem;\n transition: border-color 0.2s;\n}\n\n.url-input:focus {\n outline: none;\n border-color: #007bff;\n}\n\n.extract-btn {\n padding: 0.75rem 1.5rem;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n white-space: nowrap;\n}\n\n.extract-btn:hover:not(:disabled) {\n background: #0056b3;\n}\n\n.extract-btn:disabled {\n background: #6c757d;\n cursor: not-allowed;\n}\n\n.error {\n background: #f8d7da;\n color: #721c24;\n padding: 0.75rem;\n border-radius: 6px;\n border: 1px solid #f5c6cb;\n}\n\n.loading {\n text-align: center;\n padding: 2rem;\n color: #6c757d;\n}\n\n.transcript-section {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n\n.transcript-header {\n padding: 1.5rem;\n border-bottom: 1px solid #e9ecef;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n.button-group {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.copy-btn {\n padding: 0.5rem 1rem;\n background: #6f42c1;\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 0.9rem;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 120px;\n}\n\n.copy-btn:hover {\n background: #5a2d91;\n}\n\n.copy-btn.copy-success {\n background: #28a745;\n}\n\n.copy-btn.copy-success:hover {\n background: #28a745;\n}\n\n.transcript-title {\n font-size: 1.25rem;\n font-weight: 600;\n color: #2c3e50;\n margin: 0;\n}\n\n.export-btn {\n padding: 0.5rem 1rem;\n background: #28a745;\n color: white;\n border: none;\n border-radius: 6px;\n font-size: 0.9rem;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.export-btn:hover {\n background: #1e7e34;\n}\n\n.transcript-content {\n max-height: 600px;\n overflow-y: auto;\n padding: 1rem;\n}\n\n.transcript-entry {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n padding: 0.75rem;\n border-radius: 6px;\n transition: background-color 0.2s;\n}\n\n.transcript-entry:hover {\n background: #f8f9fa;\n}\n\n.timestamp {\n font-family: 'Monaco', 'Menlo', monospace;\n font-size: 0.85rem;\n color: #007bff;\n font-weight: 500;\n min-width: 60px;\n flex-shrink: 0;\n}\n\n.timestamp.clickable {\n cursor: pointer;\n text-decoration: underline;\n transition: all 0.2s;\n}\n\n.timestamp.clickable:hover {\n color: #0056b3;\n background: rgba(0, 123, 255, 0.1);\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n margin: -0.25rem -0.5rem;\n}\n\n.transcript-text {\n flex: 1;\n line-height: 1.5;\n}\n\n@media (max-width: 640px) {\n .input-group {\n flex-direction: column;\n }\n \n .transcript-header {\n flex-direction: column;\n align-items: stretch;\n }\n \n .button-group {\n justify-content: stretch;\n }\n \n .button-group button {\n flex: 1;\n }\n \n .transcript-entry {\n flex-direction: column;\n gap: 0.5rem;\n }\n \n .timestamp {\n min-width: auto;\n }\n \n .timestamp.clickable:hover {\n margin: 0;\n padding: 0.25rem 0;\n }\n}",[],[183,211],[183],{"_104":220,"_95":221,"_154":222,"_156":-5,"_157":139,"_158":175,"_160":161,"_106":223,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":224,"_98":235},"b347dcfc-3d79-11f0-ac8c-76b3cceeab13","shared","1ece3b1a-751b-4a11-b637-51574120a72d",["D",1748625335656],[225],{"_104":226,"_95":227,"_154":228,"_156":222,"_157":139,"_158":229,"_160":161,"_106":230,"_100":231,"_163":205,"_165":232,"_166":22,"_167":-5,"_168":233,"_98":234},"861c22c8-3d7a-11f0-a124-76b3cceeab13","types.ts","b347b8e4-3d79-11f0-ac8c-76b3cceeab13",24,["D",1748625689367],1,"export interface TranscriptEntry {\n text: string;\n start: number;\n duration: number;\n}\n\nexport interface TranscriptResponse {\n success: boolean;\n transcript?: TranscriptEntry[];\n error?: string;\n title?: string;\n videoId?: string;\n}\n\nexport interface VideoInfo {\n videoId: string;\n title?: string;\n}",[],[221,227],[221],{"_104":237,"_95":238,"_154":239,"_156":-5,"_157":139,"_158":204,"_160":161,"_106":240,"_100":231,"_163":194,"_165":241,"_166":22,"_167":-5,"_168":242,"_98":243},"f7a40416-3d79-11f0-89c0-76b3cceeab13","README.md","b126b60a-3d79-11f0-ad70-76b3cceeab13",["D",1748625450344],"# YouTube Transcript Extractor\n\nA simple web application to extract and display YouTube video transcripts with timestamps and export to Markdown.\n\n## Features\n\n- Extract transcripts from YouTube videos using video URLs\n- Display transcripts with proper timestamps\n- Export transcripts to Markdown format\n- Minimalistic, clean UI\n- Proper error handling for various edge cases\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React frontend\n│ └── style.css # Minimal styling\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Usage\n\n1. Enter a YouTube video URL (supports various formats: youtube.com/watch?v=, youtu.be/, etc.)\n2. Click \"Extract Transcript\" \n3. View the transcript with timestamps in MM:SS or HH:MM:SS format\n4. Export to Markdown file with formatted timestamps\n\n## Supported URL Formats\n\n- `https://www.youtube.com/watch?v=VIDEO_ID`\n- `https://youtu.be/VIDEO_ID`\n- `https://www.youtube.com/embed/VIDEO_ID`\n- `https://www.youtube.com/v/VIDEO_ID`\n\n## Error Handling\n\n- Invalid YouTube URLs\n- Videos without available transcripts\n- Network connectivity issues\n- CORS proxy failures\n- Malformed transcript data\n\n## Technical Details\n\n- Uses YouTube's transcript API via corsproxy.io\n- Built with Hono backend and React frontend\n- TypeScript for type safety\n- Responsive design with mobile support\n- Client-side Markdown export functionality\n- Proper error boundaries and user feedback",[],[238],{"_104":245,"_95":246,"_154":247,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":248,"_100":32,"_163":205,"_165":72,"_166":22,"_167":-5,"_168":249,"_98":250},"65b60db0-3d79-11f0-80c8-76b3cceeab13","main.tsx","65b60e64-3d79-11f0-80c8-76b3cceeab13",["D",1748625205515],[],[246],"files",[151,170,181,188,198,209,219,225,236,244],"counts",{"_255":32,"_256":231,"_257":32,"_258":259},"pulls","branches","forks","envVars",{"_260":32,"_261":32},"count","emptyCount","contents",[],{"_104":171,"_157":139,"_154":173,"_95":172,"_165":177,"_163":176,"_100":175,"_156":155,"_106":265,"_158":101,"_167":96,"_98":266},["D",1748625693285],[153,172],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":275,"_149":280,"_251":311,"_194":312,"_262":315,"_316":-5,"_317":-5,"_318":-5,"_319":-5,"_320":321},{"_104":105,"_95":96,"_106":276,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":277,"_133":278,"_136":279,"_148":22},["D",1748625205501],{"_93":94,"_131":132},{"_93":94,"_135":132,"_14":114},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[281,287,299,305,308],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":282,"_98":286},[283],{"_104":171,"_95":172,"_154":173,"_156":155,"_157":139,"_158":101,"_160":161,"_106":174,"_100":175,"_163":176,"_165":177,"_166":22,"_167":96,"_168":284,"_98":285},[],[153,172],[153],{"_104":182,"_95":183,"_154":184,"_156":-5,"_157":139,"_158":185,"_160":161,"_106":186,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":288,"_98":298},[289,292,295],{"_104":189,"_95":190,"_154":191,"_156":184,"_157":139,"_158":192,"_160":161,"_106":193,"_100":32,"_163":194,"_165":195,"_166":22,"_167":-5,"_168":290,"_98":291},[],[183,190],{"_104":199,"_95":200,"_154":201,"_156":184,"_157":139,"_158":202,"_160":22,"_106":203,"_100":204,"_163":205,"_165":206,"_166":22,"_167":-5,"_168":293,"_98":294},[],[183,200],{"_104":210,"_95":211,"_154":212,"_156":184,"_157":139,"_158":213,"_160":161,"_106":214,"_100":175,"_163":194,"_165":215,"_166":22,"_167":-5,"_168":296,"_98":297},[],[183,211],[183],{"_104":220,"_95":221,"_154":222,"_156":-5,"_157":139,"_158":175,"_160":161,"_106":223,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":300,"_98":304},[301],{"_104":226,"_95":227,"_154":228,"_156":222,"_157":139,"_158":229,"_160":161,"_106":230,"_100":231,"_163":205,"_165":232,"_166":22,"_167":-5,"_168":302,"_98":303},[],[221,227],[221],{"_104":237,"_95":238,"_154":239,"_156":-5,"_157":139,"_158":204,"_160":161,"_106":240,"_100":231,"_163":194,"_165":241,"_166":22,"_167":-5,"_168":306,"_98":307},[],[238],{"_104":245,"_95":246,"_154":247,"_156":-5,"_157":139,"_158":231,"_160":22,"_106":248,"_100":32,"_163":205,"_165":72,"_166":22,"_167":-5,"_168":309,"_98":310},[],[246],[281,283,287,289,292,295,299,301,305,308],{"_104":171,"_157":139,"_154":173,"_95":172,"_165":177,"_163":176,"_100":175,"_156":155,"_106":313,"_158":101,"_167":96,"_98":314},["D",1748625693285],[153,172],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

nbbaier

yt-transcript