About | Compiler Design AST Generator

🚀 The Technology Stack

This project was meticulously built from the ground up to demonstrate pure compiler design principles natively in the browser. NO external parsing libraries (like Babel, Esprima, or Acorn) were used. The entire engine is custom-written.

⚡ Vanilla JavaScript

The Lexer and Recursive Descent Parser are completely handwritten in ES6 JavaScript. They independently tokenize and parse complex grammar strings into JSON-structured AST geometries.

🎨 Custom CSS UI

Glassmorphism effects, dynamically resizing grids, and pseudo-element trickery. All styles are crafted using pure CSS3 variables without relying on Tailwind or Bootstrap.

🌀 Dynamic SVG Math

The perfect visual branch connectors mapping your AST tree are not rigid lines—they are mathematically calculated bezier curves mapped to offset bounds that adapt seamlessly to browser zooms!

🏗️ System Architecture

An Abstract Syntax Tree (AST) isn't magically generated. It undergoes a rigid three-stage pipeline mirroring the Frontend Architecture of a standard GCC or LLVM compiler.

1. Source Code Input (Raw String)

2. Lexical Analyzer (Lexer)

3. Recursive Descent Parser

4. Abstract Syntax Tree JSON

🔤 Phase 1: Lexical Analysis (The Lexer)

The first phase of the pipeline takes your human-readable raw text and compresses it into fundamental building blocks known as Tokens. Our Lexer scans strings character by character, intentionally skipping whitespaces and comments.

As it parses, it cross-references strings with an internalized keyword dictionary. That is how the system recognizes the difference between a raw string, a language keyword, or an operator. Below is an exact breakdown of a snippet processed by our Lexer pipeline:

// Input Example int max = 20; int i = 2;

Simulated Lexer Output (Token Table):

#	Token Type	Value	System Category
1	INT	int	Keyword / Type
2	IDENTIFIER	max	Variable Call
3	ASSIGN	=	Operator
4	NUMBER	20	Literal Value
5	SEMICOLON	;	Punctuation

Once the Lexer completely iterates through the file, it generates a massive linear array consisting of hundreds of tokens (in the massive prime/factorial snippet, it evaluated up to roughly 141 tokens!). This linear array is then passed to the Parser.

🔍 Phase 2: Syntax Analysis (The Parser)

The most complicated phase is the Recursive Descent Parser. A parser doesn't scan letters—it reads Tokens! Its sole job is to assert that the token array mathematically complies with the grammar rules of the system (in this case, C/JS scoping structures).

The parser utilizes "Recursion" heavily. For example, if it identifies a WHILE token, it recursively calls a function to parse an Expression (the condition), and then immediately calls a function to parse a Block. If the loop code contains another WHILE, the logic elegantly cascades deeper within itself!

Node Classification Logic

When generating the tree, the parser automatically tags each node into a specific Class Category so the frontend algorithm knows exactly what color gradient to assign it:

🟦 Program / Statement

What it is: Core structural blocks representing the flow of code.
Recognized Types: Program, IfStatement, WhileStatement, BlockStatement.

🟧 Declaration

What it is: Assignments establishing new resources in memory.
Recognized Types: VariableDeclaration (let, var, int), FunctionDeclaration.

🟩 Expression / Operator

What it is: Mathematical operations and assignments utilizing operator logic.
Recognized Types: BinaryExpression (+, -, *), AssignmentExpression (=).

🟪 Literal / Identifier

What it is: Hardcoded final values acting as the "leaves" of the syntax tree.
Recognized Types: NumericLiteral (20), StringLiteral, Identifier (max).

🌳 Phase 3: Real-Time Coordinate Mapping

Once the raw AST JSON Object is sent to the Front-End HTML DOM, the `result.js` engine dynamically injects <div> wrappers inside highly nested CSS Flexbox containers to naturally establish the tree structure visually.