Vision Code

Watch Your Code Come Alive – Step-by-Step Visualization of Data Structures & Algorithms

Comment

Inspiration

We noticed that students find it difficult to understand the changes that occur in data structures in memory during the running of the code. A conventional debugger was displaying values but lacked the entire flow. To fill the gap, we developed an AI-based tool that provides automated visualization for students to understand data structures effortlessly.

What it does

Vision Code is an interactive coding tool that uses AI to display code as interactive and step-by-step visualizations from code. The user can simply copy and paste the code and see, in one click, how data structures change over time and understand algorithmic complexity through interactive visualizations synchronized with code and accompanying descriptions.

How we built it

Based on React, Vite, and Tailwind CSS, Vision Code relies on D3.js for creating interactive execution graphs with physical simulations. We employed/used Gemini AI Studio for crafting intricate prompt expressions and JSON schema definitions for processing with Gemini 2.5-Flash and creating exact frame-by-frame traces of generated codes. The geminiService.ts handles seamless communication from our frontend with Gemini AI Studio's API while preserving type safety and node and link consistency. The result is a coded animation experience provided by Vercel through React hooks.

Challenges we ran into

Even though the AI generated the code, it initially lacked proper optimization. Some API calls were not working correctly, so we fixed and improved them. At first, prompt engineering was a bit challenging, but I quickly picked it up.

Accomplishments that we're proud of

Vision Code delivers seamless AI integration with parsing accuracy, producing production-quality, interactive visualizations powered by D3.js. It provides fast real-time execution tracing for Python, JavaScript, and Java, with step-by-step educational explanations that make algorithm behavior easy to understand. A polished dark-mode UI, responsive design, timeline controls, and export features ensure a smooth and accessible learning experience.

What we learned

We learned that effective AI prompt engineering drives most of the system’s success—using structured, schema-based prompts dramatically improved Gemini’s consistency and accuracy. We gained deep expertise in D3.js force physics, React animation state management, schema-driven development, and performance optimization. Most importantly, building this tool proved how powerful visual learning is for making complex algorithm concepts instantly understandable.

What's next for Vision Code

  • Real-time collaboration: Multiple users visualizing together
  • Algorithm library: Pre-built visualizations for common algorithms
  • Export formats: GIF animations, video walkthroughs, interactive embeds
  • Mobile app: iOS/Android native visualization engine
  • IDE plugins: VSCode/IntelliJ integration for in-editor visualization
Share this project:

Updates