🛡️ Simple Badges

English | Русский

A beautiful, modern web app for creating Shields.io badges — static and dynamic — with a live preview and one-click export.

🚀 Try it live →

✨ Features

• 🛡️ Static Badges — label, message, color, style — classic Shields.io badges
• ⚡ Dynamic Badges — 140+ integrations: GitHub, GitLab, NPM, PyPI, Crates.io, Docker, and more
• 🎨 Logo Picker — search 2,500+ icons from Simple Icons, or upload your own
• 🔄 Live Preview — instant debounced badge preview as you type
• 📋 One-Click Export — URL, Markdown, or HTML — copy with a single click
• 📥 Import — import badges from URL, Markdown, or HTML
• 🌙 Dark / Light Theme — toggleable with smooth transitions

🧩 Screenshots

📷 Click to open

Static badge

Dynamic badge

Preview and copy

Light Theme

🚀 Quick Start

Local Development

# Clone the repo
git clone https://github.com/megatocha/simplebadges.git
cd simplebadges

# Install dependencies
npm install

# Start dev server
npm run dev

Open http://localhost:5173 in your browser.

Build for production

npm run build
npm run preview

⚡ Dynamic Integrations

140+ ready-to-use endpoints across 15 categories:

Category	Examples
GitHub	Stars, Forks, Issues, PRs, Workflow Status, License, Downloads, Release, Tag...
GitLab	Pipeline, Coverage, Stars, Forks, Issues, License
NPM	Version, Downloads, License, Types, Bundle Size, Dependents
PyPI	Version, Downloads, Python Version, License, Format, Wheel
Crates.io	Version, Downloads, License, Size, MSRV, Docs.rs
Packagist	Version, Downloads, License, PHP Version, Stars
Docker	Pulls, Stars, Image Size, Version, Build Status
AMO	Version, Users, Downloads, Rating, Stars
Chrome Web Store	Version, Users, Rating, Size
VS Marketplace	Version, Installs, Downloads, Rating
Homebrew	Version, Installs, Cask Version
Pub (Dart)	Version, Likes, Points, Popularity, Platforms
Codecov	Coverage, Coverage by branch/flag
Social	Twitter, Bluesky, YouTube, Reddit, Discord, Stack Exchange
Other	Dynamic JSON/XML/YAML/TOML, Website Up/Down, Sonar, Open VSX

Each integration supports optional parameters — only fill in what you need.

🛠️ Tech Stack

Layer	Tech
Framework	React 19 + TypeScript
Build	Vite 7
Styling	Tailwind CSS v4 + shadcn/ui
State	Zustand
Animations	Framer Motion
Icons	Lucide React + Simple Icons
Color Picker	react-colorful
Toast	Sonner

📁 Project Structure

simplebadges/
├── src/
│   ├── components/
│   │   ├── config/           # Configuration tabs (Main, Dynamic, Logo, Extra)
│   │   ├── ui/               # shadcn/ui components
│   │   ├── ColorPickerField  # Reusable color picker
│   │   ├── Header            # App header with theme toggle
│   │   ├── Footer            # Credits & links
│   │   └── PreviewArea       # Live badge preview + export
│   ├── hooks/                # useDebounce
│   ├── lib/                  # URL builder, format export, integrations registry
│   ├── store/                # Zustand badge store
│   └── index.css             # Tailwind config & custom styles
├── index.html
├── vite.config.ts
└── package.json

🤝 Contributing

Contributions are welcome! Feel free to:

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

Adding New Integrations

Edit src/lib/integrations.ts — add a new entry to the INTEGRATIONS array:

{
    id: 'service-metric',
    name: 'Metric Name',
    category: 'Service',
    description: 'What this badge shows',
    pathTemplate: '/service/metric/:param',
    params: [
        { key: 'param', label: 'Parameter', placeholder: 'e.g. value' },
        { key: 'optional', label: 'Optional', placeholder: '...', required: false },
    ],
}

©️ License

MIT License - see LICENSE file for details

👤 Author

Created with ❤️ using Shields.io & Simple Icons

⭐ Add a star to my project!