DeskLayer docs

Getting started

What you need

• Windows 10 or 11, 64-bit.
• The Microsoft Edge WebView2 Runtime. It comes with Windows 11 and nearly every up-to-date Windows 10 PC. If yours is missing it, DeskLayer tells you and opens the download page.
• The browser-source link for the overlay you want to see.

Run it

1. Download DeskLayer.exe and put it anywhere you like, such as your Desktop or a Tools folder.
2. Double-click it. There’s no installer.
3. If Windows shows “Windows protected your PC”, click More info, then Run anyway. This appears for new apps that SmartScreen hasn’t seen many times yet.

DeskLayer lives in the system tray, next to the clock. Settings open the first time you run it. After that, click the tray icon, or run the .exe again, to reopen them.

Add your first overlay

1. In Settings, click + Add overlay.
2. Give it a name you’ll recognize in the tray menu, like “Tangia alerts”.
3. Paste the overlay’s link into Overlay URL. It’s the same link you’d put in an OBS browser source, and it starts with https://.
4. Click Save. The overlay starts right away.
5. Send a test alert from your overlay service to check it shows up.

Click Flash on screen at any time to outline where an overlay is sitting. This helps when an overlay is empty until an alert fires.

Size and placement

Full screen or a box

Cover the whole display is on by default. The overlay fills the monitor, just like a 1920×1080 browser source fills an OBS canvas. Alert services design their layouts for this, so it’s the best choice for alerts.

Turn it off to put the overlay in a box instead. Set the box with X, Y, Width and Height, measured in pixels from the top-left corner of the chosen display. You can also drag it into place (see Moving and resizing). Boxes suit chat, goal bars and timers.

Zoom

Zoom scales the overlay’s content without changing the box. Use it to shrink a large widget into a small corner, or to make a full-screen overlay line up the way it does in OBS.

A full-screen overlay looks the same as in OBS when your screen works out to 1920×1080 after Windows scaling. If it doesn’t, set Zoom like this:

The formula is screen width ÷ (Windows scale × 1920). Round to the nearest 5%.

Opacity

Opacity fades the whole overlay. Try 80–90% for chat so you can still see the game behind it.

Moving and resizing

1. Press Ctrl + Alt + E, or click Edit layout in Settings or the tray menu.
2. Every overlay gets a dashed pink outline and its name. Boxed overlays can now be dragged.
3. Drag from the middle to move. Drag an edge or the bottom-right corner to resize.
4. Press the hotkey again, or click Done editing, when you’re finished. Positions save automatically.

Full-screen overlays show their outline in edit mode but stay put. To move one, turn off Cover the whole display first.

While you’re editing, boxed overlays take mouse clicks. Once you finish, clicks go straight through again.

Overlay options

Reload restarts one overlay. Delete removes it for good.

Hotkeys

Hotkeys work everywhere, including inside games.

Change them in Settings under App settings & hotkeys. Write each one as modifier keys and a key joined with +:

• Modifiers: Ctrl, Alt, Shift, Win.
• Keys: letters, numbers, F1–F24, Num0–Num9, Space, Home, End, PageUp, PageDown, Insert, Delete, the arrow keys (Up, Down, Left, Right), Pause and ScrollLock.
• Examples: Ctrl+Alt+O, Shift+F9, Ctrl+Win+Num1.

Leave a box empty to turn that hotkey off. If another app already uses a combination, Settings labels it “in use by another app”. Pick a different one.

Tray menu

Right-click the DeskLayer icon in the system tray for quick controls:

• A checkbox for each overlay to turn it on or off.
• Hide overlays / Show overlays.
• Edit layout.
• Reload all overlays.
• Settings and Quit DeskLayer.

If the icon is hidden, click the ^ arrow by the clock. You can drag it onto the taskbar to keep it visible.

To start DeskLayer with Windows, turn on Launch DeskLayer when I log in in App settings. It starts quietly in the tray.

Overlay recipes

