FIELD NOTE 02 / PERSONALIZATION
Personalize your stream overlays.
Add your channel name to a local HTML scene, or edit the SVG artwork for a custom PNG.
One editor. A scene that feels like you.
The complete packs include PERSONALIZE.html, a local desktop-browser editor. Open it from your extracted pack, not inside the ZIP. No login, hosting, or API key is needed. The free sample contains static PNGs and does not include this editor.
- Enter your channel name (up to 24 characters) and handle (up to 32).
- Choose Starting Soon, Be Right Back, Stream Ending, or Currently Offline.
- Add an optional tagline (up to 70 characters). Leave it empty to use the state’s default message.
- Choose whether to keep subtle motion. It also respects your system’s reduced-motion preference.
- Inspect the preview, then choose Download OBS scene. Save the HTML to your permanent stream-assets folder.
Repeat for each state you want to use. Give the saved files clear names such as my-channel-brb.html. Your entries remain only while the editor tab is open; the downloaded files are the copies to keep.
Know which file you’re changing
| Tool | What changes | What to use |
|---|---|---|
| PERSONALIZE.html | Name, handle, state, tagline, and motion in the browser scene | Saved HTML in an OBS Browser source |
| An SVG editor | Text, colours, and layout in static artwork | Newly exported PNG in an OBS Image source |
| Website playground | A preview of the look | Explore before choosing a pack |
The local editor does not alter the supplied PNGs or SVGs, change the pack palette, configure your OBS scenes, or add live alerts. The website preview is not your downloaded scene.
Take static artwork one step further
Install the supplied TTF fonts from fonts/ before opening an SVG in a vector editor. Replace YOURNAME, @YOURHANDLE, and avatar initials YN where present. Keep an untouched copy so you can start again.
The static layouts suit short channel names. Longer names may need a smaller font size or a revised layout; inspect every edited design rather than assuming one edit fits them all. Export PNGs at the original dimensions, preserving transparency for webcam frames.
Channel platforms crop graphics differently. The banner is 1200 × 480, not a universal banner size for every service. Preview its crop on the platform, and keep important avatar content near the center for circular crops.
Check the result in OBS
Load your exported HTML as a Browser source with Local file enabled and a 1920 × 1080 rendering area. View the full name and tagline at normal broadcast size. Unsupported characters or emoji may not render as expected, even if the preview fits the text. Refresh the source after replacing its file. Official OBS Browser source instructions.
Want a hands-on preview first? Explore Gridline in the playground, then return to your downloaded pack for the export workflow.