Git Visualizer - GitHub Spark challenge

[arilivigni]

Git Visualizer

Challenge overview

As a teacher you want to show your students how git works.
You want to create a basic app to display a git visualization graph for different scenarios.

• Be creative
• Make it look pretty
• Add features
• Iterate

GitHub Spark

Prompt

💡 Tip: Start simple! Begin with a prompt like;

Create a simple web app that visualizes a Git repository.\
Show commits as connected dots or nodes on a graph, with arrows indicating parent relationships.\
Make sure the git visualizer has the following use cases show in the visualizer.

- Free explore
- Free explore with remote
- Upstream changes
- Rewritten remote history
- Revert
- Cherry pick

Then iterate — add features like command input, animations, tooltips, or explanations.
Spark will generate the base code for you; your job is to evolve it into something unique.

Rules

• Time limit: 60 minutes

References

Using the visualization graph

Example app ideas

Post your app

Post your app to this discussion.

• Add your handle (ex. @arilivigni)
• Public Spark app link (ex. LAX Stats Pro App and make it shareable)
• A summary of your app and its features ( 💡 Tip: Use Copilot to help you generate a summary of your app)

Congratulations to our Spark challenge winners

• Visual appeal
  • @thomast1906
    • git-galaxy-explorer
• Creativity
  • @el-portero
    • gitquest
• Functionality
  • @RETR0-OS
    • gitquest-interactive
• Overall Winner
  • @battaglia-v
    • Macedonian Git Visualizer

[thomast1906]

https://git-galaxy-explorer--thomast1906.github.app/

Git Galaxy is an immersive and visually captivating educational platform that teaches Git through a space mission control-themed interface, offering interactive scenario visualizations, AI-powered beginner-friendly explanations, and a gamified learning system with XP, badges, and milestone celebrations; it features smooth animations, step-by-step playback controls, comprehensive progress tracking, and handles complex Git operations and edge cases—all wrapped in a sleek, futuristic NASA-inspired design optimized for both desktop and mobile learning experiences.

[badloop]

@badloop
https://git-branch-visualize--badloop.github.app

A simple, engaging git visualization tool for students

[mochan-tk]

https://git-graph-visualizer--mochan-tk.github.app/

I added a tutorial feature and multilingual support to my app. Since I’m Japanese, I wanted to make sure the app could be used comfortably in multiple languages.

I think LLMs are very good at building common features such as tutorials, but they tend to struggle when it comes to adding new or uncommon features that don’t exist widely in the world. This is because features that are rare or not well-represented in the training data require a lot of contextual guidance to build correctly.

On the other hand, implementing multilingual support is relatively easy. The Transformer architecture, which underlies most LLMs, was originally developed for language translation, so it naturally handles multilingual applications quite well.

I’m planning to keep adding more features from here!

[esmcelroy]

@esmcelroy git-visualizer-tool--esmcelroy.github.app

The app displays the last 100 commits from any public repository in a spatial graph, with an optional timeline view. Some basic annotation helps to explain what the user is looking at.

Users can also start from a specific ref if there's something specific they want to see visually!

(I went to write an exam and stopped iterating a little early)

[dkavanagh]

@dkavanagh https://git-graph-explorer--dkavanagh.github.app

This application serves as an educational and analytical tool for developers who need to:

• Understand different Git workflow patterns (Git Flow, rebasing, cherry-picking, etc.)
• Visualize GitHub Actions workflow job dependencies and execution order
• Learn how commits, branches, and merges relate in various scenarios
• Analyze CI/CD pipeline structure and identify bottlenecks

[drsnell]

@drsnell https://git-visualizer-inter--drsnell.github.app

What is GitViz?

GitViz is an interactive educational application that helps users learn Git version control through visual demonstrations, hands-on tutorials, and interactive challenges. The app visualizes Git operations in real-time, making complex concepts like branching, merging, rebasing, and cherry-picking easier to understand.

Key Features

📚 Scenarios Mode

• Watch animated, step-by-step visualizations of common Git workflows
• Choose from multiple difficulty levels (beginner, intermediate, advanced)
• See how Git commands transform the commit graph in real-time
• Scenarios include:
  • Linear development
  • Feature branching
  • Merge operations
  • Rebase workflows
  • Cherry-pick operations
  • Conflict resolution
  • And more advanced patterns