Every overlay service gives you a link to paste into OBS. Look for words like “browser source URL”, “widget URL”, “overlay link” or “copy link”. That link is all DeskLayer needs.

You can run as many overlays at once as you like. Most streamers use one full-screen alerts overlay plus a few small boxes.

Tangia

1. In your Tangia dashboard, open the page where you set up your OBS overlay.
2. Copy its browser-source URL.
3. Add it to DeskLayer with Cover the whole display on.
4. Trigger a test interaction from Tangia to check it.

If Tangia’s sounds already play through OBS and you hear them twice, turn on Mute sound in DeskLayer.

Other alert boxes

StreamElements, Streamlabs, Ko-fi, Throne, StreamerBot-driven pages and most others work the same way: copy the alert box’s browser-source link, add it full screen, and send a test alert.

If you use several alert services, add each as its own overlay. They all stack on the same screen.

Chat

A chat widget is the best way to read chat in-game on a single monitor.

1. Copy the chat box widget link from your overlay service.
2. Add it, then turn off Cover the whole display.
3. Press Ctrl + Alt + E and drag it into a corner that your game doesn’t use much.
4. Set Opacity to around 85% so the game shows through.

Chat widgets are made to be read, not clicked, so clicks going through them is exactly what you want.

Goals and counters

Sub goals, follower goals, bit bars and death counters work best as a small box. If the widget looks too big, lower Zoom rather than shrinking the box, so its text doesn’t wrap.

Timers and countdowns

Subathon timers, break timers and countdowns such as PaciTime work as boxes. Put a subathon timer where you can glance at it, and use Ctrl + Alt + O to hide everything when you need a clean screen.

Now playing

Song widgets from Spotify integrations or music bots show what’s playing without switching windows. Use a box near the top or bottom edge.

Your own HTML

Anything you build as a web page works. It can be hosted on a website or served from your own PC.

DeskLayer only opens web addresses, not files, so serve a local folder with a small web server. Either of these works from a terminal inside the folder:

npx serve -l 8080
python -m http.server 8080

Then add http://localhost:8080/your-page.html as the overlay URL.

See For overlay developers for how pages can detect DeskLayer.

Keeping it off your stream

Your viewers already see alerts through OBS. DeskLayer’s copy is only for you, so by default each overlay has Hide from screen capture turned on.

• Display Capture in OBS skips DeskLayer, so alerts won’t appear twice.
• Window Capture skips it too.
• Game Capture only records the game, so it never includes DeskLayer.
• Screenshots, Discord screen share and similar tools also skip it.

This needs Windows 10 version 2004 or newer. On older versions, DeskLayer stays capturable so it doesn’t show as a black box. Update Windows to hide it.

Want viewers to see the DeskLayer copy, for example in a tutorial? Turn Hide from screen capture off for that overlay.

Sound

Overlays play sound on their own, just as they do in OBS. You don’t need to click anything first.

If you hear alert sounds twice, both OBS and DeskLayer are playing them to you. Fix it one of two ways:

• Turn on Mute sound for the overlay in DeskLayer. Your stream still gets the sound from OBS.
• Or, in OBS, open Advanced Audio Properties and set the browser source’s Audio Monitoring to Monitor Off. DeskLayer then plays it to you, and OBS still sends it to the stream.

Games and fullscreen

Set your game to Borderless or Windowed mode. In exclusive fullscreen the game takes over the display and draws over every other window, including DeskLayer. Borderless looks identical and is what OBS Game Capture works best with anyway.

Some games push themselves on top of other windows now and then. DeskLayer puts its overlays back on top every few seconds, so this sorts itself out.

DeskLayer never takes keyboard focus, so it won’t pull you out of a game when an alert pops up.

Monitors and scaling

Pick a monitor for each overlay with Display. A common setup is alerts on the game screen and chat on the second monitor.

DeskLayer handles different Windows scaling on each monitor. Box positions are saved per monitor, so they stay in place when you unplug and replug a screen. If a monitor is missing, its overlays move to your main display until it’s back.

