Skip to content
Small tool for viewing javascript syntax trees parsed by esprima
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc
public
src
.gitignore
LICENSE.txt
README.md
package-lock.json
package.json

README.md

JS Syntax Tree Explorer

Deployed here: https://brokensandals.github.io/js-syntaxtree-explorer/

This tool allows you to enter a piece of javascript source code and see it displayed side-by-side with a representation of its abstract syntax tree. Hovering over part of the tree will highlight the relevant part of code, and vice versa.

The code is parsed into a tree using the esprima library, so this tool can be used for understanding what the data structure produced by that library will look like for a given piece of code. You can display the tree in a styled format or as JSON.

Screenshot of styled view Screenshot of json view

Development

Typical development processes for a create-react-app app should be applicable.

To start the local server, use npm start.

To run tests, use npm test.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/brokensandals/js-syntaxtree-explorer.

License

This is available as open source under the terms of the MIT License.

You can’t perform that action at this time.