https://github.com/evermake/syntax-visualizer
Abstract Syntax Tree visualization web application.
https://github.com/evermake/syntax-visualizer
ast javascript node-coordinates-matrix syntax-visualization vue
Last synced: 2 months ago
JSON representation
Abstract Syntax Tree visualization web application.
- Host: GitHub
- URL: https://github.com/evermake/syntax-visualizer
- Owner: evermake
- License: mit
- Created: 2024-04-08T08:07:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-08T08:29:29.000Z (about 1 year ago)
- Last Synced: 2025-01-27T07:30:40.564Z (4 months ago)
- Topics: ast, javascript, node-coordinates-matrix, syntax-visualization, vue
- Language: TypeScript
- Homepage: https://evermake.github.io/syntax-visualizer/
- Size: 2.53 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🔭 Syntax Visualizer
Programming languages syntax visualizer with
Abstract Syntax Tree
&
Node Coordinates Matrix
representations
## Table of Contents
- [Motivation](#motivation)
- [Features](#features)
- [Usage](#usage)
- [Demo](#demo)
- [Run locally](#run-locally)
- [Stack](#stack)
- [License](#license)
## Motivation
> There are many programmers who want to understand the concept of an
> Abstract Syntax Tree, and, more importantly, there also people who study
> compilers and researchers who are interested in the Node Coordinates Matrix
> representation of the AST. The goal of this project is to create an online
> tool for generating AST and NCM from code in real time to make the process
> of exploring these concepts more convenient.
## Features
- [Node Coordinates Matrix](#nodes-coordinates-matrix)
- Sharing snippets
- Nodes highlighting
- Restoring written code on page reopen
- JavaScript language support
## Usage
Open [Syntax Visualizer](https://evermake.github.io/syntax-visualizer/) in the browser and just type the code into the editor and see the result!
Pretty straightforward, right?
## Demo
https://user-images.githubusercontent.com/62389790/176512301-f7ea7d0e-c65b-4724-89d8-2c797d90def7.mov
## Run locally
You can clone and run project locally:
```bash
git clone https://github.com/evermake/syntax-visualizer.git
cd syntax-visualizer
npm install
npm run dev
```
git, nodejs (tested on version 16) and npm are required.
## Nodes Coordinates Matrix
Node Coordinates Matrix is a representation of "an encoding of the inter-node relationships between nodes in an AST" [[1]](#references).
In conjunction with the Key operator this concept is necessary for performing parallel computations over an AST: "...permits arbitrary computation over sub-trees of an AST using purely data-parallel array programming techniques" [[1]](#references).
Please, read [this article](#references) for more information.
## Stack
- [Vue.js](https://vuejs.org/) as the frontend framework
- [Pinia](https://pinia.vuejs.org/) as a state management framework
- [TypeScript](https://www.typescriptlang.org/) as the language
- [Vite](https://vitejs.dev/) as the build tool
- [ESLint](https://eslint.org/) as the linter
- [Prettier](https://prettier.io/) as the formatter
- [CodeMirror](https://codemirror.net/) as the code editor
- "A" grade as the motivation
## References
[1] A. W. H. I. University, A. W. Hsu, I. University, and O. M. V. A. Metrics, “The key to a data parallel compiler: Proceedings of the 3rd ACM SIGPLAN International Workshop on libraries, languages, and compilers for Array Programming,” _ACM Conferences_, 01-Jun-2016. [Online]. Available: https://dl.acm.org/doi/10.1145/2935323.2935331. [Accessed: 03-Jun-2022].
## License
The project is licensed under a [MIT license](LICENSE).