Stop Installing Libraries: 10 Browser APIs That Already Solve Your Problems
Publicado originalmente por Sylwia Laskowska - DEV Community
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?