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.
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 pow(), sqrt(), hypot() Demo - Online Trigonometric Functions
Experiment with exponential, square root, and hypotenuse functions in CSS. See live computed values. Modern CSS math.
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.
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.
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.
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.
Subnetting Practice Quiz - Online CIDR & IP Drills
Randomly generated subnetting questions. Calculate network address, broadcast, and usable range. For CCNA prep.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
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.
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.
Page Replacement Simulator - Online FIFO, LRU, Optimal
Simulate memory page reference strings with FIFO, LRU, and Optimal algorithms. See page fault count. OS concept demo.
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.
Recursion Tree Visualizer - Online See Fibonacci Calls
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
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.
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.
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.
size‑container Demo - Online Intrinsic & Styled Queries
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
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.
<selectlist> New HTML Element Demo - Online Rich Select
Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Error.cause Property Demo - Online Chained Errors
Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.
Regex Lookaround Tester - Online Experiment with Lookahead
Practice positive/negative lookahead and lookbehind. See matches highlighted live. Master advanced regex.
WeakMap & WeakSet Demo - Online Garbage‑Collected Collections
See how WeakMap and WeakSet work. Add objects as keys and watch references. Understand memory‑efficient collections.
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.
image‑rendering CSS Demo - Online Crisp or Smooth
Toggle image‑rendering: auto, pixelated, crisp‑edges on a scaled image. Essential for pixel art display.
Unicode Property Regex Tester - Online \p{Script=Greek}
Test regular expressions with Unicode property escapes like \p{Emoji}. See matches live. Modern regex power.
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.
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.
Digital Signature Sign & Verify - Online Web Crypto
Sign a message with a private key and verify the signature with the public key. Learn digital signature flow.
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.
Event Loop Visualizer - Online See Call Stack & Microtask Queue
Watch a simulation of how the JavaScript event loop handles synchronous code, microtasks, and macrotasks. Learn async.
Promise State Viewer - Online Check Resolve & Reject
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Generator Function Explorer - Online Step by Step
Write a generator function and step through it with next(). See values and done state. Understand iterators.
JavaScript Proxy Playground - Online Observe Object
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
AbortController Demo - Online Cancel Fetch & Event
Start a fetch request and cancel it with AbortController. See how to implement request cancellation. Interactive.
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.
3D Color Space Viewer - Online Explore RGB Cube
Rotate and explore the RGB color space as a 3D cube. Pick colors directly from the volume. Interactive Three.js.