Awesome WebSims

A curated list of interactive software tools for seeing, testing, and understanding how technology works.

The list, better visualized.
WEBSIMS.ORG

Contents

• AST
• Blockchain
• Block Programming
• CSS
• Data Structures
• Git
• JavaScript
• JSX & Babel
• Messaging
• Regex
• Sass
• SQL
• TypeScript

AST

• AST Explorer — Paste code in many languages and explore its abstract syntax tree live across dozens of parsers.

Blockchain

• Anders Brownworth — Blockchain Demo — Move from hashes to blocks, distributed chains, and tokens in a classic step-by-step demonstration.
• Blockchain Demo — Experiment with blocks, proof of work, peers, and consensus across a simulated network.
• Blockchain Simulator — Change chains, blocks, and mining difficulty inside a focused blockchain sandbox.

Block Programming

• Blockly Games — Learn programming logic through drag-and-drop puzzles that progress from blocks to JavaScript.

CSS

• CSS Grid Garden — Grow a carrot garden by solving progressively harder CSS Grid placement puzzles.
• Flexbox Froggy — Guide frogs home by writing Flexbox properties through a sequence of interactive levels.

Data Structures

• B-Tree Visualizer — Insert and delete keys while a B-tree splits and rebalances node by node.
• B+ Tree Visualizer — Insert and delete keys while watching the B+ tree structure used by database indexes change.

Git

• Explain Git with D3 — Run Git operations in a sandbox and watch the commit graph update immediately.
• Learn Git Branching — Practice branching, merging, and rebasing while an animated commit tree explains each command.

JavaScript

• JS Bubbles — Scope — Visualize lexical scope as nested bubbles and see which variables each function can reach.
• JS-Interpreter — Run JavaScript inside a sandboxed, step-by-step interpreter created by Neil Fraser.
• JSV9000 — Event Loop — Step through the call stack, task queue, and microtask queue as JavaScript executes.

JSX & Babel

• Babel REPL — Transform JSX and modern JavaScript into the plain output produced by Babel.

Messaging

• RabbitMQ Simulator — Route messages through exchanges and bindings while queues update in real time.

Regex

• RegExr — Build and test regular expressions with live matches, explanations, and a reference library.

Sass

• Sass Playground — Write Sass or SCSS and inspect the compiled CSS side by side.

SQL

• SQL Visualiser — Follow rows through FROM, JOIN, WHERE, and SELECT to see how a query produces its result.

TypeScript

• TypeScript Playground — Explore type inference, compiler options, and emitted JavaScript in the official playground.

Contributing

Found/Own a genuinely interactive tool that belongs here? Open a suggestion or submit a pull request. You can also report a broken link.