GitHub - sxzz/ast-explorer: A web tool to explore the ASTs generated by parsers.

AST Explorer - A web tool to explore the ASTs generated by parsers.

Stable Release: ast-explorer.dev
Dev Channel: dev.ast-explorer.dev

Feel free to add more languages and parsers via PR!

Features

🦾 Enable code highlighting, suggestions, and formatting with Monaco Editor.
🤩 Support most popular front-end languages and parsers.
🗒️ Save your code via URL. No database, no server downtime.
🐙 Customize parser version via CDN, e.g., @babel/parser alpha.
🌈 Set custom parser options with a GUI.
🌚 Good-looking dark mode theme.
📱 Even compatible with mobile devices.

Languages and Parsers

JavaScript / TypeScript
- Babel
- TypeScript
- Oxc
- SWC
- Acron
- Espree
- TypeScript ESLint
- Esprima Next
- Flow
- Hermes
- meriyah
- ohos-typescript
- go-fAST
Vue
Svelte
Astro
Angular
CSS
- csstree
- PostCSS
- Lightning CSS
HTML
- htmlparser2
- rehype
- @html-eslint/parser
- ultrahtml
- angular-html-parser
JSON
- json-to-ast
- momoa
- jsonc-eslint-parser
- TypeScript
Markdown
- remark
YAML
- yaml
- yaml-eslint-parser
- yaml-unist-parser
Rust
- astexplorer-syn
- jinx-rust
- tree-sitter-rust
SQL
- sql-parser-cst
PHP
- php-parser
Java
- java-parser
Python
- pyodide
C#
- tree-sitter-c-sharp
Solidity
- @solidity-parser/parser
WXML
GraphQL
- graphql
Protocol Buffers
- protobufjs

More parsers via web-tree-sitter, see tree-sitter parsers.

URL Encode Algorithm

The input code and options are stored in the URL as a hash fragment, which is the string following the # symbol and is not transmitted to the server.

Implementation

const code = 'code'
const parserId = 'acorn'
const optionsString = JSON.stringify({
  ecmaVersion: 'latest',
  sourceType: 'module',
})
const serialized = utoa(
  // utoa, or compress() if want to compress the data
  JSON.stringify({
    c: code,
    p: parserId,
    o: optionsString,
  }),
)
const url = `https://ast-explorer.dev/#${serialized}`

// no compress
function utoa(data: string): string {
  return btoa(unescape(encodeURIComponent(data)))
}

// compress is optional
import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
function compress(data: string) {
  const buffer = strToU8(data)
  const zipped = zlibSync(buffer, { level: 9 })
  const binary = strFromU8(zipped, true)
  return btoa(binary)
}

Contributing

To contribute to the project, see Contribution Guide.

Credits

This project references and is inspired by fkling/astexplorer, an open-source web tool for exploring the ASTs generated by various parsers.

Also, thanks to the following projects for their contributions:

https://play.swc.rs/