Lab
Browser-APIs Playground
Interaktive Demos moderner Webplattform-APIs: Crypto, Encoding, Intl, Media Queries, Observer und mehr, alles clientseitig.
Wählen Sie einen API-Tab, starten Sie die Live-Demo und prüfen Sie echte Browser-Ausgaben. Jedes Panel nutzt native APIs ohne Backend.
SubtleCrypto Digest
Text mit der Web Crypto API hashen (SHA-256, SHA-384 oder SHA-512) und die Dauer mit performance.now() messen.
Clientseitiges Hashen unterstützt Integritätsprüfungen und sichere Workflows, ohne Rohdaten an einen Server zu senden.
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('');Dauer: n/a
TextEncoder / TextDecoder
UTF-8-Bytes kodieren und zurück in einen String round-trippen für Payloads, Crypto-Input und binärsicheren Text.
UTF-8-Byte-Ansichten verbinden Nutzertext mit Crypto-, Netzwerk- und Datei-APIs.
API-Snippet
const bytes = new TextEncoder().encode(text);
const roundTrip = new TextDecoder().decode(bytes);Bytelänge: 0
Intl-Formatierer
Lokalisierte Datums-, Zahlen-, Relativzeit- und Listenformate mit gewähltem Locale.
Eingebaute Intl-Formatierer liefern i18n-Qualität ohne separates Formatierungsbibliothek.
API-Snippet
const locale = 'de';
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
- Datum & Uhrzeit
- n/a
- Zahl
- n/a
- Währung
- n/a
- Relative Zeit
- n/a
- Listenformat
- n/a
matchMedia & Navigator
Nutzerpräferenzen und Gerätehinweise lesen: Farbschema, Bewegung, Zeigertyp, Verbindung und Hardware.
Adaptive UI sollte Systempräferenzen und Gerätefähigkeiten respektieren statt nur aus der Breite zu raten.
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
Elementgröße und Sichtbarkeit im Viewport live verfolgen beim Scrollen und Größenändern.
Observer ermöglichen Lazy Loading, Infinite Scroll, Sticky Header und responsive Widgets ohne Layout-Polling.
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-Größe
- n/a
- Target-Sichtbarkeit
- n/a
- Intersection Ratio
- n/a
Scrollen Sie die Target-Box unten ins und aus dem Viewport, um die Intersection Ratio zu sehen.
Teilen, Sprache, Storage & Clone
Optionale Plattform-APIs: Seite teilen, Text vorlesen, Eingabe speichern und strukturierte Daten deep-kopieren.
Diese APIs zeigen, wie weit native Browser-Features reichen, bevor native Apps oder Backend-Storage nötig werden.
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