Inspiration
I am a supplemental instruction leader for the Intro to C programming course, so I help students understand the C language. Most of them struggle with understanding pointers and dynamic memory. To help them better understand C, I decided to create a visualizer so that once they write the code, they can see what it looks like in memory and understand difficult topics like pointers and DMA!!!
What it does
The C code visualizer will help you visualize the C program that you wrote. Show you what it looks like in the memory so you can learn easily, as most of us are visual learners. If users want an explanation of the code, they can also ask that and also ask questions right there if the explanation needs more clarity.
How we built it
Used React and the Monaco Editor to let users write and visualize C code. When users run the code, it’s sent to a Gemini-powered Python backend that analyzes variable declarations, pointer relationships, and malloc usage. The backend responds with structured JSON, which is parsed and displayed as a memory diagram in the frontend. We dynamically map stack and heap variables to visual blocks and draw green arrows to indicate pointer relationships.
Challenges we ran into
Ensuring the Gemini API returns valid and consistent JSON responses.
Handling edge cases like uninitialized pointers or ambiguous pointsTo logic.
Debugging incorrect arrows and broken memory diagrams when variable relationships were missing or incomplete.
Visualizing pointers clearly while avoiding overlaps in the diagram.
Accomplishments that we're proud of
Built a working visual simulation of how stack and heap memory are laid out in a running C program.
Integrated natural language explanations with code structure using AI.
Designed an interface that supports both learning and debugging through interactive chat and visuals.
Successfully handled dynamic heap allocations and multiple pointer layers (e.g., int**).
What we learned
How to interface React with LLM-based backends and use AI-generated structured data effectively.
How memory in C works under the hood — especially pointers, heap vs. stack, and malloc.
Strategies for building educational tools that explain complex topics through visualization and interactivity.
What's next for C Code Visualizer
Add support for structs, arrays, and trees.
Improve error handling and fallback for malformed LLM responses.
Implement step-by-step animation of memory allocation and pointer assignment.
Allow exporting the memory diagrams as images or shareable links.
Support live compilation and execution in a secure sandboxed environment and use Docker.
Log in or sign up for Devpost to join the conversation.