The web platform is way more powerful than most developers realize — and every year it quietly gains new superpowers.
Sometimes choosing a topic is harder than writing the article itself.
When I thought about what to write this week, only two types of ideas kept comming to mind:
either potential bangers, or deep technical dives.😅 But I wanted something lighter. Still technical, still useful. But not a 3-day research rabbit hole.
And since I genuinely love exploring what the browser can do (and how far we can push it), I landed on a sneaky topic: underused Web APIs.
Some of these might be daily bread for you.
But I’m pretty sure at least a few will make someone go “wait, this exists?!” 😉
And if you enjoy edge-tech topics and happen to be in Italy this April — come to jsday.it, where I’ll be speaking about WebGPU + WASM 🙂
Alright, enough intro. Let’s start.
Here are 10 browser APIs that deserve way more love.
1) Structured Clone API
I have a love–hate relationship with this one.
For years, one of my favorite interview questions to ask candidates was:
“How do you copy an object?”
You could learn so much from the answer:
- Do they understand references?
- Do they know
Object.assign, spread, JSON tricks? - Do they mention libraries?
- Do they panic? 😄
Now?
const copy = structuredClone(original);
Boom. Perfect deep copy.
Part of me is happy.
Part of me misses that interview question already.
Nice extras
- Works with
Map,Set,Date,Blob,File,ArrayBuffer - Handles circular references (no more JSON stringify explosions 💥)
- Does NOT clone functions
Support: Modern browsers (Chrome, Firefox, Safari, Edge). Safe for production.
2) Performance API
Very underrated.
We talk a lot about performance. We install tools. We run Lighthouse. We debate optimizations.
But sometimes you just want to check:
“Is A actually faster than B, or am I overengineering?”
performance.mark("start");
// code to measure
performance.mark("end");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));
Perfect for:
- micro-benchmarks
- checking if a Worker or WASM is worth it
- reality-checking your assumptions
Because sometimes the “optimized” version is slower 😅
Support: Excellent across all modern browsers.
3) Page Visibility API
Detects whether the tab is active.
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
video.pause();
}
});
Real talk:
Users will open your app, then switch tabs for 20 minutes.
Or 2 hours.
Or forever.
Use cases:
- pause videos
- stop polling
- reduce CPU usage
- cleaner analytics
Your backend (and battery life) will thank you.
Support: All modern browsers.
4) ResizeObserver
Finally — observing element size, not just window size.
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
ro.observe(element);
If you ever built responsive components, charts, or dashboards, you probably wrote some cursed resize logic in the past.
This API feels like the browser saying:
“Relax, I got you now.”
Support: Modern browsers, widely available.
5) IntersectionObserver
The sibling of ResizeObserver.
Checks if an element is in the viewport.
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log("Visible!");
}
});
});
io.observe(element);
Amazing for:
- infinite scroll
- lazy loading
- scroll animations
Anyone who implemented infinite scroll manually once…
never wants to do it again 😄
Support: All modern browsers.
6) AbortController
Many devs know it for fetch…
But it can cancel more than just fetch.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
// later
controller.abort();
You can also use it for:
- event listeners
- streams
- any abortable API
Even better:
👉 One signal can cancel multiple operations.
Clean, scalable, and very “grown-up codebase” friendly.
Support: All modern browsers.
7) Idle Detection API
Page Visibility tells you if the tab is active.
Idle Detection tells you if the human is active.
const detector = new IdleDetector();
await detector.start();
detector.addEventListener("change", () => {
console.log(detector.userState);
});
Meaning:
User might have your app open…
but is actually making coffee ☕ or in a meeting.
Use cases:
- auto-logout
- “away” status
- background optimizations
Yes, you can detect if the user left the computer.
A bit creepy. Very useful 😄
Support: Mostly Chromium-based. Requires permission.
8) BroadcastChannel API
Easy multi-tab communication.
const channel = new BroadcastChannel("app");
channel.postMessage("logout");
channel.onmessage = e => {
console.log(e.data);
};
Great for:
- logout sync
- auth state
- shared session logic
Surprisingly practical in real apps where users open 5 tabs “just in case.”
Support: Modern browsers. Safari joined later but supports it.
9) Web Locks API
The cousin of BroadcastChannel.
Prevents duplicate work across tabs.
navigator.locks.request("data-lock", async lock => {
await fetchData();
});
Example:
- only one tab fetches notifications
- avoids backend spam
- coordinates shared resources
Feels very “distributed systems meets frontend.”
Support: Mostly Chromium. Not universal.
10) File System Access API
Yes — real filesystem access from the browser.
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
Great for:
- web editors
- import/export tools
- power-user apps
The first time you use it, it feels slightly illegal.
Like “are we really allowed to do this on the web?” 😄
Support: Chromium-heavy. Limited elsewhere.
Reality Check 🧠
Many of these APIs are well supported in modern browsers.
But some (Idle Detection, File System Access, Web Locks) are still Chromium-centric.
So always check compatibility before going all-in.
But simply knowing these exist?
That already gives you an edge.
The web platform evolves fast.
Sometimes the “new tech” isn’t a framework — it’s a native browser feature that’s been sitting there quietly.
What’s your favorite underrated Web API that nobody talks about?
Top comments (1)
Love this!! Few new ones for me to play with :)