Skip to content
BEAD

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