Controls:

• Play/Pause: Start or stop the animation
• Step Forward/Backward: Move through the scenario one step at a time
• Reset: Return to the beginning
• Speed Control: Adjust animation speed (0.5x, 1x, 2x, 3x)
• Keyboard shortcuts: Space (play/pause), Arrow keys (step), R (reset)

🎓 Tutorials Mode

• Interactive, guided tutorials that walk you through Git concepts
• Multiple choice quizzes to test your understanding
• Step-by-step instructions with visual feedback
• Tracks completion progress
• Tutorials include "First Day with Git", "Branching Basics", and more

⚔️ Challenges Mode

• Test your Git knowledge with hands-on challenges
• Solve problems by selecting the correct sequence of Git commands
• Earn stars based on performance (efficiency, accuracy)
• Receive feedback on your solutions
• Practice real-world Git scenarios

🏆 Achievements

• Unlock achievements as you progress
• Track completed scenarios, challenges, and tutorials
• Earn badges for milestones like:
  • Completing your first scenario
  • Mastering challenges with 3 stars
  • Learning at high speed
  • And more!

📊 Analytics Dashboard

• Track your learning progress over time
• View time spent on different scenarios
• Monitor confusion ratings to identify difficult concepts
• Review feedback and performance trends
• Personalized insights to guide your learning

⚙️ Accessibility Settings

• High Contrast Mode: Enhanced visibility for better readability
• Reduced Motion: Minimizes animations for users sensitive to motion
• Dyslexic Font: OpenDyslexic font option for easier reading
• Screen Reader Descriptions: Detailed descriptions of graph states
• Keyboard Navigation: Full keyboard control support
• Adjustable Animation Speed: Control how fast animations play

How to Use

Getting Started

1. Start with Scenarios: Begin in Scenarios mode to watch how Git commands work
2. Select a Scenario: Choose from the dropdown based on your skill level
3. Watch or Step Through: Use Play to watch animations or manually step through
4. Read the Commands: Each step shows the Git command being executed
5. View the Graph: The visual graph shows commits, branches, and HEAD position

Learning Path

1. Beginner: Start with "Linear Development" and "Feature Branch Workflow"
2. Intermediate: Progress to merge and rebase scenarios
3. Advanced: Tackle complex workflows like cherry-pick and conflict resolution
4. Practice: Test your knowledge in Challenges mode
5. Guided Learning: Use Tutorials for structured lessons with quizzes

Understanding the Visualization

• Commits: Circles representing Git commits, labeled with short hashes
• Branches: Color-coded labels showing branch names
  • Main branch: Blue
  • Feature branches: Green
  • Tags: Yellow/Gold
• HEAD: Orange marker showing your current position
• Lines: Connections showing commit history and relationships
• Highlights: Animated glows emphasize active commits during operations

Tips for Success

• Take your time with each scenario - use pause and step controls
• Read the command descriptions to understand what's happening
• Use the Glossary (? button) to look up Git terms
• Rate scenarios after completing them to track difficult concepts
• Enable accessibility features that help you learn best
• Complete tutorials before attempting related challenges

Getting Help

• Glossary: Click the "Glossary" button for definitions of Git terms
• Feedback: Use the "Feedback" button to report issues or suggest improvements
• Confusion Meter: Rate how clear each scenario was to help improve the app
• Tutorial Mode: Follow guided lessons with built-in explanations

Progress Tracking

Your progress is automatically saved:

• Completed scenarios, tutorials, and challenges
• Achievement unlocks
• Best challenge scores (star ratings)
• Time spent learning
• Confusion ratings
• Personal analytics

All progress persists between sessions, so you can pick up where you left off.

Mobile Support

GitViz is fully responsive and works on mobile devices:

• Touch controls for all interactions
• Optimized layouts for smaller screens
• Bottom sheet for glossary on mobile
• Simplified tab navigation

Technical Details

• Built with React and TypeScript
• Uses D3.js for graph visualization
• Animations powered by Framer Motion
• Accessible UI components from shadcn/ui
• Dark theme optimized for long learning sessions

[andrepetsch]

