Skip to content

The Smithy (Code Editor)

The Smithy is AlertForge’s built-in code editor for customizing overlay behavior, styling, and layout. It's available to both Admins and Editors of an overlay.

Who Can Access the Smithy?

  • Overlay owners, admins, and editors can open Smithy from the View Overlay page.
  • Public viewers (e.g. OBS source) do not have access to Smithy or editing tools.
  • Smithy is not visible from OBS links — only users with access permissions can reach it.

Code Files You Can Edit

Smithy lets you edit the following files live:

  • index.html — the structure of your overlay
  • style.css — visual styles and animations
  • script.js — JavaScript logic for reacting to events
  • config.json (optional) — the blueprint config powering GUI editors

Use the file tabs at the top of the screen to switch between files.

Asset Uploads

On the right side of the screen, you’ll see an Uploaded Assets panel:

  • Upload static files like images via drag-and-drop or click Upload Asset
  • Copy the path of uploaded files for use in your HTML or config
  • Assets are served from the /assets/ folder inside your overlay

Example:

<img src="{{img}}" alt="Alert Image">

Placeholders Console

Also on the right is a live Placeholders panel.

  • This shows all available {placeholders} received from the latest Streamer.bot event
  • Helps you know which variables (e.g. {user}, {message}) are available to use in templates
  • Placeholders are updated live as events are triggered or tested

Template Syntax

There are two types of dynamic values in overlays:

Syntax Purpose Source
{{value}} Replaced by config values (from blueprint) meta.json
{value} Replaced by event data placeholders Streamer.bot events

Use {{ }} for static configuration like font size or images.
Use { } to display dynamic data like {user}, {amount}, {message}.

Keyboard Shortcuts

  • Ctrl + S — Save the current file instantly
  • Changes are saved immediately and reflected in the preview pane
  • If your overlay uses config, it will be re-rendered on save

Example Structure

index.html

<img src="{{img}}" alt="Alert Image">
<div id="alert-message">{user} subbed!</div>

style.css

#alert-message {
  color: {{mainFont.color}};
  font-size: {{mainFont.fontSize}}px;
}

script.js

window.addEventListener("{{eventName}}", (e) => {
  const data = e.detail.flat || {};
  document.getElementById("alert-message").innerText = AlertForge.formatMessage("{{messageTemplate}}", data);
});

For advanced config structure, see the Configuration Editor page.