JavaScript AST Viewer
Parse JS with Acorn and explore the ESTree AST as a collapsible tree and raw JSON.
Tree
- type: "Program"
- body:
- 0:
- 1:
- sourceType: "module"
Raw JSON
{
"type": "Program",
"start": 0,
"end": 142,
"body": [
{
"type": "ImportDeclaration",
"start": 0,
"end": 33,
"specifiers": [
{
"type": "ImportSpecifier",
"start": 9,
"end": 17,
"imported": {
"type": "Identifier",
"start": 9,
"end": 17,
"name": "useState"
},
"local": {
"type": "Identifier",
"start": 9,
"end": 17,
"name": "useState"
}
}
],
"source": {
"type": "Literal",
"start": 25,
"end": 32,
"value": "react",
"raw": "\"react\""
},
"attributes": []
},
{
"type": "ExportNamedDeclaration",
"start": 35,
"end": 142,
"declaration": {
"type": "FunctionDeclaration",
"start": 42,
"end": 142,
"id": {
"type": "Identifier",
"start": 51,
"end": 58,
"name": "Counter"
},
"expression": false,
"generator": false,
"async": false,
"params": [
{
"type": "ObjectPattern",
"start": 59,
"end": 74,
"properties": [
{
"type": "Property",
"start": 61,
"end": 72,
"method": false,
"shorthand": true,
"computed": false,
"key": {
"type": "Identifier",
"start": 61,
"end": 68,
"name": "initial"
},
"value": {
"type": "AssignmentPattern",
"start": 61,
"end": 72,
"left": {
"type": "Identifier",
"start": 61,
"end": 68,
"name": "initial"
},
"right": {
"type": "Literal",
"start": 71,
"end": 72,
"value": 0,
"raw": "0"
}
},
"kind": "init"
}
]
}
],
"body": {
"type": "BlockStatement",
"start": 76,
"end": 142,
"body": [
{
"type": "VariableDeclaration",
"start": 80,
"end": 124,
"declarations": [
{
"type": "VariableDeclarator",
"start": 86,
"end": 123,
"id": {
"type": "ArrayPattern",
"start": 86,
"end": 103,
"elements": [
{
"type": "Identifier",
"start": 87,
"end": 92,
"name": "count"
},
{
"type": "Identifier",
"start": 94,
"end": 102,
"name": "setCount"
}
]
},
"init": {
"type": "CallExpression",
"start": 106,
"end": 123,
"callee": {
"type": "Identifier",
"start": 106,
"end": 114,
"name": "useState"
},
"arguments": [
{
"type": "Identifier",
"start": 115,
"end": 122,
"name": "initial"
}
],
"optional": false
}
}
],
"kind": "const"
},
{
"type": "ReturnStatement",
"start": 127,
"end": 140,
"argument": {
"type": "Identifier",
"start": 134,
"end": 139,
"name": "count"
}
}
]
}
},
"specifiers": [],
"source": null,
"attributes": []
}
],
"sourceType": "module"
}Parser
Powered by Acorn, the same parser ESLint and Webpack use. ESTree- compatible output so you can drop the tree straight into a tool chain expecting standard AST nodes.
What you see
A collapsible tree view plus the full JSON. Position fields and raw tokens are kept so the round-trip stays lossless.
You might also like
- Escape / UnescapeEscape or unescape strings for JSON, JavaScript, HTML attribute, XML, and SQL contexts.
- JavaScript MinifierMinify JS / ES modules in your browser using Terser. Compression, mangling, and ECMA target are tunable.
- JS / Node Stack Trace ParserParse V8 and Firefox stack traces into structured frames — function, file, line, column.
- JSON → Code ObjectRender a JSON sample as a literal in JS, TS, Python, PHP, Ruby, Go, Rust, and Java side by side.