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
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
- 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
$node
in 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
nodeToRange
method (this is for highlighting).
- Implement the
getNodeName
method (this is for quick look through the tree).
- Implement
opensByDefault
method for auto-expansion of specific properties.
- Define
_ignoredProperties
set or implement forEachProperty
generator method for filtering.
- Provide a
renderSettings
method 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.