.tsx

Twitch Chat Overlay

A modern, customizable Twitch chat overlay built with Next.js and TailwindCSS. Perfect for streamers who want to display chat messages with beautiful, customizable bubble designs during their streams.

✨ Features

🚀 Quick Start

1. Setup Twitch Application

  1. Go to Twitch Developer Console
  2. Create a new application with these settings:
    • Name: Your overlay name
    • OAuth Redirect URLs: https://yourdomain.com/oauth/
    • Category: Chat Bot or Other
  3. Note down your Client ID

2. Configure the Application

Update the Client ID in src/lib/constants.ts:

export const constants = {
  CLIENT_ID: "your_client_id_here",
  // ...other constants
};

3. Deploy

  1. Fork this repository
  2. Enable GitHub Pages in repository settings
  3. Set source to “GitHub Actions”
  4. Push your changes - the site will auto-deploy

Option B: Vercel/Netlify

  1. Connect your repository to Vercel or Netlify
  2. Set build command: npm run build
  3. Set output directory: out
  4. Deploy

4. Setup in OBS

  1. Add a “Browser Source” in OBS
  2. Set URL to: https://yourdomain.com/oauth
  3. Configure your overlay settings
  4. Copy the generated overlay URL
  5. Update the Browser Source URL with your overlay URL
  6. Set Width: 400, Height: 600
  7. Check “Shutdown source when not visible”

🎨 Customization Options

User Role Styling

Configure different appearances for:

Color Customization

For each user role, customize:

Advanced Settings

🛠️ Development

Prerequisites

Installation

# Clone the repository
git clone https://github.com/yourusername/twitch-chat-overlay.git
cd twitch-chat-overlay

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

# Build static export
npm run build

# The output will be in the 'out' directory

Project Structure

src/
├── app/                    # Next.js app directory
│   ├── page.tsx           # Main chat overlay page
│   └── oauth/
│       └── page.tsx       # OAuth setup and configuration
├── components/
│   ├── BubblePreview.tsx  # Color preview component
│   ├── ChatMessage.tsx    # Individual chat message component  
│   ├── ChatOverlay.tsx    # Main overlay logic
│   └── ColorPicker.tsx    # Advanced color picker
├── lib/
│   ├── constants.ts       # App configuration and defaults
│   └── twitch.ts         # Twitch API integration
├── types/
│   └── index.ts          # TypeScript type definitions
└── utils/
    └── index.ts          # Utility functions

🔧 Configuration

Environment Variables

No environment variables required! All configuration is done through the web interface and stored in URL parameters.

TMI.js Integration

The overlay uses TMI.js for Twitch chat connection. The library is included statically for serverless compatibility.

Message Processing

📱 Usage in Streaming Software

OBS Studio

  1. Add “Browser Source”
  2. Use your overlay URL
  3. Set dimensions to 400x600
  4. Enable “Shutdown source when not visible”

Streamlabs OBS

  1. Add “Custom Widget”
  2. Paste your overlay URL
  3. Adjust size as needed

XSplit

  1. Add “Web page” source
  2. Enter your overlay URL
  3. Configure size and position

🎯 Tips for Best Results

Performance

Visual Design

Chat Management

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Guidelines

  1. Follow existing code style and conventions
  2. Test changes thoroughly with real Twitch chat
  3. Update documentation for new features
  4. Ensure static export compatibility

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

📞 Support

If you encounter any issues or have questions:

  1. Check the Issues page
  2. Create a new issue with detailed information
  3. Include browser console logs if applicable

Happy Streaming! 🎮✨

This site is open source. Improve this page.