AST Explorer

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
• Ember
• Astro
• Angular
• CSS
  • csstree
  • PostCSS
  • Lightning CSS
• HTML
  • htmlparser2
  • rehype
  • @html-eslint/parser
  • ultrahtml
  • angular-html-parser
  • parse5
• JSON
  • json-to-ast
  • momoa
  • jsonc-eslint-parser
  • TypeScript
• Markdown
  • remark
  • comark
• 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/

Sponsors

License

AGPL-3.0 License © 2023-PRESENT 三咲智子