Browsers ship a lot of quiet power these days — native APIs that used to require a library, a polyfill, or weren't possible at all. A lot of developers are still reaching for npm install when the platform already has the answer built in.
Here are 10 JavaScript APIs worth knowing in 2026, with practical snippets for each. Browser support is noted where it matters — check caniuse.com before shipping anything to production.
1. View Transitions API
Smooth, animated transitions between DOM states — or entire page navigations — without a JavaScript animation library.
function updateContent(newContent) {
if (!document.startViewTransition) {
// fallback: just update the DOM directly
render(newContent);
return;
}
document.startViewTransition(() => {
render(newContent);
});
}
Pair it with CSS to control how the transition looks:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.4s;
}
For multi-page apps, the same API now works across full navigations by setting @view-transition { navigation: auto; } in your CSS — no JavaScript required at all for basic page-to-page transitions.
Why it matters: Native page transitions were the single biggest gap between web apps and native apps. This closes it with almost no code.
2. Popover API
Tooltips, dropdowns, and menus that handle positioning, focus, light-dismiss, and top-layer stacking correctly — all of which are surprisingly hard to get right by hand.
<button popovertarget="info-popover">More info</button>
<div id="info-popover" popover>
<p>This is a native popover. Click outside or press Esc to close it.</p>
</div>
That's the entire implementation. No z-index battles, no manual outside-click listeners, no focus trapping code — the browser handles all of it.
For manual control from JavaScript:
const popover = document.getElementById('info-popover');
popover.showPopover();
popover.hidePopover();
popover.togglePopover();
Why it matters: Every UI library has its own popover/tooltip implementation with its own bugs. This is one less dependency and one less accessibility footgun.
3. Screen Wake Lock API
Keeps the screen from dimming or locking — useful for recipe apps, presentation tools, or anything the user is actively reading hands-free.
let wakeLock = null;
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen');
wakeLock.addEventListener('release', () => {
console.log('Wake lock released');
});
} catch (err) {
console.error(`${err.name}: ${err.message}`);
}
}
document.addEventListener('visibilitychange', async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
wakeLock = await navigator.wakeLock.request('screen');
}
});
Note that the wake lock is automatically released when the tab loses visibility, so you need to re-request it on visibilitychange if the user comes back.
Why it matters: Previously this needed a hidden looping video or other hacks. Now it's three lines.
4. Web Share API
Hands off sharing to the OS's native share sheet — the same one native apps use — instead of building a custom share menu.
async function shareArticle() {
if (!navigator.share) {
// fallback: copy link, or show your own share menu
return;
}
try {
await navigator.share({
title: 'Animated Progress Tracker with :has()',
text: 'A pure-CSS multi-step tracker, no JavaScript state.',
url: window.location.href,
});
} catch (err) {
if (err.name !== 'AbortError') console.error(err);
}
}
navigator.canShare() also supports sharing files (images, PDFs) on supporting browsers — useful for apps that generate exportable content client-side.
Why it matters: Users already know how their OS share sheet works. A custom one is friction they didn't ask for.
5. Async Clipboard API
Reads and writes to the clipboard — including rich content like images — without the old document.execCommand('copy') hacks.
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
} catch (err) {
console.error('Copy failed:', err);
}
}
async function copyImage(blob) {
await navigator.clipboard.write([
new ClipboardItem({ [blob.type]: blob }),
]);
}
async function pasteText() {
const text = await navigator.clipboard.readText();
return text;
}
Clipboard access requires a secure context (HTTPS) and, for reads, is generally gated behind a permission prompt or a direct user gesture like a click.
Why it matters: "Copy to clipboard" buttons are everywhere, and this is the clean, promise-based way to build them.
6. Intersection Observer API
Detects when an element enters or leaves the viewport — powering lazy loading, infinite scroll, and scroll-triggered animations without expensive scroll event listeners.
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.25 }
);
document.querySelectorAll('.fade-in-section').forEach((el) => {
observer.observe(el);
});
Why it matters: This has been stable for a few years now, but it's still worth including because so much code out there still hand-rolls scroll-position math that this replaces entirely — and does more efficiently, since the browser handles the calculation off the main thread.
7. ResizeObserver API
Reacts to an element's size changing — not the viewport, the element itself — which window.resize can't do.
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { inlineSize, blockSize } = entry.contentBoxSize[0];
entry.target.dataset.size = inlineSize < 400 ? 'compact' : 'wide';
}
});
document.querySelectorAll('.card').forEach((card) => {
resizeObserver.observe(card);
});
This is what container queries use under the hood conceptually — but ResizeObserver gives you the same capability in JavaScript, for cases CSS alone can't handle (recalculating a canvas, a chart library, or a virtualized list).
Why it matters: Components that adapt to their container, not just the viewport, are the norm now. This is the API that makes it possible from JS.
8. Broadcast Channel API
Sends messages between browsing contexts — tabs, windows, iframes — that share the same origin, with zero backend involved.
// tab A
const channel = new BroadcastChannel('cart-updates');
channel.postMessage({ type: 'ITEM_ADDED', itemId: 42 });
// tab B
const channel2 = new BroadcastChannel('cart-updates');
channel2.onmessage = (event) => {
console.log('Received:', event.data);
// e.g. update the cart badge in this tab too
};
Why it matters: Users routinely have your app open in multiple tabs. Keeping cart state, auth state, or a "user logged out" event in sync across them used to mean polling localStorage. This is the direct, event-driven replacement.
9. File System Access API
Reads from and writes directly to the user's local file system — with permission — enabling "Open," "Save," and "Save As" flows that behave like a real desktop app.
async function openTextFile() {
const [fileHandle] = await window.showOpenFilePicker({
types: [{ description: 'Text files', accept: { 'text/plain': ['.txt'] } }],
});
const file = await fileHandle.getFile();
return await file.text();
}
async function saveTextFile(content, fileHandle) {
const writable = await fileHandle.createWritable();
await writable.write(content);
await writable.close();
}
Currently supported in Chromium-based browsers; Firefox and Safari don't implement it, so pair it with a <input type="file"> and a download-link fallback for cross-browser support.
Why it matters: In-browser code editors, image editors, and note-taking apps can now save back to the same file instead of forcing a re-download every time.
10. Compression Streams API
Compresses and decompresses data (gzip or deflate) natively, streaming, without shipping a compression library to the client.
async function compress(text) {
const stream = new Blob([text]).stream();
const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
const compressedBlob = await new Response(compressedStream).blob();
return compressedBlob;
}
async function decompress(blob) {
const stream = blob.stream();
const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
const text = await new Response(decompressedStream).text();
return text;
}
Useful for compressing data before storing it in IndexedDB, shrinking a payload before an upload, or unpacking a compressed API response manually.
Why it matters: This used to mean shipping something like pako.js. Now it's a native stream, and it composes cleanly with fetch's streaming body.
Closing Notes
None of these need a build step, a bundler plugin, or a dependency — they're just sitting in the browser, waiting to be used. The common thread across all ten is the same: the platform has been quietly absorbing things that used to require a library, and checking caniuse.com before reaching for npm install is often worth the ten seconds it takes.
Feature-detect before using any of these in production (if ('share' in navigator), if (document.startViewTransition), etc.), and always have a plain fallback for browsers that haven't caught up yet.
We're ArtClick, a web development agency based in Kyoto. We build company websites, WordPress sites, and custom systems — with a focus on sites that are fast, well-designed, and easy to maintain long-term. Learn more at artclickdev.com.
Top comments (0)