The Web Is More Powerful Than Most Developers Realize

Photo by Miguel Ángel Padriñán Alba on Unsplash

If you have been building web applications for a while, you have probably reached for a package to solve a problem and only later discovered that the browser already had a built-in solution.

Need to know when an element enters the viewport? There’s an API for that.

Need to react when an element changes size? There’s an API for that too.

Need to communicate between browser tabs, access the clipboard, monitor network status, or build offline experiences? The browser can already help.

The modern web platform has evolved far beyond HTML, CSS, and JavaScript. Today’s browsers expose a rich collection of APIs that allow developers to build faster, more responsive, and more capable applications without relying heavily on third-party libraries.

Yet many of these APIs remain underutilized, which is what inspired this series, and also because I spent a long time on NPM looking for packages to solve a problem that had already been solved by the browser and was sitting pretty in MDN Docs.

Over the next 10 weeks, I will be exploring Web APIs that can make everyday frontend development easier, from improving performance and user experience to building more resilient applications.

Before we begin, however, it is worth highlighting a few APIs that won’t make the main list but are still worth knowing about.

APIs Every Developer Should Have on Their Radar

History API

Modern single-page applications would not exist in their current form without the History API.

It allows applications to update the URL and browser history without triggering a full page refresh, making navigation feel seamless and instantaneous.

Most developers encounter it indirectly through routing libraries, but under the hood, it remains one of the foundational APIs of modern frontend development.

history.pushState({ page: 'dashboard' }, '', '/dashboard');

URL and URLSearchParams

I’ve lost count of how many codebases I have seen manually parsing URLs and query parameters, something like this:

const queryString = window.location.search.substring(1);
const params = queryString.split('&');

let page; let sort;

params.forEach(param => {
  const [key, value] = param.split('=');
  if (key === 'page') {
    page = value;
  }
  if (key === 'sort') {
    sort = value;
  }
});

console.log(page, sort);

At first glance, it works… until you start dealing with:

• URL encoding (%20, %2F, etc.)
• Missing parameters
• Duplicate parameters
• Edge cases and malformed URLs
• Additional maintenance whenever requirements change

The browser already solves these problems for us.

const url = new URL(window.location.href);

const page = url.searchParams.get('page');
const sort = url.searchParams.get('sort');

console.log(page, sort);

Need to add or update parameters?

const url = new URL(window.location.href);

url.searchParams.set('page', '2');
url.searchParams.set('sort', 'latest');

window.history.replaceState({}, '', url);

Need all values for a repeated parameter?

// ?tag=react&tag=javascript&tag=webapi

const tags = url.searchParams.getAll('tag');

console.log(tags);
// ['react', 'javascript', 'webapi']

The result is cleaner, easier to read, and far less likely to break when your URLs become more complex.

One of the best habits you can develop as a web developer is to stop treating URLs as strings and start treating them as structured data. That is exactly what the URL and URLSearchParams APIs allow you to do.

Media Devices API

This API enables direct access to a user’s camera and microphone, allowing developers to build features like the following:

• Real-time video communication (video calls, conferencing apps)
• Audio and video recording directly in the browser
• Live streaming from user devices
• Camera-based interactions such as QR code scanning or document capture

const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

Because it interacts with sensitive hardware, it also requires careful handling of permissions, user privacy, and fallback behavior for unsupported or denied access states. It deserves a dedicated article of its own.

Broadcast Channel API

Ever wondered how some applications automatically log you out across every open tab?

The Broadcast Channel API makes that possible.

It allows tabs from the same website to communicate with each other without complicated workarounds.

const channel = new BroadcastChannel('app');

channel.postMessage('logout');

It is not something you’ll use every day, but when you need it, it’s incredibly useful.

// Tab 1
channel.postMessage({
 type: 'LOGOUT'
});

// Tab 2
channel.onmessage = event => {
 if (event.data.type === 'LOGOUT') {
 window.location.href = '/login';
 }
};

Web Workers and Service Workers

If there is one category of APIs that deserves far more attention than it gets, it’s this one.

Web Workers allow JavaScript to perform expensive tasks without freezing the user interface.

Service Workers enable offline support, caching strategies, background synchronization, and many of the capabilities that power Progressive Web Apps.

These APIs are so significant that each could justify an entire series on its own.

WebAuthn

Passwords have been one of the weakest links in application security for decades.

WebAuthn offers a different future.

By enabling biometric authentication, hardware-backed credentials, and passkeys, it allows developers to build authentication experiences that are both more secure and more user-friendly.

The topic is too broad and too important to squeeze into this series, so I’ll be covering it separately in the future.

Why These APIs Aren’t in the Main Series

The purpose of this series is not to cover every Web API.

That would be impossible.

Instead, I’m focusing on APIs that:

• Solve common frontend problems
• Deliver immediate practical value
• Require minimal setup
• Can be adopted incrementally in existing applications

In other words, APIs that you can start using almost immediately.

What’s Coming Next

Over the next 10 weeks, we’ll explore:

1. Intersection Observer API
2. Resize Observer API
3. Mutation Observer API
4. Web Storage APIs
5. Clipboard API
6. Page Visibility API
7. Web Share API
8. Notifications API
9. File System Access API
10. Network Information and Online/Offline APIs

Each article will include:

• A practical overview
• Real-world use cases
• Browser support considerations
• Copy-and-paste examples
• Production tips and pitfalls

The goal isn’t just to learn what these APIs do; it is to understand when they can help you write less code, ship better experiences, and rely more on capabilities the browser already provides.

Next up: Intersection Observer API — Let the Browser Watch Scroll Events.

Follow along if you would like to discover more browser capabilities that might already be solving problems in your application today.