Badgeworks

Create pixel-perfect, customizable badges in the official @intergrav/devins-badges style — right in your browser!

Try the live website

This website is entirely made by AI. Please do not start a annoying discussion just because it's made with AI

Note: If updates don’t appear, perform a hard refresh (Ctrl + F5).

Features

• Export directly to the @intensed-dev/devinsbadges-customs repo!

  • You can directly create an Issue to add your creations to library repo for more, unofficial devinsbadges!

• 4 Official Badge Style Variants:

  • Cozy (64px) — Full 2-line title & subtitle
  • Compact (40px) — Sleek single-line text
  • Cozy Minimal (56×56) — Icon-only square badge
  • Compact Minimal (40×40) — Small icon-only square badge

• Pixel-Perfect Vector Geometry:

  • Exact 40px GitHub Octocat vector path from official @intergrav/devins-badges repository
  • Authentic official brand palettes & vectors for GitHub, Discord, Python (2-color blue & yellow snakes), React, VS Code, Docker, Rust, npm, PyPI, Spotify, YouTube, X / Twitter, Git, and more!

• Universal Logo & Image Upload (PNG, JPG, WebP, SVG):

  • Drag-and-drop or file upload support for PNG, JPG, WebP, and SVG logos
  • Automatic resolution & viewBox auto-scaling (handles 16×16 to 4K / 1024px viewBox SVGs like Godot Engine)
  • Paste raw <svg>...</svg> code directly into the generator

• Endless FX Customization:

  • Universal Logo Tinting: Color-tint ANY uploaded logo image, SVG file, or preset
  • Logo Outline / Stroke: Add a customizable stroke outline around any logo with custom width & color
  • Text Gradients: Custom Top & Bottom gradient colors for text
  • Text Outline / Stroke: Crisp text outlines with adjustable stroke width
  • Optional White Circle Disk: Toggle optional background circle disk behind logos

• Save & Load System:

  • Browser Memory: Quick Save & Load presets directly in your browser (localStorage)
  • Config Export / Import: Export & Import .json configuration files to share or backup presets

• High-Resolution Exports:

  • Export vector SVG (.svg) files
  • Export ultra crisp 3× high-resolution PNG (.png) images

Quick Start

You can use the live website directly at arthursimin.github.io/Devin-badge-studio, or run it locally:

1. Clone or download this repository:

   git clone https://github.com/ArthurSimin/Badgeworks.git

2. Open index.html in any modern web browser. No Node.js or server setup required.

Structure

• index.html — Application UI structure
• index.css — Styling and responsive layout
• app.js — Core application logic and rendering engine

License

This project is licensed under the MIT License.

Credits

Based on the official Devin's Badges project by intergrav.