kassens / esprima_ast_explorer Goto Github PK

Paste JavaScript code into the editor and inspect the generated AST.

The JS AST explorer uses esprima (or Babel) to parse the code, so it not only supports current JS (ES5), but also

• ES6: arrow functions, destructuring, classes, ...
• ES7 propsals: async/await, object rest / spread, ...
• JSX, known through React.
• Typed JavaScript (Flow)

Since future syntax is supported, the JS AST explorer is a useful tool for developers who want to create AST transforms, e.g. with recast.

• 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 texteditor will be replaced with the content of the file (i.e. you can drag and drop JS files).
• Toggle between esprima or Babel as parsers.
• Toggle Transform mode with jscodeshift.
• 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):

I'm happy about any feedback, feature request or PR to make this tool as useful as possible!

Install all dependencies with npm install.

Run npm run build for the final minimized version.

Run npm start to start a simple static webserver.