Stylish Readme: Style your README

Dynamic SVG widgets for your GitHub README, profile bio, and documentation. Stylish Readme generates real-time, customizable badges for your profile without requiring complex setups, API keys, or client-side scripts.

Overview

Stylish Readme renders widgets as standalone SVGs. Because GitHub natively supports SVGs in markdown image tags, these widgets update automatically whenever your profile is loaded.

Profile Cards Developer identity

Now Playing Music status

Live Time Real-time clocks

Streaks Activity tracking

Widget Documentation & Examples

Copy the markdown snippets below and paste them into your README. You can change the parameters in the URL to customize the data, layout, and colors.

1. Developer Profile Card

Combines your avatar, role, bio, and skills into a clean header block.

Theme: Paper

![Profile Card](https://readmeme.eu.cc/api/profile.svg?avatar=https%3A%2F%2Fgithub.com%2Fcu-sanjay.png&name=Sanjay&role=Full-Stack+Developer&bio=Building+cool+things+with+code+n+coffee.&skills=HTML%2CJS%2CREACT%2CNODE%2CPYTHON%2CGIT%2CSQL&handle=cu-sanjay&theme=paper)

2. Now Playing Status

Theme: Terminal | Platform: YouTube Music

![Now Playing](https://readmeme.eu.cc/api/music.svg?theme=terminal&musicSong=Smells+Like+Teen+Spirit&musicArtist=Nirvana&musicListen=Now+Playing&musicPlatform=ytmusic)

Theme: Ink | Platform: SoundCloud

![Now Playing](https://readmeme.eu.cc/api/music.svg?theme=ink&musicSong=Tera+Intezaar&musicArtist=Rahat+Fateh+Ali+Khan&musicListen=On+Repeat&musicPlatform=soundcloud)

3. Live Local Time

Theme: Classic | 24h format with seconds

![Local Time](https://readmeme.eu.cc/api/time.svg?theme=classic&timezone=Asia/Kolkata&timeFormat=24h&showSeconds=1&showDate=1&showDay=1&label=Local+Time)

Theme: Retro | 12h format, compact

![Local Time](https://readmeme.eu.cc/api/time.svg?theme=retro&timezone=America/New_York&timeFormat=12h&showSeconds=0&showDate=0&showDay=0&label=NYC)

4. Coding Streaks

Theme: Crimson | Platform: LeetCode

![Coding Streak](https://readmeme.eu.cc/api/streak.svg?theme=crimson&startDate=2023-01-01&unit=days&customLabel=LeetCode+Grind&platform=leetcode)

5. Daily Quotes

Theme: Ocean | Category: Programming

![Daily Quote](https://readmeme.eu.cc/api/quote.svg?theme=ocean&quoteCategory=programming&label=Daily+Wisdom)

6. Location & Timezone Flags

Theme: Forest | Country: Japan

![Country Flag](https://readmeme.eu.cc/api/flag.svg?theme=forest&country=JP&label=Based+In)

Theme: Ink | Timezone Banner

![Timezone Banner](https://readmeme.eu.cc/api/timezone.svg?theme=ink&timezone=Europe/London&timeFormat=24h)

Parameter Reference

Customize your URLs by modifying these query strings. Always replace spaces in your text with + or %20.

Global Parameters

• theme: classic, paper, terminal, retro, ocean, crimson, forest, ink
• label: Custom text displayed on the widget header or side tab.

Profile Card

• avatar: Direct URL to an image.
• name: Display name.
• role: Job title or primary focus.
• bio: Short description.
• skills: Comma-separated list (e.g., HTML,CSS,JS).
• handle: Username (excluding the @ symbol).

Music Status

• musicSong: Track name.
• musicArtist: Artist name.
• musicPlatform: spotify, ytmusic, applemusic, soundcloud.
• musicListen: Status text (e.g., Now Playing, On Repeat).

Time & Date

• timezone: Standard IANA timezone (e.g., Asia/Kolkata, Europe/London).
• timeFormat: 12h or 24h.
• showSeconds: 1 (true) or 0 (false).
• showDate: 1 (true) or 0 (false).
• showDay: 1 (true) or 0 (false).

Streaks

• startDate: Format as YYYY-MM-DD.
• unit: days or weeks.
• platform: leetcode, gfg, hackerrank, codeforces, codechef, atcoder, hackerearth, github, none.

Local Development

If you want to add new themes, create custom widgets, or self-host the API, you can run the generator locally.

1. Clone the repository:

git clone https://github.com/cu-sanjay/stylish-readme.git
cd stylish-readme

2. Install dependencies:

npm install

3. Start the local server:

npm start

The UI workshop will be available at http://localhost:5000.