Editor · 8 min read
Create a custom Twitch overlay (without a template)
A ready-made theme installs quickly, but it imposes its layout and its style. The other way is to build your overlay yourself, widget by widget, choosing every colour, every font and every animation. You have no code to write.
Free plan · No credit card
Reference page: Build your Twitch overlay, widget by widget.
Before you start
- An idea of your visual direction: colours, mood, font
- A Twools account and a computer
- Your Twitch account, for chat and alerts
Step by step
- 01
Start from a blank canvas or a base
Open the editor. You can start from a blank canvas, or pick a starting point: Match & competition, Poker night, Just chatting, Games & entertainment. A base places a few widgets suited to your format. Everything stays editable.
- 02
Add your widgets
The "Add" button opens the library: 28 widgets, from Twitch chat to alerts, from the timer to the quiz, from esports scores to poker cards. You add a widget by dragging it onto the canvas or by clicking its + button, then you move and resize it.
- 03
Set each widget
Double-click a widget to open its panel: colours, font, borders, gradients, text effects, entry and exit animations. Style presets (Neon, Glassmorphism, Claymorphism, Gold Luxury, and others) apply a full identity in one click. You then adjust whatever you want.
- 04
Style a single element
Selection Mode lets you click a specific element inside a widget: the number on a counter, a player's name, the bar of a goal. You style only that element, and it keeps its style when you switch presets.
- 05
Display the overlay in OBS
Click "Overlay link", then "Create a secure link". Copy the link and paste it into an OBS Browser Source. Your edits in the editor then reach OBS without changing the link.
Widgets to put this guide into practice
Watch the demo
The full workflow in real conditions: building the overlay, adding it to the streaming software, running it live. The video is in French.
Tips
- Start with three or four widgets: a readable overlay is worth more than a crowded one.
- Start from a style preset, then adjust the colours and the font to match your identity.
- The eye-shaped button opens the preview in a new tab: you see your overlay as it will display in your streaming software.
Frequently asked questions
Do I need to know how to code to build an overlay?
No. Everything is done in the editor: drag and drop, sliders, colour pickers.
Can I change the overlay during the stream?
Yes. The edits you make in the editor reach your streaming software. During the stream, the Control Room also lets you run your widgets from your phone.
Is Twools a paid tool?
Twools has a free plan, with no credit card. 12 of 28 widgets are included in the free plan, with the editor and the live control room. Twools Pro unlocks all 28 widgets and removes the watermark.
Are my settings saved?
Yes. Your overlay is saved online: you find it again from another browser or another computer, by signing in to your account.