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

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:

1. step forward
2. step backward
3. pause execution
4. inspect structures
5. 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/