Templates Gallery

Browse, download, and customize chat overlays for your streams

Enhance Your Streams with Custom Templates

Choose from our collection of professionally designed templates or create your own to match your brand aesthetic. All templates are fully customizable and work with OBS, Streamlabs, and other streaming software.

Why Use Custom Templates?

Stand out from the crowd with professional overlays

Professional Look

Give your streams a polished, professional appearance with custom-designed overlays that match your brand.

Better Engagement

Highlight viewer messages in an attractive way that encourages more audience participation.

Easy Setup

Just add your session ID to the template URL and add as a browser source in OBS or other streaming software.

Fully Customizable

Modify colors, animations, positions, and styles to perfectly match your stream's aesthetic.

Template Library

Find the perfect template for your stream

All Templates
Gaming
Minimal
Animated
Retro
Modern
YouTube Compatible

Themed Packages

Complete themed packages with documentation, sample images, and guides

Deuk's Theme
Complete Package

Deuk's Theme

A sophisticated, fully animated theme with customizable colors and smooth transitions. Perfect for gaming streams.

New
Windows 3.1 Theme
Retro Style

Windows 3.1 Theme

Nostalgic Windows 3.1 style chat overlay with classic window design and pixel-perfect detailing.

Neutron Theme
Modern Design

Neutron Theme

Clean, modern design with smooth animations and excellent readability. Customizable color schemes.

Simple Drop-in Templates

Ready-to-use templates that only require your session ID

Sample Template
Minimal

Sample Template

A clean, lightweight template with essential features. Perfect starting point for customization.

Pretty Template
Animated

Pretty Template

Elegant design with smooth animations and visual effects. Eye-catching yet not distracting.

t3nk3y's Theme
Gaming

t3nk3y's Theme

Bold, high-contrast theme designed for gaming streams with excellent visibility even in fast-paced content.

YouTube-CSS Compatible Templates

Templates that work with YouTube CSS styles

YouTube-CSS Template
YouTube Compatible

YouTube-CSS Template

Use CSS designed for YouTube with our YouTube-structured overlay page. Compatible with Septapus styles.

Developer Templates

Starting points for creating your own custom overlays

Bare Template
Developer

Bare Template

Minimal code needed to create your own overlay from scratch. Perfect for developers and LLM-assisted coding.

Sample Overlay
Developer

Sample Overlay Template

A more complete starting point with comments and documentation to help you build your own custom overlays.

Have a Template to Share?

Created an awesome template for Social Stream Ninja? Share it with the community by submitting a pull request to our GitHub repository.

Submit on GitHub

How to Use Templates

Follow these simple steps to get started

Choose Your Template

Browse the template library and select one that fits your stream style. Each template has a preview option to see how it looks before downloading.

Add Your Session ID

Replace YOURSESSIONID in the template URL with your actual Social Stream Ninja session ID found in the dashboard.

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

Add to OBS/Streamlabs

Add the modified URL as a Browser Source in your streaming software:

  1. In OBS, click the + under Sources and select "Browser"
  2. Name your source and click OK
  3. Paste your template URL with session ID
  4. Set width and height (recommended: 1920×1080)
  5. Click OK to add it to your scene

Customize Your Template

Personalize your overlay with custom CSS in one of these ways:

  • OBS Custom CSS: Add your CSS in the Browser Source properties
  • URL Parameter: Append &css=URL_TO_YOUR_CSS_FILE to your template URL
  • Base64 CSS: For inline CSS, use &b64css=YOUR_BASE64_ENCODED_CSS

Video Tutorial

Learn how to create a custom chat overlay with AI assistance

Quick Guide from the Video

  1. Find the sample overlay template (sampleoverlay.html)
  2. Copy the template code to your clipboard
  3. Use an AI assistant like Claude to help customize it
  4. Prompt the AI to modify the CSS for your preferred style
  5. Configure OBS to use your customized template
  6. Apply your custom CSS through OBS browser source settings