AST explorer
Paste or drop code into the editor and inspect the generated AST on https://astexplorer.net/
The AST explorer provides following code parsers:
- CSS:
- GraphQL
- Graphviz:
- Handlebars:
- HTML:
- Vue:
- ICU
- Java
- JavaScript:
- JSON:
- Lua:
- Markdown:
- MDX:
- Monkey
- PHP
- Pug
- Regular Expressions:
- Protocol Buffers:
- Scala
- Solidity:
- SQL:
- Svelte:
- WebIDL
- YAML:
Experimental / custom syntax
Depending on the parser settings, it not only supports ES5/CSS3 but also
- ES6: arrow functions, destructuring, classes, ...
- ES7 proposals: async/await, object rest / spread, ...
- JSX, known through React.
- Typed JavaScript (Flow and TypeScript)
- SASS
Transforms
Since future syntax is supported, the AST explorer is a useful tool for developers who want to create AST transforms. In fact, following transformers are included so you can prototype your own plugins:
- JavaScript
- babel (v5, v6)
- ESLint (v1, v2, v3)
- jscodeshift
- tslint
- HTML
- CSS
- MDX
- Regular Expressions
- Handlebars
More Features
- Save and fork code snippets. Copy the URL to share them.
- Copying an AST or dropping a file containing an AST into the window will parse the AST and update the code using escodegen.
- Otherwise, the content of text editor will be replaced with the content of the file (i.e. you can drag and drop JS files).
- Choose between multiple parsers and configure them.
- shift+click on a node expands the full subtree.
- Hovering over a node highlights the corresponding text in the source code
- Editing the source or moving the cursor around will automatically highlight the corresponding AST node (or its ancestors of it isn't expanded)
- You can use
$nodein the console to refer to the last opened/toggled AST node.
Contributions
I'm happy about any feedback, feature request or PR to make this tool as useful as possible!
How to add a new parser
- Go to
website/. - Install the new parser as dependency:
yarn add theParser - Copy one of the existing examples in
src/parsers/{language}. - Adjust the code as necessary:
- Update metadata.
- Load the right parser (
loadParser). - Call the right parsing method with the right/necessary options in
parse. - Implement the
nodeToRangemethod (this is for highlighting). - Implement the
getNodeNamemethod (this is for quick look through the tree). - Implement
opensByDefaultmethod for auto-expansion of specific properties. - Define
_ignoredPropertiesset or implementforEachPropertygenerator method for filtering. - Provide a
renderSettingsmethod if applicable.
How to add a new transformer
- Go to
website/. - Install the new transformer as dependency.
- Copy one of the existing examples in
src/parsers/{language}/transformers. - Adjust the code as necessary:
- Update metadata and
defaultParserID. - Load the right transformer (
loadTransformer). - Call the transformation method in
transform. - Change sample transformation code in
codeExample.txt.
Build your own version for development
IMPORTANT: For various reasons the project still requires Node.js version
16 (see .tools-versions). If you use a tool like
asdf switching versions will happen automatically.
- Clone the repository.
- Go to
website/. - Install all dependencies with
yarn install
Run yarn run build for the final minimized version.
Run yarn run watch for incremental builds.
Run yarn start to start a simple static webserver.