UD5 Toolkit
Elephant Toothpaste Demo Calculator - Online Reaction Ratios
Find safe mixing ratios for the classic elephant toothpaste demonstration. Volume adjustments for different container sizes.
Tag: Chemistry Demonstration Videos
85+ toolsFullscreen API Tester - Online Request & Exit Demo
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
View Transitions API Demo - Online Smooth Page Switch
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
EventSource Polyfill Demo - Online See SSE with Custom Headers
Demonstrate how to add custom headers and POST‑like functionality to EventSource using a polyfill. Code and example.
box‑decoration‑break Demo - Online Inline Box Fragmentation
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.
Periodic Background Sync Demo - Online PWA Feature
Register a periodic background sync to fetch fresh data even when the tab is closed. Understand the API and limits.
Web Locks API Demo - Online Resource Coordination
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
image‑rendering CSS Demo - Online Crisp or Smooth
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
CSS Grid Auto Placement Demo - Online How Items Flow
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
scrollbar‑gutter Tester - Online Prevent Layout Shift
Toggle scrollbar‑gutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Lazy Loading Demo - Online See Intersection Observer
Scroll down to see images load lazily. Code snippet provided. Learn how native loading='lazy' works.
OfflineAudioContext Demo - Online Render Audio Fast
Process audio faster than real‑time with OfflineAudioContext. Apply filters and export the result. Dev tool.
Web Push Subscriber Demo - Online Test Notifications
Request notification permission and create a push subscription. See the subscription object. Learn how web push works.
Roving Tabindex Keyboard Nav - Online Accessible List
See the roving tabindex pattern in action. Use arrow keys to navigate a list. Copy the accessible JavaScript pattern.
CSS Grid Baseline Alignment Demo - Online Typography Sync
See how align‑items: baseline works in grid to align different font sizes on the same baseline. Visual guide.
Built-in Translation API Demo - Online On‑Device Translate
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
scroll‑state Container Query Demo - Online Test stuck/snapped
Experiment with scroll‑state container queries to style elements when they are stuck, snapped, or overflowed. Experimental.
overscroll‑behavior Tester - Online Prevent Pull‑to‑Refresh
Test overscroll‑behavior: contain to prevent background scroll or pull‑to‑refresh. See the effect in a live demo.
overflow‑clip‑margin Demo - Online Visible Beyond Clip
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
CSS Scroll Snap Demo - Online Carousel & Gallery
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
Web Worker Fibonacci Demo - Online Non‑Blocking Calculation
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
position: sticky Playground - Online Sticky Headers & Footers
Scroll a container and see how sticky elements behave. Adjust top, bottom, and scroll margins. Copy the code.
prefers‑color‑scheme Live Preview - Online Dark/Light
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
Auto‑Fill vs Auto‑Fit Visualizer - Online CSS Grid
Resize the container and see the difference between repeat(auto‑fill, …) and auto‑fit. Understand responsive grid behavior.
Window Controls Overlay Demo - Online PWA Title Bar Customization
See how a PWA can extend content into the title bar area on desktop. Customize the window controls overlay.
Launch Handler API Demo - Online Control App Launch Behavior
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Custom Event Dispatcher Demo - Online Send & Listen
Create and dispatch custom events with detail. Listen on other elements. Understand pub/sub pattern in vanilla JS.
CSS Grid Named Lines Demo - Online Complex Layouts
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
UI Animation Timing Demo - Online Easing Presets
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
ES Modules in Browser Demo - Online See Import/Export
Write a module and import it. See how browser handles module scripts. Learn modern JS structure.
Dark Mode Toggle Demo - Online Respect System Preference
Implement a dark/light theme toggle that respects prefers‑color‑scheme. Copy the complete JavaScript and CSS.
CSS inset Property Demo - Online Shorthand for Top/Right/Bottom/Left
Set the inset property and see its logical shorthand equivalents. Copy the modern CSS for absolutely positioned elements.
object‑fit & object‑position Demo - Online Image Scale Control
Try all object‑fit values (fill, contain, cover, scale‑down) on an image. Adjust object‑position. Copy the CSS.
:focus‑visible vs :focus Demo - Online Accessible Outlines
See the difference between :focus and :focus‑visible on interactive elements. Learn which to use for better UX.
<datalist> Autocomplete Tester - Online ComboBox Demo
See how <datalist> works across browsers. Test with many options. Copy the minimal markup. Simple native autocomplete.
WebGPU Bunny Demo - Online Simple 3D Renderer
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Web Worker Image Filter - Online Heavy Processing Demo
Apply a convolution filter (blur, sharpen) using a Web Worker. See the UI stay responsive while processing. Learn multithreading in the browser.
CSS Grid Implicit Tracks Tester - Online Auto‑Rows & Columns
Add grid items beyond defined tracks and see how implicit rows/columns expand. Set sizes interactively. Master the grid.
CSS Grid Overlap Demo - Online Layered Layout Techniques
Place multiple grid items into the same cells to create overlapping layouts. Learn the technique visually. Copy code.
Custom Highlight API Demo - Online Highlight Text Programmatically
Use the CSS Custom Highlight API to style arbitrary text ranges without modifying the DOM. See the future of find‑in‑page.
Permissions Query API Demo - Online Check All APIs
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
isInputPending() API Demo - Online Yield to User
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
Web Component Slot Demo - Online Shadow DOM Playground
Create a custom element with named slots and see content projection in action. Learn Web Components basics.
CSS overflow Property Demo - Online Scroll & Clip Behavior
See how overflow: visible, hidden, scroll, and auto behave with real content. Clone to test with your text.
CSS resize Property Demo - Online User‑Resizable Element
Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.
CSS Anchor Positioning Demo - Online Popover to Anchor
Position a popover relative to its anchor element with the new CSS anchor positioning. Adjust and copy the code.
scroll‑padding & scroll‑margin Demo - Online Anchor Position
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
HTML Input Type Playground - Online Test All Fields
See every HTML input type in one page. Check browser support and styling. Copy sample markup. Quick frontend reference.
Web Worker Heavy Task Demo - Online Non‑Blocking
Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Platform Authenticator Demo - Online Fingerprint & Face ID
Test your device's built‑in biometric (Touch ID, Face ID, Windows Hello) using the Web Authentication API. Register and verify.
image‑orientation CSS Demo - Online Fix Rotated Photos
Control image‑orientation: from-image vs none. See how the browser interprets EXIF rotation. Fix portrait photos.
commandfor & command Attribute Demo - Online Declarative Actions
Use the new `commandfor` and `command` attributes to invoke actions on other elements without JavaScript. See the spec live.
Rendering Intent Hint Demo - Online content‑type CSS
Test how `content‑type: text/html` vs `content‑type: image/svg+xml` affects SVG rendering in the browser. Modern performance hint.
Auto‑Resize Textarea Demo - Online Grow with Content
A textarea that expands in height as you type. See the implementation and copy the code. No library needed.
Reporting API Demo - Online See CSP & Deprecation Reports
Send a test CSP violation report and see the ReportingObserver in action. Understand how monitoring works.
Shared Worker Demo - Online Cross‑Tab State
Set up a Shared Worker that shares state across multiple browser tabs. Counter and messaging demo. Advanced web.
WeakMap & WeakSet Demo - Online Garbage‑Collected Collections
See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memory‑efficient collections.
Drag & Drop File Upload Demo - Online With Preview
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
HTML Template Element Demo - Online Clone & Use
Use the <template> tag to hold hidden HTML that is cloned and injected by JavaScript. Common pattern.