Skip to content

feat:✨Live Badge Customizer ..Theme Picker + Embed Builder #571

@Priyanshi-untitled

Description

@Priyanshi-untitled

Is your feature request related to a problem? Please describe.

I'm always frustrated when I want to add a CommitPulse streak badge to my README — but there's absolutely no visual way to build it.

Right now the whole process feels like pure guesswork:

  1. 📖 Hunt through the docs to find which params even exist
  2. ✍️ Manually construct the URL → ?theme=ocean&radius=12&speed=6s&bg=0d1117
  3. 😬 Paste it into README and just... hope it looks good
  4. 🔄 It doesn't → go back, tweak the URL, repeat the whole cycle again

A simple badge customization ends up taking 10+ minutes — and the result is still a surprise every single time. Worse, if a new user discovers CommitPulse, they have no idea the badge feature even exists unless someone manually points them to the docs. Such a powerful feature is practically invisible right now.

Describe the solution you'd like

A dedicated /customize page — a live badge builder where everything is visual and instant. No more manual URL crafting.

✅ Theme Picker → Visual cards for all themes, click to apply instantly
✅ Live SVG Preview → Fetches /api/streak with current params (debounced 300ms)
✅ Sliders → Border radius, speed, width — live updates in preview
✅ Embed Snippet → Auto-generated Markdown / HTML / iFrame + one-click copy
✅ Shareable URL → All params synced to URL so customization is shareable
Also a small "Customize Your Badge" CTA button on the Hero page — so new users can actually discover this feature without digging through docs. 🎯

Describe alternatives you've considered

❌ Just improving the docs→ Still manual URL crafting, zero visual feedback
❌ README code examples → Helpful but user still has to guess the output
❌ Separate config JSON → Overkill for something this simple

None of these solve the core problem — you can't see what you're building. A live visual builder is the only real fix. 🎯

/assign @JhaSourav07
/claim

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions