Home

Awesome

AST explorer

Gitpod ready-to-code Join the chat at https://gitter.im/astexplorer/Lobby Build Status

Paste or drop code into the editor and inspect the generated AST on https://astexplorer.net/

The AST explorer provides following code parsers:

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:

More Features

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:

How to add a new transformer

  1. Go to website/.
  2. Install the new transformer as dependency.
  3. Copy one of the existing examples in src/parsers/{language}/transformers.
  4. Adjust the code as necessary:

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.