fkling / astexplorer

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:
  • cssom
  • csstree
  • postcss + postcss-safe-parser & postcss-scss
  • rework
• GraphQL
• Graphviz:
  • redot
• Handlebars:
  • glimmer
  • handlebars
  • ember-template-recast
• HTML:
  • htmlparser2
  • parse5
  • @angular/compiler
  • @angular-eslint/template-parser
  • svelte
  • posthtml
  • hyntax
• Vue:
  • vue-template-compiler
  • @vue/compiler-core
  • vue-eslint-parser
• ICU
• Java
  • java-parser
• JavaScript:
  • acorn + acorn-jsx
  • babel-eslint
  • babylon
  • espree
  • esformatter
  • esprima
  • flow-parser
  • hermes-parser
  • meriyah
  • recast
  • seafox
  • shift
  • swc
  • traceur
  • typescript
  • typescript-eslint-parser
  • uglify-js
• JSON:
  • JSON
  • Momoa
• Lua:
  • luaparse
• Markdown:
  • remark
• MDX:
  • mdxhast
• Monkey
  • monkey
• PHP
  • php-parser
• Pug
• Regular Expressions:
  • regexp-tree
  • regexpp
  • regjsparser
• Protocol Buffers:
  • pbkit
• Scala
  • Scalameta
• Solidity:
  • solidity-parser-antlr
• SQL:
  • sqlite-parser
• Svelte:
  • svelte
• WebIDL
• YAML:
  • yaml
  • yaml-ast-parser

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
  • posthtml
• CSS
  • postcss
• MDX
  • mdx
• Regular Expressions
  • regexp-tree
• Handlebars
  • glimmer

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

1. Go to website/.
2. Install the new parser as dependency: yarn add theParser
3. Copy one of the existing examples in src/parsers/{language}.
4. 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

0. Go to website/.
1. Install the new transformer as dependency.
2. Copy one of the existing examples in src/parsers/{language}/transformers.
3. 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.

1. Clone the repository.
2. Go to website/.
3. 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.