Setlist Board - 12 Song List Overlay Designs for OBS Karaoke Streams

A board you keep on screen listing what you are playing tonight - songs, or just the segments of the stream. The one you are on lights up. Finished lines fade (or get a strike-through); the ones still to come stay plain. Three states, readable at a glance.

You move it on yourself: click the board, or press an arrow key or a number key. It never reads chat, and it never connects to any service or streaming site. Nothing is counted automatically and nothing is pulled from a music player, so it can never jump at the wrong moment mid-stream.

You type the titles. Five lines or twenty, the board resizes around them, so the layout never breaks. Twelve looks, identical features.

Not a video file. It is drawn on the spot, so the download is tiny and there is no loop seam. The text is real HTML text, so it stays sharp at any size.

One HTML file. No install, no account, works offline. Drop it into an OBS browser source. English / 日本語 switchable.

━━━━━━━━━━━━━━━━━━
WHAT IT IS FOR
━━━━━━━━━━━━━━━━━━
- A setlist for a singing stream, showing which song you are on
- A song order for an acoustic or instrument stream
- A running order for the whole stream (Hello - Gameplay - Chat - Notices - Goodbye)
- A request queue you work down in order
- A big list on the standby screen before you go live

━━━━━━━━━━━━━━━━━━
THE 12 DESIGNS
━━━━━━━━━━━━━━━━━━
- paper.html ... Ruled paper (cream sheet, a rule per line, red margin, punch holes)
- chalk.html ... Chalkboard (wooden frame; the current line is circled in chalk)
- neon.html ... Neon glow (the edge glows; the current line's bar glows harder)
- washi.html ... Japanese washi (torn edges, a red brush stroke on the current line)
- dotmatrix.html ... Dot matrix (a panel of dots; the current line's dots light up)
- terminal.html ... Terminal (thin frame on black; a cursor blinks after the current line)
- cassette.html ... Cassette index card (colour band on top; current line in a box)
- sleeve.html ... Record sleeve back (a printed track list, the disc peeking out)
- memo.html ... Handwritten memo (taped at two corners; current line ringed by hand)
- hairline.html ... Hairline (thin lines and dividers only; all about reading)
- band.html ... Bold bands (one band per line; the current band is filled solid)
- pixel.html ... Pixel (chunky stepped border, a light running along the current band)

━━━━━━━━━━━━━━━━━━
WRITING THE LIST, AND MOVING IT ON
━━━━━━━━━━━━━━━━━━
Type into the gear panel, one song per line. A new line is a new entry.

- Click anywhere on the board to go to the next one
- Click a line to jump straight to it (forwards or back)
- Down, Right, Space, Enter, PageDown, N ... next / Up, Left, Backspace, PageUp, P ... previous
- Number keys 1-9 jump to that number (0 = the 10th). Home resets, End goes to the last
- Add or remove lines freely; the board resizes to match
- Finished lines can fade, get a strike-through, do both, or drop off the board entirely
- Switch between one column and one horizontal row (a strip for the bottom of the scene)

In OBS, clicks and keys reach it inside the "Interact" window.

━━━━━━━━━━━━━━━━━━
ABOUT THE SAVED POSITION
━━━━━━━━━━━━━━━━━━
Which line is current is stored in this browser (that is, in OBS), so an OBS restart usually picks up where you left off.

It is built as a value you can afford to lose. If the browser's storage is cleared, or you open it on another PC, it starts again at line 1 - and one press of a number key, or one click on the line, puts it back. There is no running total, no level, no attendance streak: nothing that piles up and hurts to lose. The only thing it remembers is which line is current.

Untick one box in the gear panel and it will not remember at all.

━━━━━━━━━━━━━━━━━━
SETTINGS
━━━━━━━━━━━━━━━━━━
A gear button appears when you hover the picture in the OBS Interact window, and never shows on stream. Press S if you cannot find it.

- The list (one song per line), the headline, a line underneath
- Which one is current (0 = not started yet)
- How finished songs look, and one column or one row
- Line numbers on/off, the "3 / 8" counter on/off
- Whether to remember the current line
- Text size (0.3x - 3x), colour theme, and your own text / accent / board colours
- Fill the whole screen (transparent by default), stop the decoration moving
- English / 日本語

Add ?key=a or ?key=b to the URL and the same design keeps a separate list and position per scene.

━━━━━━━━━━━━━━━━━━
SETUP (30 SECONDS)
━━━━━━━━━━━━━━━━━━
1. In OBS: Sources -> "+" -> "Browser"
2. Tick "Local file" and choose the .html you want
3. Set the size (tall in a corner 600x700 / standby 1920x1080 / bottom strip 1920x180)
4. Place it wherever you like

━━━━━━━━━━━━━━━━━━
WHAT YOU GET
━━━━━━━━━━━━━━━━━━
- 12 HTML files (one per design)
- A read-me in English and Japanese
- Terms of use in English and Japanese

━━━━━━━━━━━━━━━━━━
PLEASE NOTE
━━━━━━━━━━━━━━━━━━
- No sound; this is a display only
- The titles are yours to write. The sample lines (Song 1, Song 2...) are examples
- It does not read chat and does not connect to any app, music service or streaming site. It cannot pick up what is currently playing
- It never advances by itself (not on a timer, not at the end of a track)
- There is no shuffle or re-ordering; the order you type is the order shown
- Tested in Chrome and Edge. The OBS Studio 28+ browser source is Chromium, so it runs the same way there, and in other apps with a browser source such as Streamlabs
- No internet connection needed. Nothing is sent anywhere: no web fonts, no ads

━━━━━━━━━━━━━━━━━━
LICENCE (SUMMARY)
━━━━━━━━━━━━━━━━━━
- Free to use in streams and videos, personal or commercial, monetised or not
- You may modify it for your own use
- Redistribution or resale as an asset is not permitted
- See the included Terms of Use for the full text