Visualizer for JavaScript code into an abstract syntax tree and a parallel array representations.
Description • Demo • How to use • Features • Installation • Contribution • Frameworks used • References
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.
Follow the link to use the website.
- Enter the code in the “code” block.
- The program will automatically build images of the tree and the array.
- You can hover on any item of tree or array to see corresponding parts of code.
- You can fold constant expressions (yellow nodes in tree) by clicking on them.
- ⏩ 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
- Install Node.js by the following link nodejs.org
- Clone the repository
git clone https://github.com/InnoSWP/SyntaxTreeVisualizer
- Open project folder
- Install dependencies
npm install
- Run the project in development mode
npm start
- Install Docker on your computer docker.com
- Pull image markovav/syntax_tree_visualizer:latest
docker pull markovav/syntax_tree_visualizer
- Create a container using this image
docker run -p 80:3000 -d --name syntax-tree-visualizer markovav/syntax_tree_visualizer
To contribute to the project, create a pull request with a detailed explanation, written tests, and no SonarCloud alerts.
- Code editor – CodeMirror
- Parser – Acorn
- Tree builder – reaflow
[1] Aaron W. Hsu, "The key to a data parallel compiler | Proceedings of the 3rd ACM SIGPLAN International Workshop on Libraries, Languages, and Compilers for Array Programming", 2016. [Online]. Available: https://dl.acm.org/doi/10.1145/2935323.2935331 [Accessed: May 27, 2022]