// DOCUMENTATION

ReadmeForge Docs

Everything you need to build stunning GitHub profile READMEs with ReadmeForge's 44-metal SVG engine.

// 01

Quick Start

ReadmeForge works by embedding SVG image URLs directly into your GitHub README markdown. No installation, no signup, no API keys — just a URL.

<!-- 1. Open the ReadmeForge app -->
<!-- https://readmeforge.natrajx.in -->

<!-- 2. Configure your component visually, then copy the generated markdown -->

<!-- 3. Paste directly into your README.md -->
![My Banner](https://readmeforge.natrajx.in/api/banner?text=YOUR+NAME&metal=gold)

<!-- That's it. ✓ -->
INFO
Every ReadmeForge component is a plain ![alt](url) markdown image. It renders anywhere GitHub renders markdown — READMEs, issues, wikis, profiles.
// 02

How It Works

When GitHub renders your README, it requests each image URL. ReadmeForge's edge functions receive the request, generate an SVG in milliseconds, and return it.

01
You add URL
Paste a ReadmeForge URL into your README.md as a markdown image
02
Edge renders
Vercel Edge Function generates the SVG from URL parameters in ~10ms
03
GitHub displays
GitHub shows the rendered SVG — visitors see your styled README component
TIP
All routes use export const runtime = 'edge' — zero cold starts, globally distributed. SVGs are cached with Cache-Control: public, max-age=86400.
// 03

URL Syntax

Every component follows the same URL pattern:

https://readmeforge.natrajx.in/api/{component}?param1=value1&param2=value2
<!-- Component examples -->
https://readmeforge.natrajx.in/api/banner?text=Hello&metal=chrome
https://readmeforge.natrajx.in/api/badge?label=Version&value=3.0&metal=gold
https://readmeforge.natrajx.in/api/button?label=Deploy&style=metallic&metal=neon-green
https://readmeforge.natrajx.in/api/card?title=Stars&value=1.2k&metal=silver
https://readmeforge.natrajx.in/api/skill-tree?skills=Python:90,JS:85&metal=neon-blue
NOTE
Use + or %20 for spaces in text values. Special characters should be URL-encoded.
// 04

Metal Themes

Pass any metal name as the metal= parameter.

Classic
chromegoldsilverbronzecopperiron
Neon
neon-greenneon-blueneon-pinkneon-orangeneon-yellow
Cyber
electricplasmaholographicmatrixcyber
Aurora
auroraaurora-blueaurora-green
Pastel
rose-goldpearllavendermintpeach
Material
obsidiantitaniumplatinumtungsten
// 05

Custom Gradients

Override any metal with your own colors using the colors= param. Pass comma-separated hex values. The angle= param controls the gradient direction.

<!-- Two-color gradient, 45° angle -->
![Banner](https://readmeforge.natrajx.in/api/banner?text=Custom&colors=%23ff0080,%230080ff&angle=45)

<!-- Three-color gradient -->
![Badge](https://readmeforge.natrajx.in/api/badge?label=Status&value=Active&colors=%23ff6b35,%23f0c030,%2339ff14)

<!-- Named colors also work -->
![Card](https://readmeforge.natrajx.in/api/card?title=Score&value=100&colors=gold,silver)
INFO
When colors is provided it overrides the metal param for color — but metal still controls glow effects and text colors.
// 06

All Components

Banner/api/banner

Full-width header banner with title, subtitle, and optional text animation

Params: text, sub, style, anim, width, height

Stat Card/api/card

Compact card showing a title and value — great for GitHub stats

Params: title, value, style, icon

Neo Card/api/card-neo

Neumorphic style card with soft shadows and depth

Params: title, value, neoTheme, neoStyle

Glass Card/api/card-glass

Glassmorphic card with frosted blur effect

Params: title, value, glassTheme

Button/api/button

16 clickable button styles — wrap in []() for a link

Params: label, style (16 options), icon

Badge/api/badge

Two-part label/value badge in 5 shapes

Params: label, value, shape, valueColor

Header/api/header

Full page header with name, title, and avatar area

Params: name, title, avatar, style

Footer/api/footer

Page footer strip with text and metal divider

Params: text, style

Divider/api/divider

Decorative separator in 6 styles

Params: style (wave/zigzag/dots/straight/double/gradient)

Text Animation/api/text-anim

20 animated text effects rendered as SMIL SVG

Params: text, effect (20 options), size

Progress Bar/api/progress-bar

Single skill progress bar with label and percentage

Params: skill, value (0-100)

Skill Tree/api/skill-tree

Multiple skill bars stacked vertically

Params: skills (Name:percent,Name:percent,...)

Terminal/api/terminal

Fake terminal block with command output lines

Params: lines (pipe-separated), title

Social Links/api/social-links

Row of social platform links/icons

Params: links (platform:handle,...), style

Logo Container/api/logo-container

Shaped logo/avatar container (hex, circle, shield, star)

Params: text, src, style (6 shapes), spin

Image Frame/api/image-container

Decorative metallic frame around any image

Params: src, frame (6 styles), caption

// 07

README Tips

Center your components

<div align="center">

![Banner](https://readmeforge.natrajx.in/api/banner?text=YOUR+NAME&metal=chrome&width=900)

</div>

Make buttons clickable

<!-- Wrap the image in a link: [![label](svg-url)](destination-url) -->
[![Deploy Now](https://readmeforge.natrajx.in/api/button?label=Deploy+Now&metal=neon-green)](https://vercel.com)

Side-by-side components

<!-- Use an HTML table for multi-column layouts -->
<table>
<tr>
<td><img src="https://readmeforge.natrajx.in/api/card?title=Stars&value=1.2k&metal=gold"/></td>
<td><img src="https://readmeforge.natrajx.in/api/card?title=Forks&value=340&metal=chrome"/></td>
<td><img src="https://readmeforge.natrajx.in/api/card?title=PRs&value=89&metal=silver"/></td>
</tr>
</table>
// 08

FAQ

Q. Do I need an API key or account?
A. No. ReadmeForge is completely free with no authentication required. Just use the URLs directly.
Q. Why is my image not updating in GitHub?
A. GitHub caches external images aggressively. Add a cache-busting query param like ?v=2 to force a refresh. GitHub's CDN cache can take up to 24h to clear.
Q. Can I use ReadmeForge images outside GitHub?
A. Yes — the SVG URLs work in any HTML <img> tag, Notion, GitLab, Bitbucket, anywhere that renders images.
Q. Can I self-host ReadmeForge?
A. Yes, it's open source. Clone the repo, run npm install && npm run dev, and deploy to your own Vercel account.
Q. Who built ReadmeForge?
A. ReadmeForge is a free tool by Natraj-X — an AI & IT engineering agency. Visit natrajx.in to learn about our work.