Educational Tools - School & Teaching

!important in Layers Tester - Online Cascade Behavior

Understand how !important behaves inside @layer vs unlayered styles. Interactive example. Avoid common pitfalls.

Developer Tools cascade CSS important @layer

size‑container Demo - Online Intrinsic & Styled Queries

Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.

Developer Tools container queries CSS demo size‑container

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.

Developer Tools appearance CSS demo native

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.

Developer Tools assembler SIC simulator two‑pass

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.

Developer Tools generator list Python range

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.

Developer Tools commandfor declarative demo HTML

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.

Developer Tools animation composition CSS 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.

Developer Tools CSS demo flex inline‑flex

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.

Developer Tools demo fetch progress upload

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.

Developer Tools anchor positioning CSS demo popover

CSS sin(), cos(), tan() Demo - Online Animated Trig

Use trigonometric functions in CSS to create circular animations and layouts without JavaScript. See the code.

Developer Tools cos CSS sin tan trigonometry

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.

Developer Tools CSS Custom Highlight API demo highlight

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.

Developer Tools API demo Range Selection

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.

Developer Tools alignment CSS Grid place‑items playground

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.

Developer Tools CSS demo inset shorthand

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.

Developer Tools caption‑side CSS demo table

empty‑cells CSS Property Demo - Online Table Visibility

Toggle between show and hide for empty table cells. Understand how it affects borders and backgrounds.

Developer Tools CSS demo empty‑cells table

Adaptive Bitrate Streaming Simulator - Online HLS/DASH Demo

Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.

Educational ABR HLS simulator streaming

Constraint Validation API Tester - Online Form Debug

Test required, pattern, minlength etc. See validity states and custom error messages. Learn browser‑native validation.

Developer Tools API Constraint Validation debug form

word‑break & overflow‑wrap Playground - Online Text Wrapping

Compare break‑all, keep‑all, and overflow‑wrap: anywhere/break‑word. Paste long words and see how they wrap.

Developer Tools CSS text word‑break wrapping

CSS Typed OM Playground - Online attributeStyleMap Explorer

Manipulate CSS values as typed objects using attributeStyleMap. Convert between CSSUnitValue, CSSMathSum, etc. Futuristic CSS‑in‑JS.

Developer Tools CSS Typed OM Houdini playground styleMap

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.

Developer Tools demo non‑blocking performance Web Worker

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.

Developer Tools CSS demo performance rendering intent

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.

Developer Tools auto‑resize demo JavaScript textarea

Error.cause Property Demo - Online Chained Errors

Create errors with the cause option and see chained error objects. Learn error wrapping for better debugging.

Developer Tools chained debug Error.cause JavaScript

CSS Grid Named Lines Demo - Online Complex Layouts

Use named grid lines instead of column numbers. See how they simplify placement. Visual, interactive learning.

Developer Tools CSS Grid demo layout named lines

aspect‑ratio with min/max Demo - Online Responsive Boxes

Combine aspect‑ratio with min‑/max‑width/height and see how the box responds. Understand sizing constraints. Copy the pattern.

Developer Tools aspect‑ratio CSS min‑width responsive

Traceroute Simulator - Online Visual Hop Path

Simulate a traceroute by entering a destination IP. Learn about AS paths and latency. Does not send real packets; educational visualisation.

Educational education network traceroute visual

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.

Developer Tools cascade CSS reset revert‑layer

Container Style Queries Playground - Online @container style()

Test the new style() function inside @container to query custom property values. Revolutionary component‑based responsive design.

Developer Tools component @container CSS style queries

CSS :has() Selector Playground - Online Test Parent Styling

Test the powerful :has() pseudo‑class. Write selectors like .card:has(img) and see the live result. Revolutionary for CSS architecture.

Developer Tools CSS :has parent playground

Number Base Explainer - Online Learn Binary, Hex

Enter a decimal number and see detailed step‑by‑step conversion to binary, octal, and hex. For students.

Educational binary explainer hex number base

<selectlist> New HTML Element Demo - Online Rich Select

Test the upcoming <selectlist> element for a fully customizable, stylable select dropdown. Experimental browser feature.

Developer Tools demo HTML new selectlist

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.

Educational digital signature sign verify Web Crypto

HTML Template Element Demo - Online Clone & Use

Use the <template> tag to hold hidden HTML that is cloned and injected by JavaScript. Common pattern.

Developer Tools clone demo HTML template

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.

Developer Tools handler JavaScript observe Proxy

Mutation Observer Tester - Online DOM Change Watcher

Modify the DOM via buttons and see MutationRecords logged. Understand childList, attributes, and subtree options.

Developer Tools API DOM Mutation Observer watch

Chromatic Adaptation Demo - Online See Color Under Different Lights

Simulate how a palette looks under daylight, tungsten, or fluorescent light. Understand metamerism. For accurate color work.

Color Tool chromatic adaptation color illuminant simulate

CSS Paint Worklet Live Editor - Online Houdini Sandbox

Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.

Developer Tools CSS editor Houdini Paint Worklet

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.

Developer Tools 3D backface‑visibility card flip CSS

CSS Container Queries Playground - Online Test @container

Experiment with CSS container queries in a live editor. Resize the container and see styles change based on its width/height. Learn modern responsive.

Developer Tools @container container queries CSS 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.

Developer Tools demo shadow DOM slot Web Components

CSS visibility & display Demo - Online Show/Hide Effects

Compare visibility: hidden vs display: none. See how each affects layout and event listeners. Inline code.

Developer Tools CSS demo display visibility

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.

Developer Tools CSS grid placement playground visual

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.

Educational country flag quiz shape

shape‑margin & shape‑image‑threshold Tester

Wrap text around an irregular shape and adjust the margin and alpha threshold. Magazines layout on the web.

Developer Tools CSS float shape‑margin shape‑outside

@property Registration - Online Custom CSS Property Animator

Register a custom CSS property with syntax, initial value, and inherits. Animate colors and numbers that couldn’t before.

Developer Tools animation CSS Houdini @property

SQL Query Example Generator - Online SELECT, JOIN, GROUP BY

Select a SQL clause (JOIN, GROUP BY, HAVING) and get a ready‑to‑run example query with explanation. Great for learning and teaching SQL.

Developer Tools example generator SQL training

Random Number Distribution Visualizer - Online Histogram

Generate random numbers and watch the live histogram. Compare uniform, normal, and exponential distributions.

Educational distribution histogram normal random

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.

Developer Tools CSS hypot pow sqrt

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.

Developer Tools abs CSS math sign

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.

Developer Tools clip margin CSS demo overflow

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.

Educational payload sandbox security XSS

Unicode Property Regex Tester - Online \p{Script=Greek}

Test regular expressions with Unicode property escapes like \p{Emoji}. See matches live. Modern regex power.

Developer Tools property regex tester Unicode

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.

Developer Tools demo non‑blocking performance Web Worker

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.

Developer Tools comparison CSS Grid Flexbox layout

Positioning Playground - Online Absolute & Relative Offset

Drag a positioned box and see the top/right/bottom/left values change. Understand containing blocks. Visual.

Developer Tools absolute CSS playground position

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.

Developer Tools CSS dark mode demo media query

@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.

Developer Tools cascade CSS @layer priority

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.

Developer Tools auto‑rows CSS Grid demo implicit tracks