{"id":21906124,"url":"https://github.com/evermake/syntax-visualizer","last_synced_at":"2025-03-22T07:20:07.487Z","repository":{"id":232157353,"uuid":"783603060","full_name":"evermake/syntax-visualizer","owner":"evermake","description":"Abstract Syntax Tree visualization web application.","archived":false,"fork":false,"pushed_at":"2024-04-08T08:29:29.000Z","size":2658,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-27T07:30:40.564Z","etag":null,"topics":["ast","javascript","node-coordinates-matrix","syntax-visualization","vue"],"latest_commit_sha":null,"homepage":"https://evermake.github.io/syntax-visualizer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evermake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-08T08:07:02.000Z","updated_at":"2024-04-10T00:41:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"0a2c2910-482e-4c67-898b-8c0cf3ecd1e9","html_url":"https://github.com/evermake/syntax-visualizer","commit_stats":null,"previous_names":["evermake/syntax-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermake%2Fsyntax-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermake%2Fsyntax-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermake%2Fsyntax-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evermake%2Fsyntax-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evermake","download_url":"https://codeload.github.com/evermake/syntax-visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244920039,"owners_count":20531927,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ast","javascript","node-coordinates-matrix","syntax-visualization","vue"],"created_at":"2024-11-28T16:41:25.068Z","updated_at":"2025-03-22T07:20:07.466Z","avatar_url":"https://github.com/evermake.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e🔭 Syntax Visualizer\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/tree.png\" width=\"200\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Programming languages syntax visualizer with\n  \u003cb\u003eAbstract Syntax Tree\u003c/b\u003e\n  \u0026\n  \u003cb\u003eNode Coordinates Matrix\u003c/b\u003e \n  representations\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Motivation](#motivation)\n- [Features](#features)\n- [Usage](#usage)\n- [Demo](#demo)\n- [Run locally](#run-locally)\n- [Stack](#stack)\n- [License](#license)\n\n## Motivation\n\n\u003e There are many programmers who want to understand the concept of an\n\u003e Abstract Syntax Tree, and, more importantly, there also people who study\n\u003e compilers and researchers who are interested in the Node Coordinates Matrix\n\u003e representation of the AST. The goal of this project is to create an online\n\u003e tool for generating AST and NCM from code in real time to make the process\n\u003e of exploring these concepts more convenient.\n\n## Features\n\n- [Node Coordinates Matrix](#nodes-coordinates-matrix)\n- Sharing snippets\n- Nodes highlighting\n- Restoring written code on page reopen\n- JavaScript language support\n\n## Usage\n\nOpen [Syntax Visualizer](https://evermake.github.io/syntax-visualizer/) in the browser and just type the code into the editor and see the result!\nPretty straightforward, right?\n\n## Demo\n\nhttps://user-images.githubusercontent.com/62389790/176512301-f7ea7d0e-c65b-4724-89d8-2c797d90def7.mov\n\n## Run locally\n\nYou can clone and run project locally:\n\n```bash\ngit clone https://github.com/evermake/syntax-visualizer.git\ncd syntax-visualizer\nnpm install\nnpm run dev\n```\n\ngit, nodejs (tested on version 16) and npm are required.\n\n## Nodes Coordinates Matrix\n\nNode Coordinates Matrix is a representation of \"an encoding of the inter-node relationships between nodes in an AST\" [[1]](#references).\nIn 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).\n\nPlease, read [this article](#references) for more information.\n\n## Stack\n\n- [Vue.js](https://vuejs.org/) as the frontend framework\n- [Pinia](https://pinia.vuejs.org/) as a state management framework\n- [TypeScript](https://www.typescriptlang.org/) as the language\n- [Vite](https://vitejs.dev/) as the build tool\n- [ESLint](https://eslint.org/) as the linter\n- [Prettier](https://prettier.io/) as the formatter\n- [CodeMirror](https://codemirror.net/) as the code editor\n- \"A\" grade as the motivation\n\n## References\n\n[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].\n\n## License\n\nThe project is licensed under a [MIT license](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevermake%2Fsyntax-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevermake%2Fsyntax-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevermake%2Fsyntax-visualizer/lists"}