A VS Code extension that brings Data Structures and Algorithms to life! Visualize your array algorithms, execution flow, variable states, and pointer indices in real-time interactively inside the editor.
Features
Zero-Config Execution: No need to import custom libraries or use special APIs. Just write standard JavaScript!
Interactive Visualizations: Automatically detects numeric arrays in your local scope and renders them as animated bar charts.
Smart Pointer Highlighting: Automatically detects variables that act as array indices (like i, j, left, right) and visualizes them pointing to the elements.
Code Highlighting: Steps through your source code line-by-line as the algorithm runs so you know exactly what is executing.
Variable Inspector: View the state of all local variables dynamically at each step.
Playback Controls: Step forward, step backward, or use a slider to navigate execution history.
How to use
Open a JavaScript (.js) file in VS Code.
Write a standard algorithm in the file. (See the example below).
Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac).
Run the command Start DSA Visualizer. This will open the visualizer panel alongside your editor.
In the visualizer panel, click Run Code. The extension will capture the state step-by-step and enable the playback controls!
JavaScript Example
Try pasting this Bubble Sort example into your JS file and run the visualizer:
let arr = [29, 10, 14, 37, 14];
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
// The visualizer will detect 'i' and 'j' and highlight them!
if (arr[j] > arr[j + 1]) {
// Swap elements
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
Installation For Development
Clone the repository
Run npm install inside the project folder
Press F5 to open a new VS Code Extension Development Host window.
Try out the extension!
Requires Node.js.
Known Limitations
Currently supports visualizing 1-Dimensional Numeric Arrays. Support for Trees and Graphs is planned for future versions.
The execution timeout is capped at 3000ms to prevent infinite loops from locking the editor.