https://git-graph-visualizer--andrepetsch.github.app

Git is powerful but notoriously difficult to visualize mentally. How to: git bridges this gap by transforming abstract version control operations into interactive, manipulable visual experiences. Instead of reading about git commands, you see what they do in real-time through physics-simulated commit graphs.

[herlanijunior]

@herlanijunior -> https://gitvis-interactive-r--herlanijunior.github.app

Git Garden is an interactive, visual learning platform designed to make Git version control approachable and intuitive through playful visualizations, educational scenarios, and hands-on exploration. The application transforms abstract Git concepts into concrete, visual experiences with animated commit graphs, animal mascot characters, and step-by-step learning scenarios.

An interactive, delightful Git visualization playground that makes learning Git history, branching, and complex operations feel like playing with adorable animals in a story-driven repository garden.

Key Capabilities:

• Commit playbacks
• Renders commits as connected nodes with branches and merge relationships
• Pan and zoom controls for exploring large repository histories
• Click on any commit to view detailed information
• Smooth animations and transitions (60fps rendering)
• Supports 100+ commits without performance degradation
• Clear visual distinction between different branches using color coding
• Shows both local and remote branch states

[RETR0-OS]

https://gitquest-interactive--RETR0-OS.github.app

GitQuest - 1-Minute Feature Summary

What It Does

GitQuest turns learning Git (version control) into playing a beautiful video game. No scary command lines. No confusing jargon. Just an engaging story where you're a time-traveler fixing broken timelines.

---

🌟 The Magic: What Makes This Different

1. Time-Travel Scrubber (Never Been Done Before)

Imagine a video player, but for code history. Scrub backward and forward through time, watching your changes appear and disappear like movie frames. Made a mistake? Just rewind. Want to explore "what if"? Fast forward to see the future.

Why non-techies care: Learning by trial and error becomes fun instead of scary. You can't break anything.

2. Beautiful 3D Visuals

Your code changes appear as glowing orbs floating in space. Branches split like alternate realities with particle effects. It looks like a sci-fi movie, not a boring developer tool.

Why non-techies care: Keeps users engaged. Learning doesn't feel like homework.

3. AI Guide Named Chronos

A friendly companion who teaches you step-by-step, adapting to your pace. No judgment, just encouragement. Like having a patient tutor who knows exactly when you're stuck.

Why non-techies care: Removes intimidation. Perfect for people who fear coding.

4. Story-Driven Learning

Each lesson is part of an adventure. You're not "learning Git commands"—you're "saving timelines from corruption." Gamification with purpose.

Why non-techies care: Makes technical education feel like entertainment. Increases completion rates.

5. Point-and-Click Interface

Visual cards replace typing commands. Drag-and-drop actions. Only use the terminal when you're ready. No memorization required.

Why non-techies care: Accessible to absolute beginners. No prior experience needed.

---

💡 The Value Proposition

For Students: Learn essential professional skills (Git is required for 90% of tech jobs) without the frustration. Graduate from cards to commands at your own pace.

For Educators: A tool students actually want to use. Completion rates skyrocket when learning feels like gaming. Beautiful enough to demo at events.

For Teams: Onboard junior developers faster. The time-travel metaphor makes complex concepts (branching, merging, conflicts) instantly intuitive.

For EdTech: Proven market gap. Gamified learning is exploding (36% annual growth), but Git education is stuck in 2010. GitQuest bridges that gap.

---

🎯 Core Innovation Summary

Problem: Git (the industry-standard tool) is notoriously hard to learn. Existing tutorials are either boring text or ugly interfaces. 73% of developers struggle with it initially.

Solution: GitQuest makes Git visual, playful, and beautiful. The time-travel scrubber lets you explore fearlessly. The story keeps you engaged. The AI guide ensures you never feel lost.

Result: People who "aren't tech people" can master professional developer workflows in a fraction of the time, with a smile on their face.

---

📊 Quick Comparison

Feature	Other Git Tools	GitQuest
Looks	Dated, utilitarian	Cinematic, gorgeous
Learning	Isolated commands	Story-driven adventure
Beginner-Friendly	Still scary	Zero intimidation
Innovation	Same for 10+ years	Time-travel scrubber (new)
Engagement	Feels like work	Feels like play

