Watch up to 12 YouTube live streams simultaneously in a slick, security camera-style interface.
Stream MultiView is your personal command center for monitoring multiple YouTube live streams at once. Perfect for:
- 📺 Keeping an eye on multiple gaming streams
- 🎵 Monitoring several music livestreams
- 📰 Following multiple news broadcasts
- 🏆 Watching different angles of esports tournaments
- 🎥 Any scenario where you need multiple streams!
Click images to view full size in a new tab.
Main setup page — select streams and paste YouTube URLs
Multi-stream viewer — watch up to 12 streams with draggable resize
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router for blazing fast performance |
| React 19 | Latest React with concurrent features |
| TypeScript 5.9 | Type-safe code with strict mode enabled |
| Tailwind CSS 4 | Utility-first styling for rapid UI development |
| Bun | Lightning fast package manager & runtime |
- Multi-Stream Grid — Dynamic layout adapts to your stream count (1-12 streams)
- Stage Layout — Main spotlight stream on top + grid below for the rest
- Stream Promotion — Click "→ Stage" to spotlight any stream instantly
- Draggable Resize — Drag grid dividers to customize panel sizes (60fps smooth!)
- Shareable URLs — Share exact layout via compressed URLs
- Layout Modes — Toggle between Grid (equal) and Stage (spotlight) layouts
- One-Click Refresh — Reload all streams instantly without losing your layout
- YouTube URL Support — Handles multiple YouTube formats automatically
- Soft Persistence — Stream URLs stick around while you navigate (cleared on refresh)
- Dark Theme — Easy on the eyes for those long streaming sessions
- Responsive Design — Full-screen layout maximizes your viewing area
- Live Indicators — Pulsing red dots show which streams are active
src/
├── app/
│ ├── page.tsx # Setup page — select streams & enter URLs
│ ├── viewer/page.tsx # Multi-stream grid viewer with resize & share
│ ├── layout.tsx # Root layout with dark theme
│ └── globals.css # Global styles
├── lib/
│ ├── stream-context.tsx # React Context for state management
│ └── share-utils.ts # URL encoding/decoding for shareable links
# Install dependencies
bun install
# Start dev server
bun dev
# Open http://localhost:3000- Open the app — You'll see the setup page
- Select stream count — Click 1-12 to choose how many streams
- Paste YouTube URLs — Supports live/, watch?v=, youtu.be formats
- Start watching — Click "Start Watching Streams"
- Choose layout — Switch between Grid (equal) or Stage (spotlight) mode
- Spotlight streams — In Stage mode, click "→ Stage" to spotlight any stream
- Customize layout — Drag the red grid dividers to resize panels
- Share your view — Click "Share" to copy a link to your exact layout
- Refresh streams — Click "Refresh" to reload all streams instantly
- Enjoy your grid — All streams play simultaneously!
| Command | Description |
|---|---|
bun install |
Install dependencies |
bun dev |
Start development server |
bun build |
Build for production |
bun lint |
Check code quality |
bun typecheck |
Run TypeScript checks |
MIT — See LICENSE for details.
Built with ⚡ and ☕ using the latest web technologies.