Explore  ✦  Badge Builder  ✦  API Docs  ✦  Stack  ✦  Getting Started  ✦  License

✨ Features

• 🎨 8 Curated Themes — Aurora, Sunset, Midnight, Forest, Ocean, Ember, Graphite, Plasma — each gradient hand-tuned for dark READMEs
• ⚡ Edge-Rendered — Fresh SVG render on Vercel's edge under 40ms
• 🔍 SVGL Icons — Integrated with 3000+ tech icons from SVGL
• 🛠️ Live Builder — Reactive editor with theme swatches and one-click Markdown copy
• 🔌 Open API — Single GET endpoint, any param combo, validated and rate-limited
• ♿ Accessible — Semantic SVG with proper ARIA labels
• 📱 Responsive — Glassmorphic design that works everywhere

🛠️ Stack

• SvelteKit + Svelte 5 - Web development, streamlined.
• TypeScript - JavaScript with syntax for types.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• bits-ui - A collection of headless components for Svelte.
• clsx + tailwind-merge - A tiny utility for constructing className strings conditionally.
• Lucide Icons - Beautiful & consistent icons.
• svelte-sonner - An opinionated toast component for Svelte.
• Hono - Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
• @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.
• Shiki - A beautiful Syntax Highlighter.

🚀 Getting Started

Important

Quick usage: You can start using badges immediately without setting up the project! Just visit newshields.vercel.app/create to generate your custom badges and copy the Markdown.

To run the project locally and customize it, follow the steps below.

You will need:

• Node.js 20+
• pnpm

1. Fork this repository and clone it locally:

git clone git@github.com:your_username/newshields.git

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

4. Open http://localhost:3000 in your browser.

📦 Deployment

Deploy to Vercel:

pnpm build

Or use the Vercel CLI:

vercel --prod

🔌 API Usage

Endpoint

GET /api/badge.svg?label={label}&title={title}&icon={icon}&theme={theme}

Parameters

Param	Description	Example
label	Left side text	Powered+by
title	Right side text	Svelte+5
icon	Icon ID from SVGL	svelte, react, typescript
theme	Color theme	sunset, ocean, midnight

Example

![Powered by Svelte](https://newshields.vercel.app/api/badge.svg?label=Powered+by&title=Svelte&icon=svelte&theme=sunset)

Available Themes

Theme	Preview
aurora	Green-purple gradient
sunset	Orange-pink gradient
midnight	Deep blue-purple
forest	Emerald gradient
ocean	Cyan-blue gradient
ember	Red-orange gradient
graphite	Gray neutral
plasma	Purple-pink glow

🔑 License

MIT © 2026 Kevin Cheni

---