Visualize any GitHub repository with beautiful interactive graphs and star history charts at git-history.com

• 🌌 Interactive Force Graph - Explore repository structure with draggable, zoomable nodes
• 📦 Pack View - Circle-packing visualization showing files nested inside folders
• ⭐ Star History - Beautiful charts showing repository growth over time
• 📊 Embeddable Charts - Add live star history SVG to your README (dark & light themes)
• 🎬 Commit Timeline - Watch commits animate through the codebase
• 🔄 Multi-Repo Comparison - Compare star histories of multiple repositories
• 🔌 Chrome Extension - View star history directly on GitHub pages

Want to contribute? PRs welcome!

• Node.js 18+
• GitHub Personal Access Token (optional but recommended)

git clone https://github.com/MotiaDev/visualize-git.git
cd visualize-git
npm install

To avoid rate limits, create a Personal Access Token with public_repo scope:

# Create .env file
echo "GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx" > .env

Rate Limits:

• Without token: 60 requests/hour ⚠️
• With token: 5,000 requests/hour ✅

# Terminal 1: Start Motia backend
npm run dev

# Terminal 2: Start Vite frontend
npm run olddev

Open http://localhost:3000 and enter any repo like facebook/react!

Add live star history to any README:

[![Star History](https://git-history.com/api/embed/stars?repos=motiadev/motia)](https://github.com/motiadev/motia)

<!-- Single repo -->
[![Star History](https://git-history.com/api/embed/stars?repos=motiadev/motia)](https://github.com/motiadev/motia)

<!-- Multi-repo comparison -->
[![Star History](https://git-history.com/api/embed/stars?repos=facebook/react,vuejs/vue&theme=dark)](https://github.com)

<!-- Light theme -->
[![Star History](https://git-history.com/api/embed/stars?repos=motiadev/motia&theme=light)](https://github.com/motiadev/motia)

Visualize and test your API flows in the Motia Workbench:

All endpoints support optional ?token=ghp_xxx for higher rate limits.

npx motia cloud deploy \
  --api-key <your-api-key> \
  --version-name v1.0.0 \
  --env-file .env.production

📖 Motia Cloud Deployment Guide

vercel --prod

Set these environment variables in Vercel:

• VITE_API_BASE - Your Vercel URL (e.g., https://git-history.com)
• MOTIA_BACKEND_URL - Your Motia Cloud URL (private)

The chrome-extension/ folder adds star history directly to GitHub repository pages.

1. Go to chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked" → select chrome-extension/ folder

1. Update API_BASE in popup.js and content.js to your production URL
2. Zip the chrome-extension folder
3. Upload to Chrome Web Store

git-history/
├── src/github/              # Motia Backend Steps
│   ├── get-repo-details.step.ts
│   ├── get-repo-tree.step.ts
│   ├── get-star-history.step.ts
│   ├── get-commits.step.ts
│   ├── embed-stars.step.ts
│   └── embed-badge.step.ts
├── components/              # React Frontend
│   ├── Visualizer.tsx       # D3.js force graph
│   ├── StarHistory.tsx      # Star history chart
│   ├── TimelinePlayer.tsx   # Commit timeline
│   └── ...
├── services/
│   └── githubService.ts     # API client
├── chrome-extension/        # Chrome Extension
└── motia.config.ts          # Motia configuration

• Backend: Motia - Event-driven API framework
• Frontend: React 18 + Vite + TypeScript
• Visualization: D3.js v7 (force graphs, circle packing)
• Styling: Tailwind CSS
• Validation: Zod schemas

• Motia Documentation
• Motia GitHub
• Discord Community

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

MIT