Skip to content

Overlay Templates

AlertForge overlays are built from editable template files that define the layout, style, and behavior of the overlay. Every overlay includes a live preview window and one or more editing tools.

Basic Overlay Anatomy

Each overlay consists of:

  • index.html – the structure of your overlay
  • style.css – the visual styling
  • script.js – any custom interactivity or dynamic behavior
  • Optional assets/ folder for images, sounds, or fonts
  • Optional configuration file (see Configuration Editor)

The Overlay View Page

Each overlay has its own view page that includes:

  • Preview Area – a live rendering of the overlay
  • OBS Link – click to copy a browser source–ready URL
  • Smith It – open the code editor (Smithy)
  • Placeholder Console – a toggleable side panel that shows available placeholder variables from Streamer.bot (real-time or simulated)

If no configuration file is present, only the Smithy editor is available for editing.

Editing with Smithy

Clicking the Smith It button opens the full code editor. From here, you can:

  • Edit your index.html, style.css, or script.js
  • Preview changes immediately
  • Manually define how your overlay responds to Streamer.bot events

This is the preferred editing mode for developers or technical users.

GUI Configuration (Optional)

If your overlay includes a configuration file, you’ll also be able to use the Blueprint Editor to:

  • Expose fields like text, colors, numbers, checkboxes, and dropdowns
  • Make your overlay reusable by non-coders
  • Store and modify config values without editing raw code

See: Configuration Editor

Best Practices

  • Keep your logic in script.js, not inline HTML
  • Load assets from the assets/ directory using the /serve endpoint
  • Use placeholders from Streamer.bot events for personalization
  • If you're sharing overlays, always include a valid config for GUI editing

Coming from Blueprints?

If your overlay was created using Quick Cast, it will already include:

  • Preconfigured files
  • A working layout and behavior
  • A GUI editor powered by a config schema