collectioneur

collectioneur / readme-aura

Public

Render React/JSX components as animated SVGs directly inside GitHub READMEs

23
0
100% credibility
Found Mar 11, 2026 at 23 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A tool for turning custom design code blocks in a draft Markdown file into embedded SVG images for enhanced GitHub READMEs, with automated building via GitHub workflows.

How It Works

1
👀 Spot Amazing Profiles

You browse GitHub and notice profiles with glowing stats cards, fancy gradients, and eye-catching graphics that make them stand out.

2
💡 Find readme-aura

You learn about this friendly tool that helps anyone create those beautiful designs for their own GitHub profile or repo page.

3
📝 Sketch Your Design

You create a simple draft file with your profile story, adding special design blocks for things like stats displays or feature highlights.

4
🛠️ Add Auto-Builder

You drop in one easy setup note that automatically turns your designs into pretty pictures and keeps your page fresh.

5
⬆️ Share Your Draft

You save your draft and setup, then upload them to your GitHub space with a quick push.

6
⏰ Watch It Update

The tool runs quietly in the background, building your designs and linking your real profile stats.

✨ Profile Shines Bright

Your GitHub page now sparkles with custom graphics, up-to-date stats, and a professional vibe that impresses visitors – and it refreshes daily!

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 23 to 23 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is readme-aura?

readme-aura lets you write React/JSX components directly in Markdown code blocks marked with ` ```aura `, then renders them as static SVGs for GitHub READMEs. GitHub blocks JS and CSS, so this bypasses that by using Vercel Satori to convert JSX—like flexbox layouts, gradients, and shadows—into embeddable images via a TypeScript CLI or GitHub Action. You get a `readme.source.md` that builds to a polished `README.md` with assets in `.github/assets`.

Why is it gaining traction?

It stands out by enabling React render JSX to SVG without browsers, supporting custom fonts, dimensions via meta syntax, and built-in components for GitHub stats or phone mockups that pull real repo data via API. The GitHub Action auto-commits updates on push or daily cron, keeping stats fresh, while handling private repos or user profiles seamlessly. Devs love the pixel-perfect, animated-feel visuals in pure Markdown.

Who should use this?

Open-source maintainers crafting profile READMEs (`username/username`) with dynamic stats cards or top repos lists. Repo owners wanting to render GitHub repository metrics, languages, or custom graphics like mockup phones without external hosts. Frontend devs experimenting with React render JSX element from variable or lists in constrained environments like GitHub Markdown.

Verdict

Worth trying for eye-catching READMEs if you're okay with its early maturity—23 stars and 1.0% credibility score mean light testing, but solid docs and MIT license make it low-risk to prototype. Pair with your own GitHub token for live data.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.