I Built an Interactive Data Structure & Algorithm Visualizer (with Live Java Debugging)

Omer Mualem — Thu, 05 Mar 2026 16:47:12 +0000

Understanding data structures and algorithms can be difficult when everything happens only in code.
Most students (like me) learn them through static diagrams or by reading pseudocode, but the actual execution can be hard to visualize.
That's why I built with the help of AI, a web platform that allows you to see algorithms and data structures evolve step-by-step in real time.

What the platform does?

The project combines two main ideas:

Interactive data structure visualization
Live Java execution debugging with heap visualization

Instead of just reading about algorithms, you can play them like a timeline.

You can:

step forward
step backward
pause execution
inspect structures
modify them directly Everything updates visually as the algorithm runs.

Supported Data Structures:

The platform currently supports 20+ interactive data structures, including Core structures like Graph, Array, Heap (Min / Max), Linear structures, Stack, Queue, Deque, Priority Queue, Singly Linked List, Doubly Linked List, Circular Linked List, Trees and indexing structures, Binary Search Tree, Red-Black Tree, B-Tree, B+ Tree, Trie, Segment Tree, Hash Table, Advanced structures, Binomial Heap, Fibonacci Heap and Union-Find

Each structure is fully interactive — you can edit nodes, move them, and run algorithms on them.

Algorithms:
Graph Algorithms

BFS
DFS
Bidirectional BFS
Dijkstra
Bellman-Ford
Floyd-Warshall
Johnson’s Algorithm
A*
Kruskal
Prim
Dinic
Edmonds-Karp
Tarjan SCC
Topological Sort
Graph Coloring
Bipartite Check
Cycle Detection
Articulation Points
Bridges
Bubble Sort
Selection Sort and so more.

Live Java Execution Visualization
One feature I wanted that most visualizers don’t provide is real program execution debugging.
You can write Java code in an embedded editor and run it inside a sandbox.

The platform uses:
JDI (Java Debug Interface)
Docker sandbox execution
automatic breakpoints

It captures snapshots of execution and visualizes:
stack frames
local variables
heap objects
collections

It also automatically detects common structures like:
ListNode
TreeNode
Graph Node
int[][]

and visualizes them without configuration.

Example
If you run code like this:
ListNode head = new ListNode(1);
head.next = new ListNode(2);
head.next.next = new ListNode(3);

the tool automatically renders it as a linked list visualization.

Architecture
The project is split into two main systems.
Frontend

Built with:
Next.js
React
TypeScript
Tailwind
Zustand
React Flow

The UI contains a canvas engine that allows:
panning
zooming
dragging nodes
Backend

The Java execution engine runs with:
Express
Docker
Java Debug Interface (JDI)

Execution snapshots are streamed to the frontend and replayed by the visualization engine.

Feedback welcome :)

This project is still evolving and I’d love feedback from developers and students.

are very welcome.

The link: https://visualds.net/

DEV Community: Omer Mualem

I Built an Interactive Data Structure & Algorithm Visualizer (with Live Java Debugging)