The problem I was facing
I code on a single monitor. My setup was simple: VS Code open with HTML and JavaScript side by side, and Live Server to preview my page.
The annoying part? When I clicked "Go Live", it opened my default browser — but to see the preview and my code at the same time, I had to shrink the VS Code window. And when I shrank it, my HTML and JavaScript panes got tiny and hard to work with.
So I wondered: is there a better way? Turns out, there is. Here's the cool trick I found.
Step 1 — Install PowerToys
PowerToys is a free official tool from Microsoft (get it from the Microsoft Store). It comes with a bunch of handy utilities. The one we need is called Crop and Lock.
Step 2 — Crop your live preview into a floating window
Crop and Lock lets you pull a piece of any window into its own floating window. It has a mode called Reparent which makes that floating window fully clickable.
- Run your page with Live Server (it opens in Brave)
- Press the Reparent shortcut:
Win + Ctrl + Shift + R - Drag a box around just the page content (skip the address bar for a clean preview)
- That part pops out into its own floating window you can move anywhere
Step 3 — The problem: the preview froze
Here's the wall I hit. When I maximized VS Code over the Brave window, my floating preview stopped updating. My code changes wouldn't show, and I couldn't click buttons.
Why? Because when Brave is fully covered by another window, Windows and Brave think it's "hidden" — so to save power, Brave stops rendering it. A hidden browser doesn't draw anything, so my floating preview froze too.
Step 4 — The fix
The fix is to tell Brave: "keep rendering even when you're hidden." You do this by adding a few lines to the browser's shortcut.
- Find the Brave shortcut you open daily (desktop, Start menu, or taskbar)
- Right-click it → Properties
- Find the Target field — it shows where Brave lives in your File Explorer
- Click at the very end, after the last quote mark (")
- Add a space, then paste these lines:
--disable-backgrounding-occluded-windows --disable-renderer-backgrounding --disable-background-timer-throttling
- (optional) check at brave://version to see if it's updated.
- Click Apply, then OK
- Fully close Brave and reopen it from that shortcut
Now the "hidden = stop rendering" behaviour is gone. Even when Brave is fully covered, it keeps rendering — so your cropped floating preview updates live, and you can click and interact with it.
Works with any Chromium browser. I used Brave, but the exact same flags work for Chrome and Edge too — just edit that browser's shortcut instead. They're all built on Chromium, so they share this behaviour.
The result
Problem solved! Now I keep a small floating live preview wherever I want, while VS Code stays maximized with my HTML, CSS, and JavaScript side by side. I can edit code, save, and instantly see (and click) the changes in the floating window.
This is super helpful if you work on small layouts or make tutorials. You can even use PowerToys' FancyZones feature to set a permanent spot for the floating preview, so your layout looks the same every time.
(Note: there's also a Microsoft "Live Preview" extension inside VS Code that does something similar, but on some systems it doesn't refresh fast enough — that's why this method works better for me.)
Top comments (1)
Comment Your Opinion