JavaScript Code Visualizer is an interactive tool designed to visually understand JavaScript code execution. Paste or write JavaScript code into the visualizer to step through it incrementally. The visualizer interprets the code and shows representations of the code's behavior.
A live version can [not] be found at: https://www.code-vis.io/
Before you begin, ensure you have met the following requirements:
- You have installed the latest version of
node.js - You have installed the latest version of
npm - You have a Linux machine (not tested on Windows/macOS)
- You have
Dockerinstalled (Optional)
- Run
git clone https://github.com/jacques-artale/code-vis.git - Navigate to the project directory
cd code-vis/ - Install dependencies
npm install
npm run devruns the app in the development mode- Open http://localhost:8080 to view it in your browser.
npm run buildbuilds the app for productionnpm run startruns the app in production mode- Open http://localhost:3000 to view it in your browser.
npm run docker:buildbuilds a docker-image from the applicationnpm run docker:runcreates a running container from the image- Open http://localhost:3000 to view it in your browser.
npm run testruns the tests using Jest
| Currently Supported | Pending Support |
|---|---|
| ✅ Variable declarations (Primitive, Arrays, Objects) | ❌ Arrow functions |
| ✅ Variable assignment | ❌ Promises & Async/Await |
| ✅ Function declarations | ❌ Spread operator |
| ✅ Function calls | ❌ For-of statements |
| ✅ Return | ❌ Classes |
| ✅ Binary expressions | ❌ Default Parameters |
| ✅ Unary expressions | ❌ Map function |
| ✅ Update expressions (x++, x--) | ❌ Try-catch |
| ✅ If statements | ❌ Variable Hoisting |
| ✅ For statements | |
| ✅ While statements | |
| ✅ Do-while statements | |
| ✅ Switch case | |
| ✅ Ternary operation | |
| ✅ Break & continue | |
✅ Built-in functions:
|
- ✅ View current executing instruction
- ✅ View variables and their corresponding values
- ✅ View arrays (1D, 2D, and up)
- ✅ Highlighting for variable creation/access/modification
- ✅ View scopes & corresponding code location
- ✅ View output from console
- ✅ View AST
For a more detailed description see the Wiki.