Lab
Browser APIs Playground
Hands-on demos of modern web platform APIs: crypto, encoding, Intl, media queries, observers, and more, all running client-side.
Pick an API tab, run the live demo, and inspect real browser output. Every panel uses native APIs with no backend.
SubtleCrypto digest
Hash text with the Web Crypto API (SHA-256, SHA-384, or SHA-512) and measure work with performance.now().
Client-side hashing supports integrity checks, content addressing, and secure random workflows without sending raw input to a server.
API snippet
const bytes = new TextEncoder().encode(text);
const digest = await crypto.subtle.digest('{algo}', bytes);
const hex = [...new Uint8Array(digest)]
.map((b) => b.toString(16).padStart(2, '0'))
.join('');Elapsed: n/a
TextEncoder / TextDecoder
Encode UTF-8 bytes and round-trip back to a string for payloads, crypto input, and binary-safe text.
UTF-8 byte views are the bridge between user text and crypto, networking, and file APIs.
API snippet
const bytes = new TextEncoder().encode(text);
const roundTrip = new TextDecoder().decode(bytes);Byte length: 0
Intl formatters
Locale-aware dates, numbers, relative time, and lists using a chosen locale.
Built-in Intl formatters give you i18n-quality output without shipping a formatting library.
API snippet
const locale = 'en';
new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'medium' }).format(new Date());
new Intl.NumberFormat(locale).format(1234567.89);
new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(-3, 'day');Locale: n/a
- Date & time
- n/a
- Number
- n/a
- Currency
- n/a
- Relative time
- n/a
- List format
- n/a
matchMedia & Navigator
Read user preferences and device hints: color scheme, motion, pointer type, connectivity, and hardware.
Adaptive UI should respect system preferences and device capabilities instead of guessing from screen width alone.
API snippet
const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const conn = navigator.connection;
const language = navigator.language;Media queries
Navigator snapshot
ResizeObserver & IntersectionObserver
Watch element size and viewport visibility update live as you scroll and resize.
Observers power lazy loading, infinite scroll, sticky headers, and responsive widgets without polling layout.
API snippet
const resizeObs = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
});
resizeObs.observe(element);
const io = new IntersectionObserver((entries) => {
const ratio = entries[0].intersectionRatio;
}, { threshold: [0, 0.25, 0.5, 0.75, 1] });
io.observe(target);- Widget size
- n/a
- Target visibility
- n/a
- Intersection ratio
- n/a
Scroll the target box below in and out of view to watch the intersection ratio change.
Share, speech, storage & clone
Optional platform APIs: share the page, speak text, persist input, and deep-clone structured data.
These APIs show how far you can go with native browser features before reaching for native apps or backend storage.
API snippet
await navigator.share({ title: document.title, url: location.href });
const utterance = new SpeechSynthesisUtterance(text);
speechSynthesis.speak(utterance);
localStorage.setItem(key, JSON.stringify(value));
const copy = structuredClone(original);n/a
n/a