UD5 Toolkit
Letter Formation Animator – Online Watch Handwrite Letters
Click a letter and watch an animated stroke order for print or cursive. Good for kids learning to write.
Educational Tools - School & Teaching
99+ toolsRandom Dog Breed Display - Online Learn Traits & Temperament
Click to see a random dog breed with key facts (size, energy, lifespan). Built-in breed database. Fun way to explore dog breeds. Local only.
size‑container Demo - Online Intrinsic & Styled Queries
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
Binary‑Decimal Conversion Quiz - Online Speed Drills
Test how fast you can convert between binary and decimal. Timed drills with increasing difficulty. Learn base‑2 fluency.
Binary Number Explainer - Online Visual Bit Representation
Enter a decimal number and see a visual breakdown of bits, place values, and bitwise operations. Learn binary easily.
Python range() to List - Online See Generated Numbers
Write a Python range expression and instantly see the list of numbers it produces. Quick playground for beginners.
<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.
Color Distance ΔE Calculator - Online Perceptual Difference
Enter two hex colors and compute the CIE76, CIE94, and CIEDE2000 color difference. Understand how humans perceive color similarity.
Regex Lookaround Tester - Online Experiment with Lookahead
Practice positive/negative lookahead and lookbehind. See matches highlighted live. Master advanced regex.
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 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.
Subnetting Practice Quiz - Online CIDR & IP Drills
Randomly generated subnetting questions. Calculate network address, broadcast, and usable range. For CCNA prep.
Two‑Pass Assembler Simulator - Online Simple SIC/XE
Write a simple assembly program and see the pass‑1 and pass‑2 symbol tables and object code. Systems programming helper.
CPU Scheduler Simulator - Online FCFS, SJF, Round‑Robin
Enter processes and see how different scheduling algorithms handle them. Gantt chart generation. OS course helper.
Regex State Machine Visualizer - Online DFA Diagram
Enter a simple regular expression and see its equivalent Deterministic Finite Automaton diagram. Learn how regex engines work.
Big‑O Complexity Visualizer - Online Compare O(1) to O(n!)
Plot different Big‑O complexities on a chart. See how O(log n) stays flat while O(2^n) explodes. Educational reference.
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.
revert‑layer & @layer Debugger - Online Visual Specificity
Set up multiple @layers and use revert‑layer to fall back. See the computed style and cascade resolution live.
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.
Text Similarity Checker - Online Cosine & Jaccard
Paste two texts and see cosine and Jaccard similarity scores. Understand how close two documents are. All local math.
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.
XSS Payload Sandbox - Online Test Escape Characters
Paste a potential XSS vector and see if it executes in a sandboxed iframe. For security researchers and education.
Error.cause Property Demo - Online Chained Errors
Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.
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.
CSS Grid Named Lines Demo - Online Complex Layouts
Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.
OKLCH Color Explorer - Online Perceptually Uniform Space
Browse the OKLCH color space with sliders for lightness, chroma, and hue. See the CSS oklch() code. Modern and accessible.
Unicode Property Regex Tester - Online \p{Script=Greek}
Test regular expressions with Unicode property escapes like \p{Emoji}. See matches live. Modern regex power.
Blob URL Generator - Online Create Temporary Object URL
Create a Blob from text or a file and generate a temporary URL for it. Understand the Blob API. Dev demo.
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.
Text Transform Functions Playground - Online Preview CSS
Type text and instantly see it rendered with text‑transform: uppercase, lowercase, capitalize, and full‑width. Copy CSS.
Adaptive Bitrate Streaming Simulator - Online HLS/DASH Demo
Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.
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.
!important in Layers Tester - Online Cascade Behavior
Understand how !important behaves inside @layer vs unlayered styles. Interactive example. Avoid common pitfalls.
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.
CSS sin(), cos(), tan() Demo - Online Animated Trig
Use trigonometric functions in CSS to create circular animations and layouts without JavaScript. See the code.
CSS abs() and sign() Functions Demo - Online Math
Use the abs() and sign() CSS functions to create interesting layouts. See computed values live. Cutting‑edge CSS.
Two‑Value Display Syntax Playground - Online Outer & Inner
Explore the new two‑value display syntax like `display: block flex`. See what each inner/outer pair does visually.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
Banker's Algorithm Simulator - Online Deadlock Avoidance
Set up resources and processes and run the Banker's algorithm to check for safe states. Classic OS deadlock avoidance demo.
Recursion Tree Visualizer - Online See Fibonacci Calls
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
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.
Brute Force Time Estimator - Online Password Cracking Simulation
Enter a password and see the estimated time it would take to crack using brute force at different speeds. Educational.
SQL Injection Simulator - Online Educational Sandbox
Test SQL injection inputs on a mock database and see the resulting query. Learn how to prevent SQLi. No real data.
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.
WeakMap & WeakSet Demo - Online Garbage‑Collected Collections
See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memory‑efficient collections.
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.
CSS Smooth Scroll Demo - Online scroll‑behavior
Toggle scroll‑behavior: smooth and click anchor links to see the scrolling animation. Implement modern UX.
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.
Grid vs Flexbox Layout Tester - Online Choose the Right Tool
Build the same layout with both Grid and Flexbox side by side. See the code differences and visual results.