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!
- π¦Ύ 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/parseralpha. - π Set custom parser options with a GUI.
- π Good-looking dark mode theme.
- π± Even compatible with mobile devices.
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.
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)
}To contribute to the project, see Contribution Guide.
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:
AGPL-3.0 License Β© 2023-PRESENT δΈε²ζΊε