Transform YouTube Lectures, Tutorials, and Keynotes into crisp, searchable, and professional PDF study guides.
Watching 2-hour university lectures, deep-dive tech tutorials, or conference keynotes often leaves students and engineers with messy notes, disjointed screenshots, or unformatted text dumps.
TubeNotes was built to turn passive video watching into active, structured knowledge retention:
- Interactive Timeline: Scrub and sync transcripts with the video player in real time.
- Smart Slide Capture: Grab visual diagrams, slide decks, and whiteboard moments straight into note cards.
- Vector-Grade Output: Instead of blurry canvas screenshots, TubeNotes compiles real selectable text with auto-pagination, headers, and theme styling.
- ⚡ Native Vector PDF Engine: Generates 100% searchable, copy-pasteable vector PDFs directly using
jsPDF. Crystal-clear typography at any zoom level with ultra-compact file sizes (~70KB–150KB). - 🎯 Dual Engine Options:
- Native Vector PDF (Recommended): Ultra-fast (<200ms), crisp text, dynamic headers, footers, and page numbers.
- Visual Canvas Snapshot (Legacy): Renders exact browser DOM styling via
html2canvas.
- ⏱️ Interactive Transcript Timeline: Automatically fetches timecoded YouTube transcripts. Jump to any point in the video by clicking on a subtitle row.
- 📸 Video Slide Capture: Capture slide frames directly into your notes cards and embed them into the generated PDF.
- 🎨 Multiple Design Themes:
- Academic: Clean editorial navy with serif accents for scholarly research notes.
- Digital Dark: Modern slate aesthetic for technical guides.
- Minimalist: Clean monochrome layout for executive briefs.
- 🛡️ Resilient Backend & Fallback:
- Robust subtitle extraction via
youtube-transcriptwith automatic language fallback. - Manual transcript import with one-click auto-segmentation when captions are disabled.
- Robust subtitle extraction via
- Frontend: React 19, Vite, Lucide Icons, CSS3 Glassmorphism
- Backend: Node.js, Express, Axios,
youtube-transcript - PDF Engines:
jsPDF(Vector Engine),html2canvas(Canvas Snapshot)
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/PrinceBad/TubeNotes.git cd TubeNotes -
Install dependencies:
npm install
-
Start development server (concurrently runs frontend on port 5173 and backend on port 3001):
npm run dev
-
Build for production:
npm run build
This project is intended strictly for personal, educational, and fair-use archiving purposes. Users are responsible for complying with YouTube's Terms of Service and respecting content creators' copyrights.
MIT License. Copyright (c) 2026 Prince Badsiwal. See LICENSE for details.