A simple multi-stream Twitch viewer built with Astro.
- 🎮 Watch multiple Twitch streams simultaneously in a responsive grid
- 🔎 Channel autocomplete while typing (with LIVE/OFFLINE status)
- 🔊 Mute / unmute individual streams at a glance from the control bar or stream overlay
- ⬛ Stage mode – feature one stream prominently (75 %) while the others stack in a sidebar
- 🔐 Twitch login (optional) – sign in to show your display name & avatar via Twitch OAuth
- 💾 Persists your stream list, mute states, and staged stream across browser sessions
Multi-stream grid view
Stage mode – ninja is featured, shroud is muted in the sidebar
| Layer | Choice |
|---|---|
| Framework | Astro v5 (static output) |
| Stream embeds | Twitch Embed API |
| Authentication | Twitch OAuth 2.0 implicit-grant flow |
| Styling | Vanilla CSS with Twitch-inspired dark theme |
| State | localStorage (no backend required) |
- Node.js 18+
npm installStreams work without login. To enable the "Login with Twitch" button:
- Go to the Twitch Developer Console and create a new application.
- Add your redirect URL to OAuth Redirect URLs:
- Development:
http://localhost:4321 - Production: your deployed URL
- Development:
- Copy the Client ID.
- Create a
.envfile (see.env.example):
PUBLIC_TWITCH_CLIENT_ID=your_client_id_herenpm run devOpen http://localhost:4321.
| Action | How |
|---|---|
| Add a stream | Type a Twitch username in the header (autocomplete shows channel suggestions + live status), then press Enter or click Add Stream |
| Remove a stream | Hover over the stream → click ✕, or click ✕ in the control bar |
| Mute / unmute | Hover over the stream → click 🔊/🔇, or click in the control bar |
| Stage a stream | Hover over the stream → click ⬛, or click in the control bar. Click again to exit stage mode |
| Login with Twitch | Click Login with Twitch in the header (requires PUBLIC_TWITCH_CLIENT_ID) |
npm run build # outputs to dist/
npm run preview # preview the production build locally