aybidi

aybidi / claude-code-visualizer

Public

A single-page claude code usage visualization

10
1
100% credibility
Found Mar 25, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

A self-contained web page that visualizes local Claude Code usage data as an interactive scroll-driven narrative featuring timelines, projects, tools, rhythms, and AI insights.

How It Works

1
🔍 Find the Visualizer

You come across this cool tool that turns your AI coding sessions into a fun, interactive story you can scroll through.

2
📥 Download the Files

Grab the simple set of files and put them in a folder on your computer.

3
📋 Check Your History

Make sure you've chatted with your AI coding helper before so it has your past sessions saved nearby.

4
🔄 Prepare Your Story Data

With one easy action, the tool gathers your personal records and creates a special file full of your activity details.

5
🌐 Launch the Viewer

Start the local show and open your web browser to the address it shares with you.

6
📈 Scroll Through Your Journey

As you read the story beside it, watch the charts come alive showing your daily peaks, projects, tools, rhythms, goals, and results.

🎉 Discover Your Patterns

You now beautifully see how you work with AI, your busiest times, favorite projects, and what makes sessions successful—all private and just for you.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is claude-code-visualizer?

This claude code visualizer is a single-page HTML app that turns your local Claude Code usage data into an interactive, scroll-driven narrative. It pulls session logs, projects, tool calls, and AI insights from ~/.claude/ via a simple Python script, rendering timelines, bubble charts for projects, tool bars, coding heatmaps, goal breakdowns, and success metrics with D3.js animations. Developers get a polished, terminal-themed dashboard of their Claude code context—rhythm, productivity friction, and patterns—without any build tools or dependencies.

Why is it gaining traction?

As a single page app github example, it stands out with zero-install scrollytelling like R2D3, matching Claude's dark theme and loading instantly via python -m http.server. Privacy-focused (all local, one CDN call), it hooks users craving quick insights into tool usage (Read, Bash, Edit) and session outcomes without complex dashboards. Niche appeal for Claude fans: generate data.json, serve, scroll through your AI coding habits.

Who should use this?

Claude Code power users tracking project time sinks or tool over-reliance. AI-assisted coders analyzing late-night rhythms or Opus vs Sonnet splits before optimizing workflows. Solo devs building single page website templates who want a no-framework viz of their terminal AI sessions.

Verdict

Grab it if you're deep in Claude Code—docs are crisp, setup takes seconds, and it delivers real usage visualization value despite 10 stars and 1.0% credibility score signaling early maturity. Skip for production; it's a solid personal single page html github starter otherwise.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.