Dynamically generated cards showing what you last watched on Trakt.tv
Embed them in any README, website, or profile as a PNG image.
⚠️ Your Trakt profile must be set to public.
Drop this anywhere — GitHub README, personal site, anywhere you can render an image:
<!-- Last watched -->
<img
src="https://{your-domain}/{username}/watched.png"
alt="Last watched"
/>Prerequisites: Node.js 22+, a Trakt API client ID, and optionally a TMDB API key for HD backdrops.
git clone https://github.com/foxbinner/trakt-widgets
cd trakt-widgets
cp .env.sample .env # fill in your keys
yarn install
yarn dev # or: yarn start| Variable | Required | Description |
|---|---|---|
TRAKT_CLIENT_ID |
✅ | Trakt API client ID |
TMDB |
⬜ | TMDB key for HD backdrops |
PORT |
⬜ | HTTP port (default 3000) |
To deploy on Vercel, just run vercel deploy — vercel.json is already configured.
The web interface is built with Tailwind CSS (loaded via CDN — no build step required) using components adapted from the Tailwind CSS Premium UI Kit:
| Page | Components used |
|---|---|
| Home | Split hero with screenshot on dark, grid SVG background, glow blob, pill badge, step list |
| Error | Ghost large error code, divider label, glow blob background |
| Layout | Glassmorphism sticky navbar, minimal dark footer |
All pages share a dark #080808 base with Trakt red (#ed1c24) as the accent. The old hand-rolled style.css is replaced by a ~30-line browser-reset shim — Tailwind handles everything else.
Express · @napi-rs/canvas · trakt.tv · Tailwind CSS · TMDB · TVmaze · Metahub · Vercel
MIT © foxbinner