---

🏆 Why This Matters

Education Impact: Makes a gatekept skill accessible. Democratizes professional development knowledge.

Business Impact: Faster team onboarding = cost savings. Better tool adoption = productivity gains.

Social Impact: Lowers barrier to entry for diverse, non-traditional learners entering tech.

---

Reading Time: 45 seconds ⏱️

[rafaelromero]

https://git-flow-visualizer--rafaelromero.github.app/ - dracula theme and a fire icon, last commit message on hover.

[sfllaw]

@sfllaw https://github-repo-visualiz--sfllaw.github.app/

I figured that asking for a retro Tcl/Tk app would be more likely to work because the user interface is really simple and there are decades of examples in the training set.

Prompts:

• Create a simple web app that visualizes the change history for a GitHub repo but make it look like the output of gitk. The more it looks like the tcl/tk version, the better.
• Make the branches show up as different lines in the left panel, with distinct colors. And represent the merged branches as the two lines coming together as a single node.
• Please make the app start with a repository already loaded. You can use "torvalds/linux" as the default repo.
• Drop the menu bar, since this is a webapp.
• The commit graph in the upper left pane needs to scroll in sync with the commit graph in the upper right pane.
• Add boxes that contain the branch names in the commit history pane, like the attached screenshot.
• Add labels that contain the tag names in the commit history pane, like the attached screenshot.
• The lines in the lanes are curved, but they should be constrained to vertical, horizontal, or diagonal (45 degree) lines.
• Please fetch the last 1000 commits, not just the last 100.

Notes:

• Spark was able to link commit hashes to the actual commits themselves, so when you clicking on them in the description panel does what you expect.
• Spark really struggled with understanding how the commit lane panel worked, maybe because it didn’t visualize things like we do?
• Scrolling worked fine with the default 100 commits, but asking it to fetch 1000 commits causes the scrolling to get really janky and makes it exceed the API rate limit because it constantly tries to fetch the same commits over and over again.

[chrismaddalena]

@chrismaddalena

Spark Link: https://git-visualizer--chrismaddalena.github.app/

The app implements the features in the base prompt with a UI I drew on my phone’s Notes app. There is a visualizer card and a user card. Visualizer offers a download of the card as a PNG or PDF and users can download their profile card as a PNG.

The app authenticates as the GitHub user to offer a searchable list of all repos to which they have access. The search includes the profile images and logos of the user(s) and orgs for accessible repos.

It’s not 100%, but I worked on this from my phone. It’s impressive it got this far. The biggest issue was working through spark.user capabilities vs the GitHub API. I was hitting rate limits for requests. I resolved some of that jumping off the GitHub Guest WiFi.

[AndrewFeelz]

Git Visualizer: https://git-repository-visua--AndrewFeelz.github.app

GIt Visualizer allows for users to import any public git repository and view it in an interactive manner. Select a specific branch to see the animated history and path of that branch. and if you like what you see, you can export the displayed graph in various different formats. And for the beginners, you can view different structure types, explanations of them, and how to best use them.

[ralggtr]

Simple 80s themed git visualizer with flashcards and memory game, light/dark mode switch. Did it from my phone
@ralggtr

https://nightmarish-seance-q5vr5v66w6f5g7-5000.app.github.dev/

[ac42dev]

https://git-visualizer-inter--ac42dev.github.app

Summary:

OctoVerse is an interactive Git visualizer that transforms repository history into an immersive space exploration experience.
Every commit is a planet, merges appear as comets, branches orbit like galaxies, and HEAD becomes your spaceship navigating the stars of version control.

We built three fully functional layouts to fit every user’s style:
• 🧭 Legacy: The clean, classic educational view.
• ⚙️ Classic: A modern, minimal layout focused on readability.
• 🪐 OctoVerse: A rich, animated universe with glowing particles and galactic energy flows.

