1. Install

1. Download the app from the download page.
2. It's a single file, with no installer. Put it somewhere handy, like your Desktop or a "Stream tools" folder, and double-click it.
3. Windows may say "Windows protected your PC", because Jlerts isn't code-signed yet. Click More info, then Run anyway.
4. Optional: in ⚙ Settings, tick Start with Windows and Minimise to tray.

Everything you make is stored on your PC. ⚙ Settings → Open app data folder shows you where.

2. Add the overlay to OBS

The quick way (OBS 28 or newer):

1. In OBS: Tools → WebSocket Server Settings, tick Enable WebSocket server, then Show Connect Info for the port and password.
2. In Jlerts, click Add to OBS in the bar above the stream canvas, enter the password and choose the Scene.
3. Click Add to scene. A Browser Source called Jlerts Overlay appears in that scene. Nothing else in OBS is touched.

By hand: add a Browser source, paste the address from Copy (bar above the canvas), set it to your stream size (e.g. 1920×1080), and tick Control audio via OBS.

The dot at the top turns green and says 1 overlay connected when OBS is listening.

3. Connect Twitch and tips

1. Open the Connections tab on the right and click Log in with Twitch.
2. Your browser opens Twitch. Check the code matches the one in the app, then click Authorize.
3. The Twitch card lists every event it's listening to with a ✓. Subs, bits, channel points, hype trains and ad breaks need an Affiliate or Partner channel.

Tips work the same way from the same tab:

• StreamElements: paste your JWT Token from your StreamElements channel settings (keep it private, like a password).
• Streamlabs: log in with Streamlabs, or paste your Socket API Token.
• Ko-fi: copy the Webhook URL the app shows into Ko-fi's API settings, with your Verification token.

4. Make your first alert

1. Click + New alert. The Alert Builder opens with a text layer that says {user} just followed!
2. Give it a name, like "Follower alert".
3. Add layers with + Text, + Image / GIF, + Video and + Sound, or drop files onto the window. Transparent WebM videos work too.
4. Click a layer to style it on the right: font, colours, outline, shadow, an Animation and its Enter/Exit transitions.
5. Use Start delay to make a layer appear later, for example the message 1 second after the name.
6. For a name on a badge picture, set the text's Lock inside to the picture. It then can't leave the badge and moves with it.
7. Made a mistake, or dragged something by accident? Ctrl+Z undoes it (Ctrl+Y redoes), or use ↶ ↷ at the top.
8. Press ▶ Play to preview, then Save & close.
9. Back in the main window, drag the alert from the list onto the stream canvas where you want it.

5. Choose when it plays

In the builder's When it plays section, click + Add trigger… and choose an event: New follower, New sub, Resub, Gifted subs, Bits, Raid, Shoutout received, Channel points, Donation / tip, Hype train, Ad break.

• At least lets you make tiers: a small alert for any bits, a bigger one for 1000+.
• The Triggers tab in the main window shows every trigger, with a Test button for each.
• Tests use random made-up viewer names, and don't count towards goals.

6. Channel-point redeems

1. In the builder, open Channel point redeems. Your channel's rewards are listed there.
2. Tick a reward to play this alert when it's redeemed.
3. For rewards where viewers type a message, turn on Read aloud: Just their message, Name said: message, or your own wording.
4. To show the message on screen too, add a text layer with {message}. No text layer means it's only read aloud.

7. Variables and formatting

The ? button next to a text layer lists every variable for every event.

8. Goals on screen

1. Switch the left panel to Goals and click + New goal.
2. Choose what it Counts (followers, subs, sub points, gifted subs, bits, tips or redeems) and the Target.
3. Start from your Twitch total fills in your real follower count, or leave it at 0 to count only new ones.
4. When reached, raise the target by 5 (or 1, or any number) keeps the goal going. 0 stops there.
5. Optional: Start again from 0 each stream or each day, and When reached, play an alert.
6. Click Look to design it: change the text, add a badge picture, and lock the text inside it. Add a Sound layer to hear it each time the goal is reached.
7. Drag the goal onto the stream canvas. It stays on screen and updates live.

9. Text-to-speech

