7 Free Browser APIs You're Probably Not Using (But Should Be)

Most developers reach for libraries the moment they need clipboard access, notifications, or file handling. But modern browsers have built-in APIs for all of these — zero dependencies, zero bundle size.

Here are seven browser APIs that can replace common libraries in your projects.

1. The Clipboard API

Instead of importing clipboard libraries, use navigator.clipboard:

// Copy text to clipboard
await navigator.clipboard.writeText('Hello, world!');

// Read from clipboard
const text = await navigator.clipboard.readText();

Works in all modern browsers. Requires a secure context (HTTPS or localhost).

2. The Intersection Observer API

This replaced scroll-event-based lazy loading and "is element visible?" logic. Use it for infinite scroll, reveal animations, or analytics:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el);
});

No scroll listeners. No requestAnimationFrame. The browser handles it efficiently.

3. The Notification API

Push notifications without a service worker (for simple use cases):

if (Notification.permission === 'granted') {
  new Notification('Task Complete', {
    body: 'Your build finished in 12 seconds.',
    icon: '/favicon.ico'
  });
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission();
}

Great for task timers, build tools, or admin dashboards.

4. The File System Access API

This lets users pick files or directories and gives you read/write access. It replaces <input type="file"> for more complex use cases:

const [fileHandle] = await window.showOpenFilePicker({
  types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }]
});
const file = await fileHandle.getFile();
const data = await file.text();

You can also write back with fileHandle.createWritable().

5. The Screen Wake Lock API

Prevent the screen from dimming during long-running processes (presentations, timers, dashboards):

const wakeLock = await navigator.wakeLock.request('screen');
// Later: wakeLock.release();

Useful for presentation apps, Pomodoro timers, or monitoring dashboards.

6. The Vibration API

Haptic feedback for mobile web apps:

// Short vibration (common pattern)
navigator.vibrate(100);

// Pattern: vibrate, pause, vibrate
navigator.vibrate([200, 100, 200]);

Works on Android. iOS Safari ignores it (as of 2026).

7. The EyeDropper API (Chrome 95+)

Let users pick colors from anywhere on their screen:

const eyeDropper = new EyeDropper();
try {
  const result = await eyeDropper.open();
  console.log(result.sRGBHex); // '#ff5733'
} catch (e) {
  // User cancelled
}

No need for a color picker library.

When to Use Browser APIs vs Libraries

The rule is simple: if the browser has it, use it. Libraries make sense when you need cross-browser normalization, polyfills for older browsers, or significantly more features than the native API offers.

For most single-page apps, dashboards, and tools, these seven APIs handle common tasks without adding a single byte to your bundle.

I maintain a collection of free browser-based tools that use these APIs extensively — check them out if you want to see them in production code.

What browser API do you use most? Any I missed?