UD5 Toolkit
size‑container Demo - Online Intrinsic & Styled Queries
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
Educational Tools - School & Teaching
99+ toolsempty‑cells CSS Property Demo - Online Table Visibility
Toggle between show and hide for empty table cells. Understand how it affects borders and backgrounds.
Error.cause Property Demo - Online Chained Errors
Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.
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 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‑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.
<selectlist> New HTML Element Demo - Online Rich Select
Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.
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.
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.
Unicode Property Regex Tester - Online \p{Script=Greek}
Test regular expressions with Unicode property escapes like \p{Emoji}. See matches live. Modern regex power.
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.
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.
CSS Transform Origin Playground - Online Visual Pivot
Click on a box to set the transform‑origin point and see how rotations and scales change. Copy the CSS.
Country Flag Quiz by Shape - Online Guess the Nation
See a flag and pick the country among four choices. Timed rounds with score. Perfect for geography buffs. Local data.
PBKDF2 Key Derivation Demo - Online Password‑Based Key
Derive a strong cryptographic key from a password using PBKDF2 with SHA‑256. Adjust iterations and salt. Educational and test tool.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHED…) and see the animated transitions. Networking education.
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.
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.
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 3D Perspective Playground - Online Scene Builder
Set perspective and rotate children in 3D space. See the effect of perspective‑origin. Copy the CSS. Learn 3D transforms.
CSS Grid Placement Playground - Online Visual Area Builder
Drag items into grid cells and see the resulting grid‑area or line‑based placement code. Learn how auto‑placement and spanning work.
Constraint Validation API Tester - Online Form Debug
Test required, pattern, minlength etc. See validity states and custom error messages. Learn browser‑native validation.
Solar System Scale Model - Online Visual Comparison
See planets and orbits at true scale (or logarithmic). Scroll from the Sun to Pluto. Understand space distances. Canvas.
!important in Layers Tester - Online Cascade Behavior
Understand how !important behaves inside @layer vs unlayered styles. Interactive example. Avoid common pitfalls.
shape‑margin & shape‑image‑threshold Tester
Wrap text around an irregular shape and adjust the margin and alpha threshold. Magazines layout on the web.
backface‑visibility Demo - Online 3D Card Flip
Build a 3D card flip effect and toggle backface‑visibility. See the hidden back face. Copy the complete CSS.
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.
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.
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.
CPU Scheduler Simulator - Online FCFS, SJF, Round‑Robin
Enter processes and see how different scheduling algorithms handle them. Gantt chart generation. OS course helper.
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.
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.
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.
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 Grid Alignment Playground - Online Place & Align Tracks
Practice aligning grid items and tracks with the place‑items, align‑content, and justify‑content properties. Visual guide.
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 resize Property Demo - Online User‑Resizable Element
Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.
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.
Adaptive Bitrate Streaming Simulator - Online HLS/DASH Demo
Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.
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.
Historical Figures Timeline - Online Interactive Life Spans
See famous people's life spans on a draggable timeline. Compare who was alive at the same time. Educational fun.
Morse Code Oscillator & Key - Online Practice CW
Use your keyboard or mouse as a straight key. Hear the tone and see the dots/dashes. Perfect for learning CW. Local.
revert‑layer Demo - Online Reset to Previous Layer
See how revert‑layer removes styles from the current cascade layer and falls back to the previous one. Fix specificity wars.
@layer Priority Tester - Online Cascade Layer Order
Define multiple @layer blocks and see which styles win. Understand layer order and revert‑layer. Modern CSS architecture.
CSS Math Functions Tester - Online clamp(), min(), max()
Write expressions with clamp(), min(), max(), abs(), sign(), round() and see the computed value. Modern CSS calculations.
View Timeline Playground - Online Element‑In‑View Animations
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
CSS Typed OM Playground - Online attributeStyleMap Explorer
Manipulate CSS values as typed objects using attributeStyleMap. Convert between CSSUnitValue, CSSMathSum, etc. Futuristic CSS‑in‑JS.
structuredClone() Playground - Online Deep Copy Tester
Input any JavaScript object and see if structuredClone can deep‑copy it. Compare with JSON.parse/stringify. Learn transferables.
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.
CSS Easing Curves Visualizer - Online Cubic & Steps
Graph a cubic‑bezier or steps easing function and see a bouncing ball animation using it. Copy the CSS timing‑function.
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.
CSS sin(), cos(), tan() Demo - Online Animated Trig
Use trigonometric functions in CSS to create circular animations and layouts without JavaScript. See the code.
Recursion Tree Visualizer - Online See Fibonacci Calls
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.