1. ⚙ Settings → Text To Speech Settings… lists the voices installed in Windows. Press ▶ to hear one, and tick Default on your favourite.
2. Want more? Tick Use OneCore voices, or pick a language under Add voices and click Download (Windows asks for permission).
3. Set the maximum length and words never read aloud. Links are never read out.
4. Turn on Read aloud on a text layer (it reads the layer's text), in When it plays, or on a redeem.
5. Skip TTS at the top stops whatever is being read.

10. Busy streams

In the builder's On screen section, choose what happens when several of the same alert arrive together:

• Play one after another (the default)
• Stack them, Push the current one aside, Show them at random spots
• Combine into one: "PixelPanda, NightOwl_TV and 3 others just followed!" with {count}

Follow-bot protection (⚙ Settings) switches follow alerts off for a few minutes when a burst of follows arrives. Pause alerts at the top holds everything until you resume.

11. Ad breaks and hype trains

• Add Ad break to an alert's When it plays and tick Last until it ends: it stays up for the whole break. Show a countdown with {time_left}.
• Hype train started / level up / ended give you {level}, {percent} and the top contributors. Use At least for a bigger alert at higher levels.
• These need an Affiliate or Partner channel. If you logged in with an older build, log out of Twitch and in again once.

12. 1440p, 4K, vertical and profiles

1. The size box in the bar above the stream canvas: pick the same size as OBS's Base (Canvas) Resolution. Normal sizes are 1080p, 1440p and 4K; Vertical ones (1080×1920 and up) are for TikTok, Shorts and Twitch's phone view.
2. Your placed alerts are scaled so the layout looks the same. Switching between normal and vertical shrinks the layout to fit and centres it; then arrange it for the new shape.
3. Use Add to OBS again (or resize the Browser Source) so OBS matches.

Normal and vertical at the same time (e.g. Twitch plus TikTok): click the profile name at the left of that bar → + New profile…, pick a vertical size and start from a copy of your layout. Each profile has its own layout and its own address (/overlay/vertical), so add each one to OBS. Every alert plays in each profile it's placed in. Turn 🔊 Sounds on for one profile only, so nothing is heard twice.

13. Chat overlays

1. Switch the left panel to Chat and click + New chat overlay.
2. Pick a type: Vertical chat box (a tall column), Horizontal chat box (wide and short), Ticker bar, or a full-screen effect: Lanes, Snowfall, Bounce, Bubbles or Word wall.
3. The Chat Designer opens with a pretend chat so you can see changes straight away: font (any font on your PC), size, colours, names, badges, profile pictures, pronouns, emotes (Twitch, 7TV, BTTV, FFZ), message backgrounds and how messages move.
4. Which messages hides bots and !commands, and can show only subs, VIPs or mods.
5. Chat background adds a panel behind the whole chat, with transparency and an outline. Outline effects: pulse, rainbow, glow and spinning RGB, in your own colours.
6. Save & close, then Add to OBS on the chat's card. Each chat overlay is its own Browser Source at exactly its size.

Chat needs one extra Twitch permission. If you logged in with an older build, log out of Twitch and in again once (Connections tab).

14. Put your chat in a frame or a TV

1. In the Chat Designer, click ✨ Templates → Chat frames, pick a style (Gaming, Neon, Cosy, Pixel, Glass, Retro TV) and a colour. That's it: the canvas, background, frame and chat position are all set up.
2. Using your own pictures (like a frame kit you bought)? Add the background with + Image / GIF, then click Canvas = layer size and 💬 Put the chat inside this picture. Add the frame picture next: it lines up on the background by itself and goes Over the chat, so decorations can overlap the messages.
3. Drag the dashed Chat area box to fine-tune where messages go (for a TV, onto its screen).
4. Room around the chat makes the canvas bigger on every side without shrinking the chat.

Every picture has an Under the chat / Over the chat switch, and the list on the left shows the drawing order (top is drawn on top).

15. Chat commands

With Twitch connected, you (and optionally your mods) can type these in chat:

• !skiptts stops what's being read aloud
• !pausealerts pauses alerts, and again to resume
• !clearqueue clears alerts that are waiting

Rename them, or turn them off, in ⚙ Settings → Overlay commands.

16. Back up and share

• Each alert's Export button saves it with its pictures and sounds, as a .zip or a folder.
• Each chat overlay's Export button saves the whole theme (settings, frame and pictures) as a .zip. Share it or sell it: others add it with Import… in the Chat tab.
• The ⋯ menu next to + New alert has Import, Export all and Tidy up (puts each alert's files in its own folder).
• For now, exports carry the design. Triggers and placement are set again after importing (smarter import is planned).

17. Build your own widgets

Want something the editors can't make? A custom widget is your own small web page (HTML, CSS and JavaScript) that hears chat and events, has its own settings panel and remembers things between streams. Build your own widgets walks through two from start to finish, with live demos and free downloads: a spooky chat box with chibi skull and ghost badges, and a slime goal that wobbles, fizzes and turns greener as it fills.