ReadmeForge

https://readmeforge.natrajx.in/docs
Admin
ReadmeForge is an open-source SVG engine that generates customizable, dynamic badges, banners, and...
Tokens:1,498
Snippets:20
Trust Score:3.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### ReadmeForge Component URL Examples

Source: https://readmeforge.natrajx.in/docs

Examples of various component URLs including banners, badges, buttons, cards, and skill trees with different metal styles.

```text
<!-- 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
```

--------------------------------

### Create clickable buttons with Markdown links

Source: https://readmeforge.natrajx.in/docs

Wrap an image URL in a Markdown link syntax to create a clickable button that redirects to a destination URL.

```markdown
<!-- 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)
```

--------------------------------

### Arrange components side-by-side with HTML tables

Source: https://readmeforge.natrajx.in/docs

Use an HTML table structure to create multi-column layouts for displaying multiple images or cards horizontally.

```html
<!-- 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>
```

--------------------------------

### Embed ReadmeForge Banner in Markdown

Source: https://readmeforge.natrajx.in/docs

Paste the generated markdown image URL directly into your README.md file to display a banner.

```markdown
<!-- 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. ✓ -->
```

--------------------------------

### Configure Custom Gradients and Colors

Source: https://readmeforge.natrajx.in/docs

Use the colors parameter to override metal themes with custom hex or named colors. The angle parameter adjusts the gradient direction, and providing colors will override the metal parameter for color while maintaining glow and text effects.

```markdown
<!-- 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)
```

--------------------------------

### Center components with div align

Source: https://readmeforge.natrajx.in/docs

Use a div element with the align attribute set to center to horizontally center images or other content in your README.

```markdown
<div align="center">

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

</div>
```
Tokens:
Raw