Code Visualizer PoC

An educational coding assistant. Type npm run dev in your local terminal or use the website - it scans through your code, finds errors within LinkedList insertAtHead operations and visualizes the nodes step-by-step. Understand your code faster and see why your code isn't running as expected.

Fully functioning code IDE. You may also choose to upload local files, the app supports .txt and .java files. Code Visualizer uses Monaco Editor to simulate a VSCode level editor to provide seemless programming within or outside the editor.

How it works

The Code Visualizer runs in two passes. First, a static analysis pass scans your Java code directly in the browser, no compilation needed. It extracts the LinkedList instance name, collects every insertAtHead call and its argument, and runs a suite of deterministic bug detectors against the method body. Second, a step controller builds a snapshot of the list state at every insertion tracking which nodes are reachable, which are orphaned, and whether the final state is valid.

Each snapshot is an immutable object containing the reachable node chain, any orphaned nodes that lost their reference, and an error flag if the step is invalid. The visualizer replays these snapshots one at a time as you step forward and backward and the code is never re-analysed mid-session, just replayed from the pre-computed states.

• Lost reference: checks whether newNode.next = head is present before head is reassigned. If missing, the previous chain is orphaned on every insert.
• Null dereference: walks the method body line by line and flags any dot access on head before head is assigned. On the first insert, head is always null.
• Incorrect pointer update: detects if head is assigned to a property of a node (head = newNode.something) rather than the node itself, meaning the new node is never reachable.

Every detected error short-circuits step generation and returns a single error snapshot, so the visualizer always renders a clean, unambiguous error state. The Monaco editor highlights the exact source token corresponding to the current step, switching from yellow to red when the error step is reached.

Tech Stack

• React + TypeScript: component architecture and type safety across the entire codebase
• Monaco Editor: VSCode-level editor with syntax highlighting
• Vite: fast local development and production bundling
• Netlify: deployment and public hosting

Running Locally

npm install
npm run dev

Testing Samples

In the /src/sampleCode/ folder, there are code samples which highlight each of the error handling cases. Each Java file can be copy and pasted into the editor or uploaded.

Known Limitations

• Analysis is scoped to insertAtHead operations only, other linked list methods are not traced
• Bug detection is pattern-based on raw source strings, not a full AST parse, so heavily reformatted code may not be detected correctly
• Only one LinkedList instance per program is supported