Twitch Multi Viewer

A lightweight, customizable multi-stream viewer for Twitch with integrated chat — designed for fans who want to watch and interact with multiple channels at once, all in a sleek and minimal interface.

🚀 Features

• 🖥️ Multi-Stream Layout: Watch multiple Twitch streams in a responsive, grid-based layout.
• 💬 Chat Integration: Tabs for each stream's chat to avoid clutter, with in-chat messaging support.
• 🧭 Sidebar Navigation: Easily access your followed streamers, grouped by game categories.
• 🎨 Modern UI: Dark theme, smooth scrolling, game box art, and streamer profile avatars.

🛠️ Getting Started

1. Clone the repo

git clone https://github.com/fooxytv/twitch-multi-viewer.git
cd twitch-multi-viewer

2. Install dependencies

2 Create your Twitch app credentials

1. Visit the [Twitch Developer Console](https://dev.twitch.tv/console/apps).
2.	Go to the Twitch Developer Console.
3.	Click Register Your Application.
4.	Use the following details:
  •	  Name: Anything you like
  •	  OAuth Redirect URL: http://localhost:8000
  •	  Category: Website Integration
5.	After registering, note your Client ID.

3 Create a file named config.js in the project root (same folder as index.html) and add the following content:

const config = {
  clientId: "<your-client-id>",
  redirectUri: "http://localhost:8000",
};

4. Use Python's built-in HTTP server to serve the files:

python -m http.server 8000

Make sure you're in the project directory when running this command.

3. Open your browser

Open your browser and navigate to http://localhost:8000. You should see the Twitch Multi Viewer interface.

4. Authorize the app

1. Click the Login with Twitch button.
2. Authorize the app to access your Twitch account.
3. After authorization, you will be redirected back to the app.
4. You should now see your followed channels and be able to watch multiple streams simultaneously.

5. Enjoy!