Pull the top comments from any YouTube video and flip through them like a deck of cards.
Made for reading fan comments aloud on camera — big, zoomable type, one comment at a time, a big-and-bold "Big read" mode for filming, keyboard paging, and a one-click "copy all" for your teleprompter. Pull the most-liked, YouTube's own order, or a random handful — 10, 25, 50, or 100 at a time. Your YouTube API key lives on the server and never reaches the browser.
- Three ways to pull — Most liked (re-ranked by like count), YouTube top (the site's own relevance order), or Random (a shuffled sample).
- Choose how many — 10, 25, 50, or 100 comments per pull, plus the video's total comment count.
- Card-deck reader — one comment per card with a
#N of Mbadge, avatar, like count, and timestamp. Big, on-camera-friendly type. - Zoom & Big read — scale the comment text with
+/−(up to 350%), or hit Big read for a full-window, big-and-bold view built for filming on camera. Inside Big read, Full screen hides the browser's own UI entirely (true fullscreen) when you want nothing but the comment on screen. - Flip fast — on-screen arrows, ← / → keyboard paging, clickable dots (or a jump box for large pulls).
- Copy all — dumps a clean numbered, plain-text list for a teleprompter or show notes.
- Recent — every pull is cached in your browser and grouped by mode, so past videos reopen instantly (even offline) — and the same video pulled two different ways stays as two distinct, labelled entries.
- Your key stays secret — the browser only ever calls your API route; the key never ships to the client.
- Optional passcode — gate a public deployment so strangers can't burn your YouTube quota.
The fastest path — one click, then paste your key:
- Click Deploy with Vercel above.
- Vercel clones the repo and asks for
YOUTUBE_API_KEY— paste the key from the next section. - Deploy. That's it.
Want a lock on it? After deploying, add an
APP_PASSCODEenvironment variable in Project → Settings → Environment Variables. The app will then ask for that passcode once and remember it on your device.
The tool needs a free YouTube Data API v3 key (Google's quota is 10,000 units/day — plenty; each pull costs only a few units).
- Open the Google Cloud Console and create or pick a project.
- APIs & Services → Library → search YouTube Data API v3 → Enable.
- APIs & Services → Credentials → Create credentials → API key.
- Restrict the key (recommended): edit it → API restrictions → Restrict key → YouTube Data API v3. This limits the damage if the key ever leaks.
git clone https://github.com/jpetree331/youtube-comment-puller.git
cd youtube-comment-puller
npm install
# add your key:
cp .env.example .env.local
# then edit .env.local and set YOUTUBE_API_KEY=AIza...
npm run devOpen http://localhost:3000, paste a video URL, and pull.
| Variable | Required | Purpose |
|---|---|---|
YOUTUBE_API_KEY |
Yes | YouTube Data API v3 key. Server-only — never prefix NEXT_PUBLIC_. |
APP_PASSCODE |
No | If set, the API requires this passcode. Leave unset to disable. |
The whole point of this port: the browser never talks to Google directly. It calls your serverless route, and only that route — running on Vercel with the key in an environment variable — talks to YouTube.
flowchart LR
A["🧑 Your browser<br/>(no key here)"] -->|"POST /api/comments"| B["⚙️ /api/comments<br/>Vercel serverless route"]
B -->|"key from process.env"| C["📺 YouTube Data API"]
C -->|"comments + title"| B
B -->|"top 10 as JSON"| A
style B fill:#271d34,stroke:#f5b942,color:#f4eff5
style A fill:#1f1729,stroke:#5ce0c6,color:#f4eff5
style C fill:#1f1729,stroke:#ff6b8a,color:#f4eff5
The key appears nowhere in the client bundle or page source — no googleapis.com request ever
leaves your browser. (Verify it yourself: open DevTools → Network while pulling a video; the only
comment call is POST /api/comments.)
| Action | How |
|---|---|
| Pick a mode & count | Most liked / YouTube top / Random toggle + count picker |
| Next / previous | Arrow buttons, or ← / → keys |
| Jump to a comment | Click a dot, or type a number in the jump box |
| Bigger / smaller | + / − buttons or keys (zoom the comment text) |
| Big read (for OBS) | Big read button — fills the window, big & bold; Esc to exit |
| Hide browser UI | Full screen button inside Big read — true fullscreen (whole monitor, no Chrome UI); Esc returns to windowed |
| Copy all as text | Copy all button (numbered plain-text) |
| Reopen a past pull | Recent dropdown |
| Settings / passcode | Gear icon (top-right) |
YouTube's default "Top comments" order is a relevance/engagement ranking (likes, replies, recency, and other signals) — not a strict most-liked sort. Comment Deck fetches up to 3 pages of 100 comments in that relevance order, then gives you three ways to read them:
- Most liked — re-sorts the pool by like count, so you get the genuinely most-hearted comments (a truer "top" than YouTube's own list).
- YouTube top — keeps YouTube's relevance order untouched — exactly what visitors see on the site.
- Random — shuffles the pool for a fresh, unbiased handful each pull.
Each mode returns as many as you pick (10–100). For popular videos, the crowd favorites surface within that relevance window regardless of mode.
Next.js 15 (App Router) · TypeScript · React 19 · deployed on Vercel. No database — recent pulls live in your browser's localStorage.
app/
api/comments/route.ts # the security boundary: the only caller of googleapis.com
api/config/route.ts # reports only whether a passcode is required
components/ # CommentCard, DeckStage, inline SVG icons
globals.css # the visual design
page.tsx # the deck UI, pull modes, zoom, and focus mode
lib/
youtube.ts # video-ID parsing, fetch + rank/shuffle by mode, error mapping (server)
storage.ts # localStorage deck cache, passcode, zoom (client)
format.ts # relative timestamps
comment-deck.html # the original single-file version this was ported from
MIT — free to use, fork, and modify. Built by @jpetree331.