Change the code, watch it react
97 runnable demos. Edit the HTML, CSS or JavaScript and it re-runs in your browser.
Next.js Parallel & Intercepting Routes — interactive playground
How Next.js parallel routes (@slot) and intercepting routes ((.), (..), (...)) combine to build shareable, refreshable modals — verified against Next.js 16.3.
Open the playground →
ElementInternals — interactive playground
A custom <star-rating> element sits inside a <form>, looks like a form field, and gets left out of the submission entirely. The browser has a real fix for this — most teams reach for a hack instead.
Open the playground →
Vue nextTick & batching — interactive playground
How Vue batches reactive writes into one DOM update, why the DOM looks stale right after a change, and how nextTick and watch's flush option fix it.
Open the playground →
speechSynthesis voice race — interactive playground
A text-to-speech button that works perfectly every time you test it — and silently fails or picks the wrong voice for a real visitor's first click. The bug is a timing race baked into the Web Speech API that most code never accounts for.
Open the playground →
useAsyncData key collision — interactive simulation
Learn how Nuxt's useAsyncData and useFetch generate cache keys, how dedupe (cancel vs defer) really works, and why wrapper composables silently share data.
Open the playground →
CSS Custom Highlight API — interactive playground
A search-highlight feature that rebuilds its DOM on every keystroke can wipe out a user's own text selection with no warning. The CSS Custom Highlight API fixes it by styling text ranges without ever touching a DOM node.
Open the playground →
Promise.try() — interactive playground
A function that sometimes throws synchronously instead of returning a promise will skip every .catch() chained to it — because the promise never gets created. Promise.try() fixes it, and does one thing try/catch can't.
Open the playground →
NestJS module graph — interactive playground
How NestJS module boundaries actually work: what exports really cross, why @Global() isn't a shortcut, and how forwardRef breaks circular module dependencies.
Open the playground →
NestJS DI container — interactive playground
How the NestJS DI container resolves providers: tokens, module scope, singleton vs request vs transient, and why 'singleton' can still mean two instances.
Open the playground →
document.cookie vs cookieStore — interactive playground
document.cookie hands you one flat string and no way to know when it changes. The Cookie Store API gives you async get/set/delete and a change event — but its set() defaults to a stricter SameSite than the one you're used to.
Open the playground →
Date vs Temporal — the mutation trap
A date utility that calls .setDate() and returns the same object looks pure. It isn't — Date is mutable, so the caller and everyone else holding that reference get changed out from under them. Temporal, now shipping in real browsers, fixes it by making dates immutable.
Open the playground →
React form Actions — pending state playground
How React 19 form Actions manage pending state automatically — useActionState, useFormStatus, and useOptimistic explained with the bug they replace.
Open the playground →
WebAuthn: passkey vs. plain credential — interactive playground
WebAuthn's own demo code creates a credential the browser can't find on its own — so your passkey button quietly turns into a fancier security key instead of an actual passwordless sign-in. One option fixes it.
Open the playground →
Web Share API — interactive playground
Every blog footer hardcodes the same row of share icons — X, Facebook, copy link — and none of them know what's actually installed on your phone. The Web Share API hands the job to the OS instead, and it can do something a custom row never could: share an actual file.
Open the playground →
Next.js Server Actions — request lifecycle playground
Next.js Server Actions look like plain functions but compile to public POST endpoints. Learn the mutation flow, built-in CSRF checks, and the auth you owe.
Open the playground →
:user-invalid vs :invalid — interactive playground
A signup form's email input shows a red border the instant the page loads — before the visitor has typed a single character. The obvious CSS causes it, and the obvious fix is a native pseudo-class nobody reaches for first.
Open the playground →
Main thread vs. Web Worker — interactive playground
Learn JavaScript Web Workers step by step: message passing, transferable objects, error handling, and a copy-paste cheat sheet for offloading work.
Open the playground →
accent-color — interactive playground
Recoloring a checkbox to match the brand usually means appearance: none, a hand-drawn checkmark, and a rebuilt focus ring. accent-color does the same job in one line — and knowing where it stops matters as much as knowing that it works.
Open the playground →
Screen Wake Lock API — interactive playground
Cooking sites, workout timers, and boarding-pass pages used to autoplay an invisible, muted, looping video for one job only: stopping your phone from locking its screen. The Screen Wake Lock API replaces that hack with three lines of JavaScript — and it comes with one gotcha the docs bury.
Open the playground →
React Compiler & memoization — interactive playground
React Compiler 1.0 is stable. Here's the re-render model it automates, which useMemo/useCallback/memo calls you can delete, and what still needs you.
Open the playground →
Page Visibility API — interactive playground
window blur feels like the obvious way to detect an idle tab, and it's wrong in ways that only show up in production. The Page Visibility API answers the actual question — can anyone see this? — so polling, timers, and video stop wasting work the moment nobody's looking.
Open the playground →
Clipboard timing lab — interactive playground
navigator.clipboard.writeText() only works while the document is focused and the user gesture is still fresh. Any await before the call can let both expire, so a copy button fails with an uncaught NotAllowedError and nobody ever sees why.
Open the playground →
Declarative Shadow DOM — the parse-time race
attachShadow() is a JavaScript-only API with no HTML serialization, so a server-rendered web component ships an empty host element until the client hydrates it. Declarative Shadow DOM attaches the real shadow root during HTML parsing — zero JS required.
Open the playground →
Next.js Cache Components — interactive playground
How Next.js Cache Components decide what's static, what's cached, and what streams — the use cache directive, cacheLife, and Suspense explained.
Open the playground →
Navigation race — interactive playground
Double-click a link during a slow route change and most SPA routers render two pages and settle on the wrong one — because they're listening for navigation after it already happened. The Navigation API lets you stop it before it starts.
Open the playground →
Debounce vs throttle — interactive playground
Learn debounce and throttle in JavaScript step by step, with worked examples, edge cases, and a copy-paste cheat sheet for search, scroll, and resize.
Open the playground →
EventSource vs WebSocket — reconnect playground
A live notification badge, a progress bar, a dashboard counter — you reached for socket.io and started hand-rolling reconnect logic. The browser already ships a simpler API that does it for you.
Open the playground →
Nuxt cross-request state leak — interactive simulation
A module-scope ref() in Nuxt is shared by every request that hits your server. Learn why useState isolates state per user, and how to fix the leak.
Open the playground →
aspect-ratio vs the padding-bottom hack — interactive playground
For a decade the only way to keep a responsive box's shape was a padding percentage and an absolutely positioned wrapper. One CSS property replaces it — with one gotcha on real images nobody warns you about.
Open the playground →
React re-render vs remount — interactive playground
A practical guide to React re-render vs remount: what type, position, and key decide, why state resets unexpectedly, and how to force a remount.
Open the playground →
:focus-visible — interactive playground
A designer flags the ugly blue focus ring in review. An engineer deletes it with outline: none. Nobody notices the keyboard-only user who now can't tell where they are on the page.
Open the playground →
NestJS request lifecycle — interactive playground
A complete guide to the NestJS request lifecycle: the exact order middleware, guards, interceptors, pipes, and filters run, and why it matters.
Open the playground →
auto-fill vs auto-fit — interactive playground
A responsive card grid that works perfectly with twelve items breaks with two — not from a bug, but from one word in a repeat() you copy-pasted without reading.
Open the playground →
Intl.Segmenter — interactive playground
A 30-character bio limit that cuts off mid-emoji isn't a rendering bug — it's .length counting UTF-16 code units instead of what's on screen. Intl.Segmenter counts graphemes, words, and sentences the way a reader actually sees them, and every major browser supports it now.
Open the playground →
field-sizing: content — auto-grow textarea playground
The scrollHeight hack everyone copy-pastes for auto-growing textareas has a one-line CSS replacement — plus the one gotcha that bites if you skip max-height.
Open the playground →
JavaScript closures — interactive playground
Learn how JavaScript closures really work — lexical scope, private state, memoization, and the classic loop bug — with worked examples and a cheat sheet.
Open the playground →
Web Animations API — the pause button CSS never had
Toggling a class to restart a CSS animation works — until you need to pause it, reverse it mid-flight, or ask how far through it is. element.animate() returns an object with those methods built in, natively, in every browser you already support.
Open the playground →
Vue reactivity: ref vs reactive — interactive playground
A complete guide to Vue reactivity: how ref and reactive really work, why destructuring breaks updates, when to use each, and a copy-paste cheat sheet.
Open the playground →
JavaScript Proxy traps, live
Learn JavaScript Proxy and Reflect from the ground up — traps, invariants, and reactive state — with worked examples and a copy-paste cheat sheet.
Open the playground →
:where() specificity sandbox — interactive playground
You keep reaching for !important to override a component's styles. There's a selector that fixes this by contributing zero specificity, on purpose.
Open the playground →
Import maps — interactive resolver
Bare specifiers like import _ from 'lodash' don't work in a browser without a bundler — unless you tell the browser how to resolve them yourself, in one JSON block instead of forty hardcoded URLs.
Open the playground →
navigator.sendBeacon — interactive playground
When the page unloads, the browser may cancel any in-flight fetch or XHR before it completes. navigator.sendBeacon sends a POST the browser commits to delivering, even after the document is gone.
Open the playground →
inert vs aria-hidden — the modal focus leak
A keyboard-only pass found a background button still worked while a modal was open — aria-hidden had hidden it from screen readers but never touched focus or clicks. One boolean attribute, inert, closes that gap in a single line.
Open the playground →
URLPattern route matcher — interactive playground
A service worker's route regex was missing one anchor and started caching live edit forms as if they were read-only pages. URLPattern, native since 2021, doesn't let you make that mistake.
Open the playground →
clamp() fluid type — interactive playground
A design system audit found five breakpoints for one heading. clamp() replaces all of them with one line that never jumps.
Open the playground →
CSS scroll-snap — interactive playground
A scroll listener, a debounce, and 200 lines of carousel-library glue code — replaced by three CSS properties that snap smoother than any of it did.
Open the playground →
CSS trig radial layout — interactive playground
CSS learned trigonometry. Here's the radial menu that used to need a resize listener — and doesn't anymore.
Open the playground →
height: auto animation — three techniques, live
CSS transitions have never been able to animate to height: auto, because auto isn't a number the engine can interpolate. calc-size() and interpolate-size finally give it real numbers — no JavaScript, no magic-number ceiling.
Open the playground →
navigator.locks — the four-tabs race, live
Users with multiple tabs open triggered a silent race: every tab refreshed the same expiring auth token at once, and the server started invalidating its own sessions. navigator.locks fixes it with a real mutex, no polling or localStorage hacks required.
Open the playground →
findLast() & findLastIndex() — search from the end
The usual workaround — `[...arr].reverse().find()` — allocates a full copy just to walk it backward. ES2023 added `findLast()` and `findLastIndex()` to search from the end without touching the original.
Open the playground →English B2: mixed conditionals — when the time of the condition and the result differ
The three textbook conditionals assume the if-clause and the result share a time frame. Real regret rarely does. Mixed conditionals are how you say a past mistake still shapes today.
Open the playground →
navigator.sendBeacon() — reliable unload data
Browsers cancel in-flight network requests when a page unloads. The common fix — synchronous XHR — is deprecated. `navigator.sendBeacon()` is the correct, fire-and-forget API designed exactly for this case.
Open the playground →Spanish A2: pretérito vs imperfecto — the photo and the film
Spanish has two past tenses and they are not interchangeable. One takes a photograph of a completed event; the other films the background it happened against.
Open the playground →
overscroll-behavior — interactive playground
When a scrollable container hits its edge, the page behind it starts scrolling too. Developers block this with JavaScript event handlers or body overflow tricks. overscroll-behavior is the CSS property that turns off scroll chaining in one line.
Open the playground →Turkish A2: -dı vs -mış — the past you saw and the past you heard about
Turkish has two past tenses, and the choice is not about time. One says you witnessed it; the other says you did not. Getting this wrong makes you sound like you are inventing things.
Open the playground →
MutationObserver — interactive playground
Watching for DOM mutations with setInterval or custom event dispatch is fragile and imprecise. The MutationObserver API delivers a callback exactly when attributes, text content, or child elements change — with full control over which types of mutations you watch.
Open the playground →English B1: used to, would, and be used to — three things that look alike
Used to walk, would walk, and be used to walking are not variations of one structure. Two describe the past, one describes a state, and mixing them is one of the most common B1 errors.
Open the playground →
CompressionStream — interactive playground
pako is one of npm's most downloaded packages — pulled in by thousands of projects to compress data before storing or sending it. CompressionStream and DecompressionStream do the same job natively, in any modern browser and Node.js 18+, with no dependencies and native C-speed execution.
Open the playground →Spanish A1: ser vs estar — two verbs for 'to be', and the line between them
Spanish splits 'to be' into ser and estar. The usual advice — permanent versus temporary — breaks immediately. Here is the line that actually holds.
Open the playground →
BroadcastChannel — interactive playground
Syncing state across browser tabs with localStorage events is a widely-used trick that requires JSON.stringify, event filtering, and careful cleanup. The Broadcast Channel API delivers messages between tabs directly, with none of the side effects.
Open the playground →