See how the web actually works

WebSims is a directory of the best interactive simulators and playgrounds for web technologies — and the home of our own sims. Run JavaScript step by step, watch a B-tree rebalance, break a blockchain, replay a git rebase. Stop reading about it. Watch it run.

24 tools · 13 categories · 1 built by WebSims

Browse the directory

Pick a technology, see it run

Every category collects the best interactive simulators, visualizers and playgrounds for a web technology — hand-curated, all runnable in your browser.

All simulators

6 tools

JavaScript

Watch the engine run your code — scope chains, the event loop, and execution, step by step.

Explore

1 tool

React

Components, hooks, props, state and the render lifecycle — visualized.

Explore

2 tools

CSS

Play your way to mastery of Flexbox and Grid.

Explore

1 tool

Regex

Build, test and understand regular expressions in real time.

Explore

2 tools

Git

Branch, merge and rebase without fear — visualized as a graph.

Explore

3 tools

Blockchain

Mine blocks, sign transactions and break a chain to see why hashing matters.

Explore

2 tools

Data Structures

Insert, split and rebalance B-trees and more — visualized as you go.

Explore

2 tools

Block Programming

Snap blocks together to learn programming logic — no syntax required.

Explore

1 tool

TypeScript

Type, hover and infer — see what the compiler really knows.

Explore

1 tool

JSX & Babel

See exactly what JSX and modern syntax compile down to.

Explore

1 tool

Sass

Write Sass, see the compiled CSS instantly.

Explore

1 tool

SVG

Understand the path data and coordinate system behind vector graphics.

Explore

1 tool

AST

Turn source code into a syntax tree and explore every node.

Explore

Community favorites

Simulators worth bookmarking

A taste of what's inside — legendary tools that made hard concepts finally click for thousands of developers.

visualizer JavaScript

JSV9000 — Event Loop

An event loop visualizer. Step through the call stack, task queue and microtasks as they fire.

jsv9000.app

game CSS

Flexbox Froggy

Guide Froggy home by writing Flexbox properties. The canonical way to learn flex.

flexboxfroggy.com

game Git

Learn Git Branching

The best interactive git tutorial. Run commands and watch the commit tree animate through levels.

learngitbranching.js.org

simulator Blockchain

Blockchain Demo

Interactive walkthrough of blocks, nodes, proof-of-work and consensus across a network.

blockchaindemo.io

visualizer Data Structures

B-Tree Visualizer

Insert and delete keys and watch a B-tree split and rebalance node by node.

Benjamin Dicken

playground TypeScript

TypeScript Playground

Official TS playground — write types, hover to inspect inference, and view the compiled output.

TypeScript

Built by WebSims

We don't just list sims. We build them.

We were surprised no one had made a proper, deeply interactive JS simulator — so we made it. It's the first of a whole series, each one designed to make invisible machinery visible.

simulator by WebSims

WebSims JS

Our own super-interactive JS simulator. Run arbitrary code and watch evaluation, memory, scope and the call stack unfold one step at a time.

WebSims

Web2 series roadmap

JS Live

Pure JS: console, timeouts, async, scope, the event loop.
Browser Next

URLs, requests/responses, HTML → DOM, rendering steps.
Frontend Planned

Browser + JS + ESM + full DOM rendered step by step.
React Planned

Components, hooks, props/state, lifecycle & render steps.

…Node, Backend, Fullstack, Blockchain, Web3 and more to come.

Built a simulation tool? Get it in front of the people who'll love it.

Dear educator — if you've built an amazing interactive tool for the web, list it in the directory. Become an early member of the WebSims community and help millions of learners and developers, juniors and seniors alike.

Submit your tool Try the JS simulator