Tibia

Stream Kit

A complete overlay pack for Tibia streamers: a starting screen, an in-game overlay with live data from tibia.com, a webcam frame, level up and death alerts, Twitch alerts, a break screen and an ending screen.

Settings

Exactly as on tibia.com. Level, vocation and deaths are fetched automatically.

Lets you and your mods type !lvlup or !dead a dragon lord in chat to show an alert right away.

OBS → Settings → Video → Base (Canvas) Resolution. Use your monitor's resolution.

Your Tibia client

A side panel is the grey column that holds your backpacks or battle list; each is 176 px wide at 100% scale. Windows display scaling counts as UI scale.

Shown behind the preview so you can see the frame and webcam on your real client. It stays on this device.

Frame over the game
Side panel design

Separate up to three lines with |. The design adapts to how many panels you have and shows your character, session stats, hunt numbers, online status, server save, Rashid and today's boosted creature and boss.

Frame and alerts are centred over the game window worked out from your client above.

Side panel modes fill the width of your empty panels. Your outermost right panel (minimap, equipment, backpacks) is never covered.

Preview at 1920 × 1080 with sample data

1. Put it online

  1. Make a free account on Netlify Drop.
  2. Drag the whole tibia-overlay folder onto the page.
  3. Open the address you get, e.g. yourname.netlify.app. You'll see this page with working links.

2. Add it to OBS

  1. Make one scene per screen: Starting soon, In game, Be right back, Ending.
  2. Add a Browser source and paste the matching link.
  3. Set width and height to your canvas, e.g. 1920 × 1080.
  4. Tick Refresh browser when scene becomes active so the countdown restarts.
  5. In the In game scene, keep the overlay at the top of the source list, with the game and webcam below it.

3. Instant alerts

Tibia.com updates a few minutes late. To show alerts the moment it happens:

  • Type !lvlup, !dead a dragon lord or !newsession in your Twitch chat. Only you and your mods can trigger them.
  • Or add the control panel link as an OBS dock: Docks → Custom Browser Docks.
  • When tibia.com catches up, the overlay knows it already showed that alert.
  • Hunt numbers: in Tibia's Hunt Analyser click Copy to clipboard, then press Ctrl+V in the control panel. XP/h, loot, balance and your top kills appear in the side panel.

4. Twitch alerts (follows, subs, bits, donations, raids)

  1. Log in at StreamElements → Overlays, create a new overlay with your canvas size.
  2. Click + → Static / Custom → Custom widget, then Settings → Open editor.
  3. Paste each file below into its tab (HTML, CSS, JS, Fields). Clear the example code first. Click Done.
  4. Make the widget 900 × 470 on a 1080p canvas and place it where you want alerts.
  5. Save, copy the overlay URL and add it to OBS as a Browser source above everything else.
  6. Test with Emulate in the StreamElements editor. Titles, texts, sounds and minimums are editable in the widget's settings.

The Fields copy already points the images at this site. If you copy from the files on your computer instead, set Image folder URL in the widget settings to your site + /assets/.

Level and deaths come from tibia.com through TibiaData, checked about once a minute. Graphics are from CipSoft's official Tibia fan kit. Tibia is a trademark of CipSoft GmbH; this is a fan project.