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.
