Editor · 8 min read
Create a custom Twitch overlay (without a template)
Ready-made themes all look alike: you pick one, change two colors if the tool lets you, and your stream looks like thousands of others. The alternative is to compose it yourself, element by element, choosing every color, every font and every animation. Without writing a single line of code.
Free during the open beta
Before you start
- An idea of your visual direction: colors, mood, font if you have one in mind
- A Twools account
- No coding knowledge required
Step by step
- 01
Start from a blank canvas (or a starter scenario)
Create a new project in the editor. You can start from a completely blank canvas, or pick a starter scenario (esports, poker, talk show) that places a few useful widgets for your format. Either way, you can move, replace or delete everything.
- 02
Drop your widgets with drag and drop
26 widgets are available: Twitch chat, follow and sub alerts, timer, counter, sub goal, quiz, wheel, poll, esports scores, poker cards, social networks, now playing. Drop them onto the canvas and resize them however you like.
- 03
Customize every detail
For each widget, open its configuration panel: background and text colors, font, size, borders, gradients, text effects, entry and exit animations. Style presets (Neon, Glass, Claymorphism, Gold and others) apply in one click as a starting point, and you refine from there.
- 04
Go further with selection mode
Selection mode (Focus Mode) lets you click a specific element inside a widget: the number on a counter, a player name, the progress bar of a goal. You style only that element, without touching the rest of the widget.
- 05
Export: one URL, that is all
When your overlay looks right, click Export to OBS. Twools generates a unique URL. Paste it into an OBS Browser Source and the overlay is live. Every edit in the editor reflects in OBS in real time: you never need to change the URL.
Watch the demo
The full workflow in real conditions: build the overlay, export it to your streaming software, drive it live. (Video in French.)
Tips
- Start with 3 or 4 widgets at most: a readable overlay is worth more than a crowded one.
- Use style presets as a starting point, then fine-tune the colors and font to match your visual identity.
- Test the result in the built-in editor preview before going live: what you see in the preview is exactly what OBS will show.
FAQ
Do I need to know how to code?
No. Everything is done in the visual editor: drag and drop, sliders, color pickers. No lines of code.
Can I change the overlay during the stream?
Yes. Edits in the editor reflect in OBS in real time. You can also control some widgets from your phone during the stream.
Is it free?
Yes, it is free during the open beta. All 26 widgets are accessible with no restrictions.
Are my settings saved?
Yes. Your overlay is saved in the cloud: you can retrieve it exactly as you left it from any browser, on any machine.