Free, open study visualizers

Watch every CSE
idea visualize, not just read.

Visualizer Hub is a curated home for real, working visualizer tools covering Data Structures & Algorithms, Machine Learning, Systems, Programming Languages, and beginner-friendly CS education — each one a full tool you can open and use right now.

More open-source visualizer tools, built for learners across CSE
bubble_sort.py running
comparisons: 0
Data Structures & Algorithms
Machine Learning
Computer Architecture
Programming Languages
CS Education for Beginners
All open source on GitHub
Data Structures & Algorithms
Machine Learning
Computer Architecture
Programming Languages
CS Education for Beginners
All open source on GitHub
16
Standalone visualizer tools
5
CSE subject areas covered
100%
Open source on GitHub
0
Accounts required to use them
Why Visualizer Hub

Every abstract idea, made visible

Sorting, neural nets, CPU pipelines, code execution — the concepts that are hardest to picture in text are exactly what these tools are built to show, one step at a time.

More tools, one home

Instead of one do-it-all engine, Visualizer Hub links out to more focused, purpose-built visualizers — each maintained as its own open-source tool on GitHub.

Step forward or back

Every linked visualizer lets you move through execution at your own pace, forward or backward.

Real code, really running

Write your own C, JavaScript, or Bangla pseudocode and watch it actually execute, not a pre-baked animation.

Open source, always

Every tool is public on GitHub — read the code, fork it, or contribute back.

Open access, no gatekeeping

There's no sign-in wall between you and any tool. Click through, and you're using the tool.

How to use it

Three passes, and it sticks

The same loop works whether you're on sorting, a CPU simulator, or a JavaScript trace table.

Pick a tool

Browse the catalog below and open the tool that matches what you're studying.

Step through it

Load an example or write your own code, then move one operation at a time through the visualization.

Read the source

Every tool is open source — dig into the repo itself once the visual has made the idea click.

Visualizer catalog

Real visualizer tools here

Filter by area, then click through — every card opens the live tool in a new tab.

Programming Languages Advanced

C Programming Manual Tracing

Practice manual tracing for C programming.

WebsiteOpen ↗
Programming Languages Advanced

C Code Visualizer

Step by Step C Code Execute and Visualize easily using C Code Visualizer

WebsiteOpen ↗
Programming Languages Advanced

C Visualizer Plus

Write any C code in the editor or pick an example then click Visualize for step-by-step execution.

WebsiteOpen ↗
Programming Languages Beginner

Python Visualizer for kids

Interactive Python visualizer built for kids just starting to code.

WebsiteOpen ↗
Data structures & algorithms

CSE DSA Visualizer

A smart Data Structure and Algorithm (DSA) visualizer Using CSE DSA Visualizer.

WebsiteOpen ↗
Data structures & algorithms

Algorithmica DSA

A smart Data Structure and Algorithm (DSA) visualizer.

WebsiteOpen ↗
Machine learning

ML Neural Atlas

26 machine-learning ideas, worked by hand then set loose to run live in your browser.

WebsiteOpen ↗
Systems & architecture

CPU-Sim-Viz

ভিজুয়াল CPU সিমুলেটর - a visual CPU simulator.

WebsiteOpen ↗
Systems & architecture

Kernel Bench

An Interactive Operating Systems - OS fundamental Simulator.

WebsiteOpen ↗
Programming Languages Advanced

JS Visualizer Pro

A JavaScript visualizer pro tool for tracing execution step by step.

WebsiteOpen ↗
Programming Languages Advanced

JS OOP IDE

A JavaScript OOP IDE and class-structure visualizer.

WebsiteOpen ↗
Beginner education

JS Trace Table

Build a trace table for JavaScript code and run it line by line.

WebsiteOpen ↗
Beginner education

JSFlowRun

Turn JavaScript code into a flowchart, then run it.

WebsiteOpen ↗
Beginner education

Bangla2Flow

বাংলা কোড থেকে ফ্লোচার্ট ও কোড রান — turn Bangla code into a flowchart and run it.

WebsiteOpen ↗
Code
Beginner education

Flow2Code

Convert your flowchart to multiple programming languages source code.

WebsiteOpen ↗
Beginner education

Blockly Game

Learn programming concepts through interactive block games.

WebsiteOpen ↗
How it compares

Reading, watching, or tracing

Three common ways to learn a CSE concept, and what each one actually gives you.

MethodVisualizer Hub toolsStatic diagram / docsPassive video
Shows state changing over timeYes, frame by frameNo — one fixed snapshotYes, but fixed pace
Lets you pause on any stepYes, indefinitelyNot applicableYes, but loses sync
Runs your own code, not a fixed demoYes, on several toolsNoNo
Source is open to readYes, every toolSometimesUsually not
Requires an accountNo — open accessVariesOften yes
Quick glossary

Look up a term, then go watch it move

Every term below pairs with one of the tools in the Visualizer catalog above.

Binary Search

O(log n)

Halves the search space each step by comparing the target to the middle element of a sorted array — see Algorithmica-DSA.

Neural Network

ML

Layers of connected nodes that learn weights from data — trace one live in ML-Neural-Atlas.

Pipelining

Architecture

Overlapping the fetch, decode, execute, memory, and write-back stages of successive instructions — see CPU-Sim-Viz.

Trace Table

Languages

A line-by-line record of variable values as code executes — build one in JS-Trace-Table.

Flowchart

Languages

A diagram of a program's control flow, generated automatically in JSFlowRun and Bangla2Flow.

Class / Object

OOP

A blueprint and its instances in object-oriented code — inspect the structure live in JS-OOP-IDE.

From the learners

It finally looked like what it meant

"CPU-Sim-Viz explained pipelining in a way three semesters of lecture slides never did."

Priya N.
CS undergraduate

"I used C-Visualizer-Plus to actually watch my own pointer bugs happen instead of guessing at them."

Marcus O.
Backend engineer

"No login, no paywall — I just opened Algorithmica-DSA and started stepping through sorts before my exam."

Dr. Aiko Tanaka
CS lecturer
Questions

Before you start

No. Every tool in the catalog is a public, open-access tool — click through and you're using it, with no account or paywall.

Data Structures & Algorithms, Machine Learning, Systems & Architecture, Programming Languages, and beginner-friendly CS education, across more separate tools.

Each card links out to its own GitHub repository, where you'll find the live tool (or instructions to run it) along with the full source code.

Yes — every tool is open source, so you're welcome to open an issue, fork it, or submit a pull request directly on GitHub.

Each repository's README explains what the tool does and how to use it; some also include worked examples and notes alongside the code.

Free, always

Stop imagining the algorithm. Watch it.

More open-source visualizer tools, open right now — no account required.


সবসময় ফ্রি

বাংলা প্রোগ্রামিং হাব - এবার চলো বাংলায় কোড করি।

আটটি উন্মুক্ত বাংলা প্রোগ্রামিং টুল, এখনই ব্যবহারযোগ্য — কোনো অ্যাকাউন্ট ছাড়াই।


A Visualizer Course

Admission Going On - Programming24 School

A visuslizing school for visualizing any code step by step (2020-2026).