Visualizer Snippets — Free Interactive Algorithm & CSS Concept Demos

Some concepts only click when you can watch them happen. A binary search narrowing its range, a hash table resolving a collision, the event loop draining its queues, a CSS specificity score deciding which rule wins. This collection is made of interactive explainers: each one turns an invisible process into something you can see, step through, and change.

Every visualizer is plain HTML, CSS, and vanilla JavaScript, with the logic written out in full so the code itself is part of the lesson.

Algorithms and data structures. Sorting, binary search, binary search trees, linked lists, stacks and queues, hash tables, tries, LRU caches, bloom filters, recursion trees, pathfinding, and a finite-state machine.

Systems concepts. Consistent Hashing Visualizer, Token Bucket Rate Limiter Visualizer, Reconnect Backoff Visualizer, and WebSocket vs Polling Visualizer show how distributed and networked systems behave under load.

JavaScript and browser APIs. The Event Loop Visualizer, Event Bubbling Visualizer, Debounce vs Throttle Visualizer, a requestAnimationFrame FPS meter, and working demos of BroadcastChannel, CompressionStream, the Web Locks API, requestIdleCallback, and the Web Animations API.

Modern CSS explained. Interactive playgrounds for :has(), color-mix(), aspect-ratio, backdrop-filter, cascade layers, nesting, container query units, clamp() fluid type, light-dark(), if(), subgrid, reading-flow, text-box-trim, text-wrap: balance, trigonometric functions, specificity, stacking contexts, the box model, flexbox alignment, and grid template areas.

Accessibility. Demos of :focus-visible versus :focus, live region announcements, and prefers-reduced-motion show what assistive technology and user preferences actually change.