Syntax Tree Visualizer 🌳

Visualizer for JavaScript code into an abstract syntax tree and a parallel array representations.

Description

Syntax Visualizer is an interactive webpage for vizualizing JavaScript code in forms of abstract syntax tree (AST) and parallel array representations. The page contains three fields: the code editor, the AST representation, and the parallel array representation. When you enter the code, the representations are immediately generated.

Demo

How to use?

Follow the link to use the website.

1. Enter the code in the “code” block.
2. The program will automatically build images of the tree and the array.
3. You can hover on any item of tree or array to see corresponding parts of code.
4. You can fold constant expressions (yellow nodes in tree) by clicking on them.

Examples

• Factorial function
• Classes

Features

• ⏩ Immediate AST and parallel array generation
• 🛠️ Code editor with syntax highlighting and code refactoring (Ctrl+Alt+L)
• ↩️ UNDO (Ctrl+Z) and REDO (Ctrl+Y) functionality
• 💡 Highlighting of similar parts
• 🔗 Share the result via auto-generated URL
• 👨‍💻 Folding of constant expressions

Installation

Manual installation

1. Install Node.js by the following link nodejs.org
2. Clone the repository

git clone https://github.com/InnoSWP/SyntaxTreeVisualizer

3. Open project folder
4. Install dependencies

npm install

5. Run the project in development mode

npm start

Using Docker

1. Install Docker on your computer docker.com
2. Pull image markovav/syntax_tree_visualizer:latest

docker pull markovav/syntax_tree_visualizer

3. Create a container using this image

docker run -p 80:3000 -d --name syntax-tree-visualizer markovav/syntax_tree_visualizer

Contribution

To contribute to the project, create a pull request with a detailed explanation, written tests, and no SonarCloud alerts.

Frameworks used

• Code editor – CodeMirror
• Parser – Acorn
• Tree builder – reaflow