UD5 Toolkit
Shamir's Secret Sharing Demo - Online Split & Recover Secret
Split a secret string into N shares where K are needed to recover. Educational cryptography demo. Uses simple XOR-based scheme. Local.
Tag: Chemistry Demonstration Videos
85+ toolssize‑container Demo - Online Intrinsic & Styled Queries
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
<selectlist> New HTML Element Demo - Online Rich Select
Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.
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.
CSS Cursor Playground - Online Preview All Pointer Styles
Hover over tiles to see every CSS cursor value in action. Quick visual reference for choosing the right UI feedback.
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.
Reporting API Demo - Online See CSP & Deprecation Reports
Send a test CSP violation report and see the ReportingObserver in action. Understand how monitoring works.
Font Loading API Demo - Online Wait for Fonts Ready
Use the document.fonts API to check if a font is loaded. Watch the ready promise. Avoid FOUT. JavaScript demo.
CSS visibility & display Demo - Online Show/Hide Effects
Compare visibility: hidden vs display: none. See how each affects layout and event listeners. Inline code.
CSS tab‑size Property Demo - Online Control Indentation
Set tab‑size to any number and see how tabs are displayed in a pre element. Essential for code snippets.
CSS Anchor Positioning Center Demo - Online Pin to Parent
Use anchor positioning to perfectly center a popover relative to its anchor. No JavaScript. See the modern approach.
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.
Dialog Focus Manager Demo - Online A11y Trap & Restore
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
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.
animation‑composition Demo - Online Blend Multiple Animations
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
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.
Selection & Range API Demo - Online Get/Set Selection
Select text and see the Selection object properties. Create ranges programmatically. Understand how rich‑text editors work.
Element Blend Mode Tester - Online See mix-blend-mode
Overlay colored blocks and images and apply all mix‑blend‑mode values. Understand how each mode works live.
CSS Grid Named Lines Demo - Online Complex Layouts
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
Trusted Types API Demo - Online Prevent XSS
See how Trusted Types prevents unsafe HTML assignment. Test against injected scripts. Modern security practice.
Web Push Subscriber Demo - Online Test Notifications
Request notification permission and create a push subscription. See the subscription object. Learn how web push works.
flex vs inline‑flex Demo - Online Container Behavior
Place two containers side by side to see how inline‑flex differs from flex. Understand block vs inline formatting.
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.
caption‑side CSS Property Demo - Online Table Caption Position
Place a table caption on top, bottom, or inline‑start/end. See the live change. Copy the code.
empty‑cells CSS Property Demo - Online Table Visibility
Toggle between show and hide for empty table cells. Understand how it affects borders and backgrounds.
CSS white‑space Property Demo - Online See Wrapping Behavior
Toggle between normal, nowrap, pre, pre‑wrap, and pre‑line to understand how whitespace is handled. Live text example.
Fetch Upload Progress Demo - Online Track XHR & Fetch
See how to implement file upload progress using both fetch and XHR. Real‑time bar and code snippets for your project.
CSS Cursor Demo - Online Preview All Pointer Styles
Hover over tiles to see every CSS cursor value in action. Quick visual reference for choosing the right UI feedback.
Content Indexing API Demo - Online Show in System Launcher
Add web content to the device’s content index (like Google Discover). See the indexed items and delete them.
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.
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.
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.
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.
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.
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.
CSS Scroll Snap Demo - Online Carousel & Gallery
Build a horizontal scroll‑snap container with configurable snap‑type and alignment. Perfect for image galleries.
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.
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.
OfflineAudioContext Demo - Online Render Audio Fast
Process audio faster than real‑time with OfflineAudioContext. Apply filters and export the result. Dev tool.
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.
CSS appearance Property Demo - Online Reset Native Styles
Reset native styling on form elements with appearance: none. See before and after. Essential for custom forms.
caret‑color CSS Demo - Online Colorful Text Cursors
Change the text input cursor color. See the effect live. Copy the minimal CSS. Simple but delightful.
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.
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.
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.
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.
CSS resize Property Demo - Online User‑Resizable Element
Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.
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.
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.
<datalist> Autocomplete Tester - Online ComboBox Demo
See how <datalist> works across browsers. Test with many options. Copy the minimal markup. Simple native autocomplete.
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.
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.
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.
image‑rendering CSS Demo - Online Crisp or Smooth
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
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.