Key Features
• 🎞️ Cinematic Mode: Press Play to watch your repository build itself — commit by commit, merge by merge — with educational narration and dynamic animations.
• 🧩 Mission Scenarios: Six guided scenarios that visually explain key Git concepts like branching, merging, upstream divergence, history rewriting, revert, and cherry-pick.
• ⚡ Interactive Console: Execute real Git commands (commit, branch, merge, revert, cherry-pick) and instantly see their visual impact.
• 🌓 Theme Switcher: Instantly switch between Legacy, Classic, and OctoVerse without losing repo state.
• 🌌 Particle Universe: Animated starfield and energy trails reintroduced for depth and motion, fully optimized for performance and Reduce Motion.
• 🧠 Educational UX: Tooltips, subtitles, and animations designed to teach Git visually and intuitively.
• ✅ Accessibility & Performance: Responsive layout, non-overlapping UI, AA contrast, keyboard navigation, and 60fps smooth visuals.

[kingbbello]

https://git-flow-visual-rule--kingbbello.github.app

A clean basic interactive Git visualizer

[niklasberglund]

https://gitviz-interactive-g--niklasberglund.github.app

A simple educational git visualizer with selectable themes.

[beachside-project]

https://f2c29795942fd509cf2a--beachside-project.github.app/

A simple visualizer that can be filtered by branch.

[bsurp1365]

LINK: https://git-visualizer-adven--bsurp1365.github.app/

GitQuest: Interactive Git Learning in a Sleek Dark-Mode Visualizer

GitHub Spark Hackathon Submission

GitQuest is a modern, dark-mode web app that transforms Git’s complexity into an intuitive, game-like learning journey. Built entirely with GitHub Spark, it visualizes any repository as a dynamic commit graph—nodes as commits, arrows as parent relationships animations and real-time GitHub API integration.

---

Smooth, Modern UI

Every interaction feels fluid and delightful:

• Zoom, pan, and drag with buttery-smooth physics
• Instant demo buttons trigger cinematic 2-second animations for key Git concepts
• Dark-mode-first design with neon accents, responsive layouts, and micro-interactions
• Confetti on merges, glows on cherry-picks, glitch effects on rebases
• Export graphs as PNG or shareable GIFs directly from the app

---

Deep Git Learning Through Exploration

GitQuest turns abstract Git operations into visual stories:

Use Case	What You See
Free Explore	Drag and roam the full history with real-time tooltips
Free Explore with Remote	Remote branches appear as dashed nodes syncing in
Upstream Changes	Watch green merge arrows flow from upstream into local
Rewritten Remote History	Nodes shake and realign during a rebase with glitch FX
Revert	A commit fades out with a ripple undo wave
Cherry-pick	Lasso a node → clone it to another branch with a glowing trail

Users don’t just read about Git — they experience it.

---

Gamified Progress & Shareable Mastery

Complete guided “Git Quests” to earn a Git Mastery Score:

Built in hours with GitHub Spark. Deployed in seconds. Learns Git for a lifetime.
GitQuest: Where smooth design meets deep understanding.

---

[thejaynesh]

@thejaynesh
app link - https://git-visualization-te--thejaynesh.github.app

A beautiful, interactive web application that visualizes Git history as an intuitive graph, designed to help educators demonstrate how Git operations work through visual, interactive scenarios.

Experience Qualities:

1. Clarity - Complex Git concepts become immediately understandable through clean visual representations
2. Delightful - Smooth animations and thoughtful interactions make learning Git engaging rather than intimidating
3. Educational - Every element is designed to teach, with contextual explanations and scenario-based learning

[patelka2211]

@patelka2211

https://git-visualizer-inter--patelka2211.github.app/

Summary:
The project is an interactive web app that visualizes a Git repository as a dynamic commit graph. It shows commits as connected nodes with smooth panning, zooming, and animated transitions. Users can explore Git operations like branching, merging, rebasing, reverting, cherry-picking, and handling remote interactions through an interactive command bar.

Core Features:

• Real-time, animated commit graph with tooltips and metadata.
• Support for visualizing local vs. remote branches, upstream changes, rewritten history, and common Git workflows.
• Guided or free exploration modes with narration for educational use.
• Branch and conflict management visualization, commit details panel tools.

[adann44]

GitHub Handle: adann44

https://git-odyssey-visual-r--adann44.github.app

Summary: Git Odyssey is an interactive Git learning app with a sleek GitHub-style design.
It turns commits into connected nodes on a live graph and lets users explore Git commands in a playful terminal.

