JS Token Structure

How to use it

1. Paste JavaScript into the input panel - a function, a module or a snippet from devtools.
2. Press Tokenize. The counts panel shows how many tokens fell into each class.
3. Switch View to Token list for a flat numbered table: index, nesting depth, class and text.
4. Switch to Nesting tree to see brackets as containers, so a block reads as a group instead of a flat run of lines.
5. Load the Sample to see what the output looks like before pasting your own code.

Common use cases

• Studying an unfamiliar snippet - the class counts tell you at a glance whether a file is mostly strings, mostly comments or mostly operators.
• Finding an unbalanced bracket - the nesting tree shows the depth of every bracket, so a group that never closes stands out.
• Checking a minified file - see how many tokens a compressed script actually contains and where the deep nesting sits.
• Teaching what a tokenizer does - the token list is the raw material a parser works from, shown one row at a time.

Why it stays private

Tokenizing is character scanning inside this tab. Source code, embedded tokens and proprietary logic never leave your device, so unreleased files are safe to inspect here.

FAQ

Q: Is this a full AST like the one Esprima or Babel produce? A: No. It is a token-level structural view: tokens are classified and nested by bracket depth, but there is no scope, binding or type analysis and no syntax tree nodes.

Q: Why is my regular expression classified as operators? A: Regex literals are not detected as their own class, so the characters inside one are tokenized individually. The limitation is stated on the page rather than hidden.

Q: What happens to ${} inside a template literal? A: The whole template literal is one string token, so an interpolation inside it is treated as ordinary text instead of being parsed as an expression.