Compiler engineers, language designers, and programmers implementing expression evaluators who need to understand how to parse infix expressions with correct operator precedence without writing recursive descent boilerplate.
Parsing expressions with operator precedence ( PEMDAS, comparison operators, logical operators) is traditionally done with recursive descent or shunting-yard algorithms. Pratt parsing (top-down operator precedence) is more elegant but the "binding power" and "null denotation/nud" vs "left denotation/led" concepts are abstract and hard to visualize. Students struggle to understand how the parser decides whether to continue parsing or return.
- Read the original Pratt paper or Douglas Crockford's exposition (dense, assumes parsing background)
- Implement recursive descent with many similar functions (boilerplate-heavy)
- Use parser generators (yacc, ANTLR) without understanding the mechanism
- Give up and use left-recursive grammars with manual precedence handling
Interactive visualizer showing expression parsing in real-time. User enters an expression, watches the Pratt parser traverse it: see each token consumed, the binding power comparison that decides whether to recurse or return, the nud/led functions called, and the AST being built step by step. The precedence climbing becomes visible.
- Expression input field with arithmetic, comparison, and logical operators
- Token stream visualization showing current position
- Parser state display: current token, left-hand side value, minimum binding power
- Binding power table (configurable) showing each operator's left/right power
- Parse tree/AST construction visualization
- Step-by-step execution with play/pause/reset
- NUD/LED call visualization showing which parsing function is active
- Precedence climbing animation: when to recurse deeper
- Error handling: show where parse fails and why
- Preset expressions: simple arithmetic, comparisons, ternary operator, complex nested
- Full programming language parsing (statements, blocks, etc.)
- Backtracking or ambiguous grammar handling
- Real parser generator output
- Custom token definitions (limited to built-in types)
- Saving grammars across sessions
- User can enter expression and watch complete parse with AST output
- Binding power comparison visible at each step
- NUD/LED distinction clear through visual call indicators
- Parse tree builds incrementally and is correct for operator precedence
- Precedence climbing (recursion depth) visible
- Step-by-step mode allows learning at own pace
- Deployed to live URL returning 200
- Works on mobile (simplified view)
- User knows basic programming (expressions, operators)
- User understands abstract syntax trees conceptually
- No prior knowledge of parsing algorithms or formal grammars
- Browser supports ES2020+
- Verify Pratt parser binding power conventions
- Confirm standard operator precedences for visualization