CSS Grid Playground - Online Interactive Layout Builder
Experiment with CSS Grid properties visually. Add rows, columns, and areas. See the grid in action and copy the code.
UD5 Toolkit
Experiment with CSS Grid properties visually. Add rows, columns, and areas. See the grid in action and copy the code.
Animated SVG instructions for classic paper airplane models (dart, glider). No text, visual learning.
Use the new `name` attribute on <details> to create an exclusive accordion with zero JavaScript. Copy the clean HTML.
Spin the globe and get a random country or city to visit. Learn a fun fact. Plan your next adventure. Local data.
Upload a photo, enter details, and create a tear-off style lost pet poster. Instant PDF download.
See how revert‑layer removes styles from the current cascade layer and falls back to the previous one. Fix specificity wars.
Paste a PEM/DER certificate and decode all fields: issuer, subject, validity, SANs, and fingerprint. Pure JavaScript parser.
Record your stamps with Scott number, condition, and value. Add images. Browse your collection. Local storage only.
Generate a valid BookCrossing BCID with checksum for your free book tracking label. Follows BCID format rules. Fun for sharing books.
Generate UUID v7 identifiers that are lexicographically sortable and timestamped. Perfect for databases. All local.
Encode letters to their position in the alphabet (A=1, B=2...) and decode back. A classic puzzle tool. No data leaves your device.
Create Latin squares for experimental design or tournament scheduling. Visual and copyable. No server required.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Compress and decompress text using the browser's native Compression Streams API. See the binary output size.
Connect a game controller and see every button press, axis movement, and vibration test. Uses the Gamepad API.
Test required, pattern, minlength etc. See validity states and custom error messages. Learn browser‑native validation.
Unified input demo: see pressure, tilt, and type from any pointer. Compare pointerType values. Essential for drawing apps.
Modify the DOM via buttons and see MutationRecords logged. Understand childList, attributes, and subtree options.
Drag to resize a box and see the Resize Observer callback fire. Get contentRect and borderBoxSize. Learn the API.
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Toggle a screen wake lock to prevent the device from dimming or sleeping. See the lock state and learn the API.
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
Register a one‑off background sync and see it fire when connectivity returns. Debug service worker sync logic.
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Read, write, and delete cookies using the modern Cookie Store API. Monitor change events. No more document.cookie parsing.
Connect a gamepad and see all button presses and axis movements visually. Check that every input is detected correctly.
Trigger different vibration patterns on mobile devices. Test if your phone supports haptic feedback. Simple demo.