One HTML file to manage 80+ links — no signup, no backend

Sai kiran — Sun, 21 Jun 2026 05:18:03 +0000

The problem

I had a long list of links saved in a plain notepad file — links I wanted to open one by one over several days. Two things annoyed me:

Opening each link manually and keeping track of where I left off was tedious.
I didn't want to sign up for some service just to bookmark and track a list of links.

So I built a tiny tool to do exactly what I needed — and nothing more.

What I built

A single HTML file. No backend, no framework, no install. You open it in your browser, paste your links (one per line), and it does the rest:

Click any link in the list to open it
Next — step through links in order, one at a time
Random — open a random link you haven't opened yet
Auto-tracking — opened links get marked and greyed out, so you always know what's left
Search — filter the list by title
Auto-save — your list and progress persist in the browser, so it's all still there next time

You can also add clean titles by formatting a line as Title | https://link.

How it works

It's just HTML, CSS, and JavaScript in one file. The only "clever" part is using the browser's localStorage to remember your links and which ones you've already opened — so closing the tab doesn't wipe your progress:

function save() {
  localStorage.setItem('watchlist', JSON.stringify(items));
}

window.onload = function () {
  const saved = localStorage.getItem('watchlist');
  if (saved) items = JSON.parse(saved);
  render();
};

That's the whole trick. No database, no server — your data just stays on your own machine.

Try it / grab the code

Live demo: Try it here
Code:View on GitHub

It's a small weekend project to scratch my own itch, but it turned out genuinely useful.

What would you add to it? I'm curious what others would do with a tool like this.

How I Made a Live Code Preview Float Over VS Code

Sai kiran — Wed, 17 Jun 2026 10:38:54 +0000

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.)

DEV Community: Sai kiran