Mykyta Khmel

Posted on Jun 19

Browser APIs - the whole ocean of features to build apps

#webdev #browser #javascript #showdev

Your browser ships somewhere between 350 and 450 APIs (depending on the browser). Most developers reach for the same dozen. There's an ocean of platform features sitting unused.

The web platform is enormous. We just keep treating it like a phone book.

Problem

How to know what you need? MDN is nice but it's just a catalog. Most of a time you need to know what to look for. caniuse is per-feature, web.dev is article-driven. Nothing gives you the map.

What I wanted was a map - a single picture of the whole platform, color-coded by what my browser actually ships, with live demos I could click and feel.

The tool

I built Browser API Atlas — an interactive graph of every major web platform API, color-coded by what your browser actually supports right now.

It knows YOUR browser

The header pill tells you the score at a glance: "Chrome 149 · macOS 26 · 354/380."

There's also a "✨ N APIs detected in your browser that aren't in the atlas yet" banner — the page walks window, navigator, and document at runtime and surfaces anything it finds that isn't in the catalog. Often that means you've stumbled onto something brand-new before it hits MDN.

Four ways to slice the graph

category — cluster by domain (Storage, Network, Sensors etc.)
baseline — chronological. Read left to right for "when did the web get X" — 2015 widely-Baseline on the left, newly available on the right.
A–Z — quick lookup
graph — relationship-driven. Web Audio nodes orbit AudioContext. WebGPU primitives radiate from GPU. WebRTC family clusters around RTCPeerConnection. This is where the structure of the platform shows up.

Live demos

Every catalogued API can have a demo. Click the node → run it in the detail panel.

Storage / Files (localStorage, IndexedDB, OPFS, Cache, BroadcastChannel), the frontier set (EyeDropper, View Transitions, DocPiP, Sanitizer, Temporal, CSS Custom Highlight), platform UI + audio (Notifications, Web Share, Web Audio oscillator, SubtleCrypto, IntersectionObserver, ResizeObserver, Web Animations).

The pattern is intentionally easy — every demo is one file, ~80 lines. Drop it in src/demos/, the build picks it up.

Like EyeDropper

// Pick any color visible on screen
const dropper = new EyeDropper()
const {sRGBHex} = await dropper.open()
console.log(sRGBHex)            // '#ff5733'

// Handle user cancellation (Esc)
try {
  await dropper.open({signal: controller.signal})
} catch (e) {
  if (e.name !== 'AbortError') throw e
}

Shareable views

The URL contains your filter, sort, search, and selection state. The URL bar is the share button:
?api=api.EyeDropper&sort=baseline&cat=storage,files,network

Open data, open source

A weekly GitHub Action bumps @mdn/browser-compat-data + web-features to their latest releases, rebuilds the catalog, and opens a PR if anything changed. New APIs land in the atlas roughly seven days after they appear in BCD upstream. No manual maintenance.
So the atlas stays current with the web platform automatically.

Behind the scenes

Vite + React 19 + TypeScript. Graph by @xyflow/react, layout by ELK. Tailwind v4, Shiki for highlighting, Zustand for state.

The build pipeline is the interesting bit. At build time, a Node script joins @mdn/browser-compat-data (5 MB of raw compatibility data) with web-features (Baseline classifications) and the curated api-selection.ts to emit catalog.json — about 30 KB of slim, typed entries. The runtime app only loads the slim catalog; the upstream packages never reach the bundle.

The graph layout uses ELK's layered algorithm in graph-sort mode and rectpacking for category/A-Z. ELK is huge (~1.4 MB) so it's dynamically imported and renders after first paint — keeps the initial JS under 200 KB gzipped.

Try it yourself

🌊 Open the atlas: Browser API Atlas
⏱ Baseline timeline view (when did the web get X): ?sort=baseline
🕸 Relationship graph view (API families): ?sort=hierarchy
🎨 Try the EyeDropper demo: ?api=api.EyeDropper
🪟 Document PiP demo: ?api=api.DocumentPictureInPicture

The catalog is curated, not exhaustive. If your browser ships an API that isn't there, the side panel will surface it - click "Copy as markdown" to drop the list into an issue. PRs welcome — adding a demo is literally one file in src/demos/. GitHub Discussions is the best place to talk through ideas.

Also !IMPORTANT Note - Honest disclosure: this project was built in close collaboration with an AI coding agent. I drove the design, taste, and ship calls;

DEV Community