CodeTrace Studio
Interactive web IDE that visualizes how a small block-structured language is parsed and evaluated.
CodeTrace Studio IDE demo
YouTube demo slot ready. Add a youtubeId in content/projects.ts to render the embedded demo.
Metrics / Signals
Problem
What this project solves
Interpreters are often black boxes: students can run code, but cannot see how tokens become an AST or how evaluation walks that tree.
Architecture
How it is put together
CodeTrace Studio combines a lexer, parser, AST node model, evaluator, and web IDE. The frontend renders terminal-style output, AST text, node graph views, parser playback, syntax reference, and an evaluation trace that exposes scope, assignments, function calls, recursion, and control flow.
Developer tool
IDE Experience
The SBML Web IDE gives users a lightweight programming environment where they can write or load SBML programs, run code in the browser, and switch between interpreter views without leaving the page.
- Program Output shows terminal-style execution results.
- AST Text exposes the generated tree in a readable textual form.
- AST Tree Visualization renders the program as a node graph.
- Syntax Reference, Parser Playback, and Evaluation Trace provide teaching-oriented inspection tools.
Visualization
Parser Playback
Parser playback shows the AST being constructed step by step as tokens are scanned. Users can step forward, step backward, play the animation, and control playback speed to understand how source code becomes tree structure.
Execution
Evaluation Trace
- Shows the current AST node being evaluated.
- Displays variable environment values and assignment updates.
- Exposes function calls, recursion, and control flow execution.
- Effectively turns the interpreter into a debugger for language execution.
SBML
Language Support
- Variables, arithmetic, comparisons, conditionals, loops, functions, and recursion.
- Lexer tokenization, parser construction, AST representation, and evaluator traversal.
- Future extension points include REPL mode, breakpoints, better diagnostics, additional data types, and live AST updates.
Decisions
Technical choices
- Exposed each stage of the interpreter pipeline instead of only showing program output.
- Included parser playback so users can step through AST construction token by token.
- Supported language features like variables, arithmetic, conditionals, loops, functions, recursion, and semantic error checks to make the toy language meaningfully expressive.
Tradeoffs
Constraints and next choices
- A small language keeps the learning surface approachable, but still requires careful environment and scope handling.
- Visualization adds UI complexity, but makes parser and evaluator behavior much easier to reason about.
- The tool favors educational visibility over raw interpreter speed.