01The GitHub card workshop

GitHub profile README generator

GitHubCard is a drag-and-drop GitHub profile README generator. Combine your stats, projects, and activity in one card.

Open the designerSee real cards
Live GitHubCard preview for torvalds
rendered from live GitHub data
02The problem

Replace a stack of README embeds with one GitHubCard link.

In a hand-built profile README, profile stats, top languages, streaks, contributions, activity, and skills can mean six embeds, five services, and dozens of URL parameters. GitHubCard renders the same live data in one design. Your README only needs one link.

README.md
@@ -1,29 +1,6 @@
  1. # Hi, I'm Alex 👋
  2. Full-stack developer building useful products.
  4. <!-- Profile and repository stats -->
  5. ![GitHub stats](https://github-readme-stats.vercel.app/api?username=you&show_icons=true&theme=tokyonight&hide_border=true)
  7. <!-- Top languages -->
  8. <a href="https://github.com/you?tab=repositories">
  9. <img height="165" src="https://github-readme-stats.vercel.app/api/top-langs?username=you&layout=compact&theme=tokyonight" alt="Top languages" />
  10. </a>
  12. <!-- Commit streak -->
  13. <p align="center">
  14. <img width="48%" src="https://streak-stats.demolab.com?user=you&theme=tokyonight&hide_border=true" alt="Commit streak" />
  15. </p>
  17. <!-- Contribution heatmap (light / dark) -->
  18. <picture>
  19. <source media="(prefers-color-scheme: dark)" srcset="https://ghchart.rshah.org/2f81f7/you" />
  20. <img src="https://ghchart.rshah.org/40c463/you" alt="Contribution heatmap" />
  21. </picture>
  23. <!-- Activity graph -->
  24. [![Activity graph](https://github-readme-activity-graph.vercel.app/graph?username=you&theme=github-compact)](https://github.com/you)
  26. <!-- Tech skills -->
  27. ![Tech skills](https://skillicons.dev/icons?i=ts,react,nodejs,docker,postgres&theme=dark)
  29. ## Featured projects
  1. # Hi, I'm Alex 👋
  2. Full-stack developer building useful products.
  4. ![GitHubCard](https://githubcard.com/you.svg?d=N7kQ2mXp4Vr8Ls1C)
  29. ## Featured projects
Before · Markdown + HTML + 6 embeds + 5 servicesAfter · 1 design link + the same GitHub data
03Widgets

A tray of components.

GitHub stats cards, contribution heatmaps, commit streaks, language and stack snapshots, top languages cards, top repositories, and star history. Pick the pieces, set them on the canvas, theme them once.

8 of 20+ widgets · hover to pause
Language Donut
GitHubCard language donut widget preview
Language Ranked Bars
GitHubCard language ranked bars widget preview
Profile Stats
GitHubCard profile stats widget preview
Streak Stats
GitHubCard streak stats widget preview
Contributions Heatmap
GitHubCard contribution heatmap widget preview
Star Trends
GitHubCard repo star history widget preview
Repo Commits
GitHubCard repo commits widget preview
Repo Code Frequency
GitHubCard repo code frequency widget preview
Language Donut
GitHubCard language donut widget preview
Language Ranked Bars
GitHubCard language ranked bars widget preview
Profile Stats
GitHubCard profile stats widget preview
Streak Stats
GitHubCard streak stats widget preview
Contributions Heatmap
GitHubCard contribution heatmap widget preview
Star Trends
GitHubCard repo star history widget preview
Repo Commits
GitHubCard repo commits widget preview
Repo Code Frequency
GitHubCard repo code frequency widget preview
04How it works

Three steps, no setup.

The same path you take in the editor: pick a card, design it, publish it.

The editor, in 16 seconds.
05Real cards

Real repos, one card system.

Real GitHubCard outputs for actual public repositories — updated daily, never mocked. Three of them sit on a Pro background.

supabase/supabase GitHubCard repository card

Supabase

supabase/supabase

Open
ollama/ollama GitHubCard repository card

Ollama

ollama/ollama

Open
In the wild →chris-grieser.decodes.oeiuwq.comwilliams.science/resourceshand-verified pages embedding a GitHubCard
Create a repo card
06Compare

Canvas vs single-purpose tools.

Compare the editing workflow, final output, and maintenance cost instead of marketing promises.

01Verdict

Workflow

GitHubCard keeps this in one canvas, from visual editing to final card.

GitHubCard
Layout, data, and widgets live in one editing workflow.
Single-purpose tools
Single-purpose tools split decisions across generators.
Visual editorOne canvasLess assembly
02Verdict

Output

The result is one cohesive card instead of a row of separate embeds.

GitHubCard
Profile, repository, and stats pieces share the same visual system.
Single-purpose tools
Other tools usually export separate cards, charts, or URLs.
Unified styleFinal compositionExport-ready
03Verdict

Maintenance

Fewer moving parts means fewer tokens, jobs, and manual refresh steps.

GitHubCard
Cards refresh from GitHub data, with cache behavior kept predictable.
Single-purpose tools
Reliability often depends on hosting, scheduled jobs, or API limits.
Lower setupAuto refreshClear limits

This comparison covers tool categories, not specific brands, so the guidance stays fair and maintainable.

07Pricing

Start free. Pay once when you want Pro.

Design and preview for free. Pro Lifetime is a one-time $19 for premium backgrounds, premium fonts, and watermark-free and 4x exports — no subscription.

Free

$0

Free forever

  • Create profile & repo cards
  • Core layouts and widgets
  • Standard quality export
  • Premium backgrounds
  • Premium fonts
  • Watermark-free export
  • High-resolution (4x) export
Pro LifetimePay once

$19

One-time payment. No subscription, no renewals.

Pay once and keep Pro

  • Everything in Free
  • 48 premium backgrounds
  • Premium fonts
  • Watermark-free export
  • High-resolution (4x) export
  • All future Pro features and updates

Checking your plan...

One-time payment · No subscription · 7-day money-back guarantee. See full pricing

08Questions

Things people ask before they ship.

What is GitHubCard?

GitHubCard is a visual GitHub profile README generator. Arrange your GitHub data into profile and repository cards, then use them in a README, portfolio, or social post.

How do I use GitHubCard?

Replace github.com with githubcard.com in a profile or repository URL and add /card, such as githubcard.com/torvalds/card or githubcard.com/facebook/react/card. Open the canvas editor to customize the card.

Do I need to sign in?

You can preview default cards without signing in. Sign in with GitHub to save, publish, update, or delete your custom designs.

How do I embed a card in my README?

Copy the SVG URL (e.g., githubcard.com/your-username.svg) and add it as an image in your Markdown file. The card will display with live data from GitHub.

How do I create a GitHub profile README?

Create a repository that matches your GitHub username, then add a README.md file. GitHub shows that README on your public profile when the repository is public and named correctly.

GitHub profile README guide
Are the cards updated automatically?

Yes. Live cards fetch your GitHub data themselves, so there is nothing to re-export. Each card is cached for 3 hours; after that, the next view refreshes it in the background, so changes usually appear within a few hours. With the GitHub App installed, pushes and new stars refresh repository cards without waiting for the cache.

Can I customize my cards?

Yes. Drag and drop 20+ data widgets in the canvas editor, adjust the layout, then export as SVG or PNG.

Is GitHubCard free to use?

Yes, all core features are completely free. Pro Lifetime is a one-time $19 payment (no subscription) for premium backgrounds, premium fonts, and watermark-free and high-resolution (4x) exports.

Ready when you are

Design the card. Make it yours.

Open the canvas, add your GitHub data, and make a card for your README or website.

Open the canvas