If a full-screen overlay looks larger or smaller than in OBS, adjust Zoom using the table in Size and placement.

Troubleshooting

I can’t see the overlay at all

Most alert overlays are empty until an alert fires. Click Flash on screen to see where it is, then send a test alert.

Also check that Show this overlay is on and that overlays aren’t hidden (press Ctrl + Alt + O). Try opening the URL in a normal browser to check the link is right.

It shows a black or colored box instead of being see-through

Keep OBS compatibility mode on. Some overlays draw a preview background when they think they’re not in OBS.

DeskLayer makes the page itself transparent, but it can’t remove a background the overlay draws on purpose. Check the overlay’s own settings for a background color option.

It shows a setup or “open this in OBS” screen

Turn OBS compatibility mode on and click Save.

My viewers see alerts twice

Make sure Hide from screen capture is on for that overlay, and that Windows 10 is version 2004 or newer. See Keeping it off your stream.

I hear every sound twice

See Sound.

Alerts don’t show over my game

Switch the game to borderless or windowed mode. See Games and fullscreen.

The overlay is the wrong size

Adjust Zoom. For full-screen overlays, use the table in Size and placement.

A hotkey says “in use by another app”

Another program, often a game overlay, Discord or a GPU tool, already uses that combination. Choose a different one in App settings.

“DeskLayer needs the Microsoft Edge WebView2 Runtime”

Click Yes to open Microsoft’s download page, install the Evergreen runtime, then run DeskLayer again.

An overlay stopped updating

DeskLayer reloads overlays that lose their connection or crash, retrying every 10 seconds. To force it, press Ctrl + Alt + R.

Windows SmartScreen blocks it

Click More info, then Run anyway. To check your download, compare its SHA-256 with the one on the releases page. In PowerShell: Get-FileHash .\DeskLayer.exe.

Something else went wrong

DeskLayer writes problems to %LOCALAPPDATA%\DeskLayer\error.log. Send that file along with a description to admin@snugglesmp.com.

Files and privacy

DeskLayer has no account and sends nothing to us. It only connects to the overlay links you give it.

Overlay links often contain a private key. Treat config.json like a password: don’t share it or post it in screenshots.

To move DeskLayer to another PC, copy config.json into the same folder there.

Removing DeskLayer

1. Quit it from the tray menu.
2. If you turned on launch at login, turn it off first in App settings.
3. Delete DeskLayer.exe, then the two DeskLayer folders above.

For overlay developers

DeskLayer loads your page in Microsoft Edge WebView2, the same Chromium engine as OBS’s browser source. If your overlay works in OBS, it should work here unchanged.

What DeskLayer does to your page

• Forces html and body backgrounds to transparent and hides scrollbars.
• Sizes the viewport to the overlay box, divided by the user’s Zoom and Windows scale.
• Allows audio to autoplay without a click.
• Keeps timers and animations running at full speed even though the window never has focus.
• Blocks pop-up windows. The page never receives mouse or keyboard input.

Detecting DeskLayer

Every page gets a window.__DESKLAYER__ object before your scripts run:

if (window.__DESKLAYER__) {
  // Running in DeskLayer on the streamer's own screen.
  // { obsCompat: true, opacity: 1, name: "Tangia alerts", zoom: 100 }
  document.body.classList.add('on-desktop');
}

You might use this to leave out elements only the stream should show, like a webcam frame.

OBS compatibility

With OBS compatibility mode on (the default), DeskLayer provides a small window.obsstudio stand-in so pages written for OBS don’t fall back to a preview mode:

window.obsstudio.pluginVersion        // "2.24.0"
window.obsstudio.getControlLevel(cb)  // cb(0)
window.obsstudio.getCurrentScene(cb)  // cb({ name: "DeskLayer", width, height })
window.obsstudio.getStatus(cb)        // cb({ streaming: true, recording: false, ... })

OBS-only events like obsSceneChanged never fire in DeskLayer.