Code Canvas: Building a New Way to See, Explore, and Understand Code

As developers, we've all felt the frustration of diving into an unfamiliar codebase—legacy projects, open-source repos, or even our own code from months ago. What should take minutes stretches into hours as you navigate countless files, hunting for where the logic actually lives.

We know, all of us have suffered from this, but not anymore!
We present to you Our Kiroween Project, Code-Canvas.

Code Canvas

Code Canvas is a visual code intelligence platform that transforms any repository into an interactive, explorable canvas. With just one click, upload any repo or your own code files and watch it come alive on an infinite canvas.

No need to scroll through endless files and folders, see your entire codebase laid out visually. Navigate naturally, understand connections instantly, and watch your code flow through your files. Code Canvas turns static text into a living, breathing experience that makes understanding any codebase effortless.

Features

• Visual Repository Explorer: Import any GitHub repo or local folder and see your code as an infinite canvas of interconnected nodes
• AI-Powered Code Understanding: Uses Google Gemini AI to automatically categorize repositories into logical segments (Core, Config, Tests, etc.) and generate human-readable explanations of complex code
• Interactive Flow Tracking: Click any function to watch an animated visualization trace execution paths through your codebase—see function calls flow in real-time with smooth camera movements
• Git History Visualizer: Watch your repository evolve over time with an animated commit timeline showing file additions, modifications, and deletions
• Smart Search: Natural language + voice search with fuzzy matching—say "find authentication logic" and it finds relevant files and functions
• Real-time Collaboration: Share a room link and collaborate with teammates—drawings, file changes, and chat all sync in real-time
• Drawing & Annotation: Freehand sketches, shapes, and text notes that persist across sessions
• GitHub Integration: Full two-way sync—pull changes, resolve conflicts visually, and push edits back to your repository

Why Frankenstein? Stitching Incompatible Parts Into Life

As you can see, while making this project, we became mini Dr. Frankenstein ourselves. We took technologies that were not supposed to work but still managed to create something meaningful with them. We've wired together React Flow, WebSockets, Gemini AI, Git operations, voice APIs, AST parsers, and canvas rendering into one giant but beautiful organism.

Tech Stack

We built Code Canvas as a full-stack TypeScript application with a modern, performance-focused architecture:

Frontend:

• React 18 + TypeScript for type-safe component development
• React Flow for the infinite canvas and node-based visualization
• Zustand for lightweight state management (easier to debug than Redux)
• Vite for blazing-fast dev builds and HMR
• Tailwind CSS for rapid UI development
• Prism.js for syntax highlighting across 20+ languages

Backend:

• Node.js + Express for the API server
• Socket.IO for real-time WebSocket communication
• Yjs + WebRTC for conflict-free CRDT-based drawing synchronization

AI & Analysis:

• Google Gemini 2.5 Flash API for code explanations, repository categorization, and function summarization
• TypeScript Compiler API for static code analysis (AST parsing, function detection, call graph generation)
• Octokit (GitHub REST API) for repository operations

Implementation Walkthrough

We've packed Code Canvas with many exciting features, but walking through all of them would turn this blog into a novel. So instead let's focus on one of our favorite feature: Track Flow.

Track Flow -
Track Flow uses AST-based code analysis to build a call graph, then generates a sequence of execution steps (execute-line, animate-edge-with-dot, prepare-return). React Flow's camera system follows the flow with smooth easing functions via requestAnimationFrame. Animated dots travel along edges between files, highlighting each line as it "executes." The system handles recursive calls, returns, and cross-file function resolution automatically.
Following is the logic for generating flow paths from the function calls

// Generate flow path from function calls
const generateFlowPath = (startFile: string, startFunc: string) => {
  const steps: FlowStep[] = [];

  const traverse = (file: string, func: string) => {
    const funcInfo = files.find(f => f.path === file)
      ?.analysis?.functions.find(f => f.name === func);

    // Execute each line
    for (let line = funcInfo.startLine; line <= funcInfo.endLine; line++) {
      steps.push({ type: 'execute-line', file, line });

      const call = funcInfo.calls.find(c => c.line === line);
      if (call) {
        // Animate to called function
        steps.push({ 
          type: 'animate-edge-with-dot', 
          fromFile: file, 
          toFile: targetFile.path,
          toFunc: call.name 
        });

        traverse(targetFile.path, call.name); // Recurse
      }
    }
  };

  traverse(startFile, startFunc);
  return steps;
};

Our Fourth Team Mate : Kiro

What really surprised us about Kiro, is that it was not just a vibe coding agent, but a mini team mate that can create specs, help us design the components, automate tasks and iterate on the project along side us.

We created specs following the three-phase workflow as mentioned in the official documentation (Requirements → Design → Implementation), which gave Kiro architectural context.
Also, after file creation or deletion, when we were manually updating our search engine file ,Agent hooks presented itself as the most organic but perfect solution, automating our search index updates whenever files changed. These features were useful, but what truly transformed our workflow was steering.

Steering files (product.md, structure.md, tech.md) gave Kiro persistent knowledge about our project. Every conversation, Kiro knew our folder structure, tech stack, and architecture patterns without us repeating ourselves. This consistency was game-changing during the hackathon.

Lessons for Kiro Users:

Don't just vibe code. Use specs for complex features, hooks for automation, and steering for consistency. Kiro has too much potential to waste on vibe coding alone

Set up steering files early. Document your project structure, tech stack, and patterns. This pays dividends immediately.

Before coding, ask for the plan. Don't let coding agent jump straight to implementation. Ask: What's your implementation approach? "What files would you change?" These questions prevent architectural mistakes.

Demo
Video demo

If you have any questions, feel free to ask us.