[bewuethr]

https://gitgraph-git-reposit--bewuethr.github.app

Retrieves the real commit graph from the selected repo and visualizes it, lets you tap on commits to see more details.

However, due to severe rate limiting, it often fails to fetch real data, in which case it makes it up 😬

Proudly phone-vibe coded.

[sw97272]

@sw97272

https://gitvista-interactive--sw97272.github.app

[battaglia-v]

@battaglia-v

Macedonian Git Visualizer

🎵 GitTunes - Your Git Learning Playlist
Drop the beats, learn Git! GitTunes transforms Git education into a Spotify-like music streaming experience where every Git workflow is a track waiting to be played.

🎧 What's Playing?
GitTunes reimagines Git learning through the lens of your favorite music app. Browse Git scenarios like you'd browse songs, hit play to watch commits flow like beats, and master version control with the same smooth controls you use to queue up your weekend playlist.

✨ Feature Lineup
🎼 The Spotify Experience

Signature three-column layout with sidebar library, massive "now playing" view, and that iconic bottom player bar
Deep blacks, subtle grays, and that unmistakable Spotify green (oklch(0.72 0.19 145))
Animated equalizer bars pulse on the currently playing scenario
Smooth crossfade transitions (300ms) between scenarios

📚 Your Git Library

8 interactive scenarios: from "Getting Started" 🎵 to advanced cherry-picking
Each scenario styled as a track with cover art (featuring your friendly GitCatLogo)
Hover effects lift items with subtle 2-4px elevation
Active tracks show live equalizer animation

⏯️ Playback Controls

Play/Pause through Git commits like scrubbing through a song
Skip Forward (⏭️) and Skip Back (⏮️) to control learning pace
Shuffle mode randomizes your learning order
Repeat mode loops scenarios for practice
Real-time progress bar shows step completion with smooth animations

🌍 Bilingual Support

Toggle between Macedonian (default) and English
All scenarios, controls, and UI text switch seamlessly
Preference persists across sessions
📊 Visual Learning

Custom GitGraph component renders commit history with branch colors
Animated commits appear step-by-step as you progress
Framer Motion powers buttery-smooth transitions throughout

🎨 The Polish

Custom scrollbars (thin, rounded, Spotify-style)
Touch-friendly 44px minimum button sizes
Responsive layout that adapts from desktop to mobile
AjvarJar easter egg for that local flavor 🫙

🎹 Tech Stack
Built with React 19, TypeScript, Tailwind CSS, Framer Motion, and shadcn/ui components. Powered by @github/spark hooks for persistent state management.

Now drop the needle and start learning! 🎉

[mcaulifn]

• @mcaulifn
• Git Graph Visualizer
• Summary: A simple git browser that allows selecting a repo and then displays data for it. The theme is teal based and allows selecting dark/light mode.

[fperez-icims]

https://git-visualizer--fperez-icims.github.app

[devgunnu]

@devgunnu ----> https://git-galaxy-interacti--devgunnu.github.app

Summary:
It is a simple application with a interactive UI for learning about gits and its features. The focus is to gain "experience' while gaining experience in git!

[andremourato]

@andremourato
@harris-boyce
Git Visualizer with real repository import and interactive mode
This git visualizer tool makes not only visualizing a repository easier, but you can actually test it on real repositories with a safe interactive mode
An example repository to try: https://github.com/microsoft/vscode

[richlira]

https://git-graph-visualizer--richlira.github.app

🕹️ Git Graph Visualizer

Interactive visualization of Git commit history — built for learning, exploration, and fun.
This project transforms Git concepts into an engaging visual experience where commits, branches, and merges come alive through physics-based animations and intuitive interactivity.

---

🎯 Overview

Git Graph Visualizer is a web application designed to help users understand Git workflows visually.
From linear histories to complex branching and merging, it renders commit relationships as an animated graph powered by D3.js and React.

It’s part learning tool, part game — perfect for students, developers, and anyone curious about how Git works under the hood.

---

🚀 Features

🧭 Interactive Git Graph

• Commits are represented as animated nodes connected by elastic edges.
• Supports physics-based layout for dynamic movement and collisions.
• Zoom and pan to explore large graphs easily.