C Memory Visualizer

Write C in the browser, press run, and watch memory happen — stack frames pushed and popped, heap blocks allocated and freed, pointers pointing at things — as the program executes, not after it finishes.

Most students learn C memory from static diagrams on a whiteboard. This runs the real program under a real debugger and streams the real memory state.

How it works

Browser (React + Monaco)
   │  C source over WebSocket
   ▼
Node/Express + ws  ──►  Docker sandbox (one container per run)
   ▲                         │  gcc -g
   │                         ▼
   │                    gdb --batch -x instrument.py
   └── JSON memory events ◄──┘   (breakpoints on every user function,
       streamed as they fire       reads locals, types, sizes, addresses)

1. backend/sandbox/instrument.py is a GDB Python script. It sets pending breakpoints on user function entry and on ret, walks locals and their types at each stop, and emits one JSON event per memory change on stdout.
2. backend/index.js spawns the container and streams those lines straight through a WebSocket, so the frontend sees events during execution rather than in one dump at the end. A REST /run endpoint is kept for curl testing.
3. frontend/src/hooks/useMemoryStream.ts consumes the event stream and MemoryMap.tsx renders stack and heap regions from it.

Sandboxing

Untrusted C from the internet runs in a container that is deliberately boxed in:

Restriction	Setting
Filesystem	--read-only, writable tmpfs at /tmp capped at 10 MB
Network	--network none
Memory	--memory 64m
CPU	--cpus 0.5
User	non-root sandboxuser
Lifetime	--rm, plus timeout on both compile (10 s) and run (15 s)

The source file is mounted read-only and the container is destroyed after every run.

Running it

# 1. build the sandbox image
cd backend/sandbox && docker build -t c-sandbox .

# 2. backend (port 3001, REST + WebSocket)
cd backend && npm install && node index.js

# 3. frontend (port 3000)
cd frontend && npm install && npm start

Requires Docker, Node 18+, and a host that can run Linux containers.

Status

Working end to end for stack locals and function call/return. Heap tracking via malloc/free interception and pointer-target rendering are the next pieces.

Stack

TypeScript · React · Monaco Editor · Node · Express · ws · Docker · GDB Python API · C