Logo

MonoCalc

/

GitHub Profile Card Generator

Social Media

Card preview

Exports at 2400 × 1260 px

GitHub profile card, no name entered yet. 1200 by 630 pixels.

Add a name or a handle to start
The card draws from the moment you type. Every other field is optional — anything you leave blank collapses its row instead of printing an empty label.

Text on background contrast 16.02:1 — at or above the 4.5:1 minimum for body-size text.

Drawn as @handle.
Falls back to the handle when blank.
Wrapped to at most three lines, then trimmed with an ellipsis.
Whole numbers only.
Whole numbers only.
Whole numbers only.
Drawn as “Since 2015”.

Avatar

A file from your device is the reliable path: it is same-origin, so the card always exports. An image address from another site is best effort — if that host does not allow the read, the initials placeholder is drawn instead and the card still downloads.

Size and theme

Link-preview ratio

Embeddable snippets

Both are built from the same fields as the card, escaped for the place they are going.

Markdown for a README

The PNG lives in your downloads folder, not on a server, so the snippet points at a relative path and says so in a comment. Commit the file next to the README and keep the path in step.

HTML for a page

A self-contained card with inline styles matching the theme above. It renders on its own, without the PNG.

About This Tool

GitHub Profile Card Generator — a profile as a picture

A GitHub profile card turns the handful of public facts on a profile — the handle, the display name, the bio, the repo and follower counts — into one image you can drop into a README, a portfolio page, a conference slide or a post. This tool composes that image in your browser: you fill in the fields, pick a theme and a size, and the card is drawn onto a <canvas> in this tab and saved to your device as a PNG. Nothing is uploaded, because this site is a set of static files with no server behind it.

Type it, or paste the JSON

The tool opens in manual mode and stays fully usable with no network at all. Every field is optional except a name to put on the card, and a field you leave blank collapses its row rather than printing an empty label — no stray undefined, no floating dash, no gap where a company name would have gone.

If you already have the response body from https://api.github.com/users/{username}, the paste panel maps it onto those fields for you. It reads each key defensively: a key that is absent, null, or the wrong type leaves that field empty instead of throwing or printing the word "null". Invalid JSON produces an inline message naming the parse failure and leaves what you pasted exactly where it is. After a successful map every field is still editable — pasting is a shortcut into manual mode, not a locked state.

Why there is no Fetch button
Whether a browser on an unrelated site may read GitHub's public user endpoint without a token could not be verified from a real browser when this tool was built. A button that turns out to be blocked would fail for every visitor, every time, so the request address is printed for you to open or curl yourself instead. There is no API key anywhere in this tool, and there should never be one — a key shipped in a static bundle is a key anybody can read.

How the card is drawn

The layout is proportional rather than fixed, so the same composition works at 1200×630, 800×400 and 1080×1080. The avatar is clipped to a circle and cover-fitted so it fills without distorting; the three stat tiles share the content width and abbreviate large numbers the way GitHub does, so 1200 becomes 1.2k; and the meta row centres whichever chips have values.

Text is measured, never estimated. Every wrap and every cut comes from measureText on the real canvas after the font is set, because the same font stack resolves to a different face on macOS, Windows, Linux and Android, and different letterforms break in different places. Truncation walks grapheme clusters rather than UTF-16 units, which is what keeps an emoji at the end of a bio from being sliced into a broken glyph. The card renders at twice its nominal size so the text stays crisp when the image is scaled.

Contrast, and why it is shown

A card is a bitmap. Once it is exported at low contrast, no reader can fix it — there is no zoom that helps, no reader mode, no theme switch. So the tool prints the WCAG ratio between the text colour and the background and warns below 4.5:1, before the colours become permanent.

The avatar, and the trap in exporting one

Upload the avatar as a file if you want a reliable download
An image loaded from another website taints the canvas, and every read-back afterwards — which is what saving a PNG is — fails. A remote avatar address is attempted with cross-origin loading requested, but if the host does not permit it the initials placeholder is drawn and the tool says so plainly. A file you pick from your own device is same-origin, never taints, and always exports.

Snippets that tell the truth

Below the card are two copyable blocks. The Markdown one is written for a README and is honest about hosting: the PNG exists only in your downloads folder, so the snippet points at a relative path and says in a comment that you need to commit the file there. It never references an address that does not exist. The HTML one is a self-contained <div> with inline styles matching your theme, so it renders on a portfolio page without the PNG at all.

Both are escaped for their own context, because a bio is free text written by whoever owns that profile and can contain angle brackets, quotes or link syntax. It is drawn as literal text on the card and escaped again on the way into markup. The numbers on the card are public profile facts and nothing more — there is no comparison here, no ranking and no scoring, because a follower count is not a measure of a developer.

Frequently Asked Questions

Is the GitHub Profile Card Generator free?

Yes, GitHub Profile Card Generator is totally free :)

Can I use the GitHub Profile Card Generator offline?

Yes, you can install the webapp as PWA.

Is it safe to use GitHub Profile Card Generator?

Yes, any data related to GitHub Profile Card Generator only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does this GitHub profile card generator work?

You fill in the card's fields — handle, display name, bio, the three counts and the optional meta row — and the tool draws them onto a canvas inside this browser tab. Every wrap and every truncation comes from measuring the real font on the real canvas at the moment of drawing, so the preview is produced by exactly the same code as the downloaded file. When it looks right, the canvas is encoded to a PNG your browser saves locally. You can also copy a Markdown block for a README or a self-contained HTML card for a portfolio page.

Does this tool fetch my profile from GitHub automatically?

No. There is no request to GitHub anywhere in this tool, and no API key. Whether a browser is allowed to read GitHub's public user endpoint from a different website could not be verified when the tool was built, and shipping a button that might be blocked for everyone would be worse than not shipping one. Instead the exact request address is printed for you: open it in a tab, or run it through curl, and paste the JSON back into the paste panel. The tool maps the familiar keys onto the fields and leaves everything editable afterwards.

Why does my downloaded card show initials instead of the avatar?

Because of how browsers protect canvas pixels. An image loaded from another website taints the canvas, and every attempt to read it back out — which is what saving a PNG is — then fails. The tool tries a remote avatar address with cross-origin loading requested, but if the host does not allow it the image never arrives and the initials placeholder is drawn instead, with a notice saying so. Downloading the avatar and uploading it as a file always works, because a file you chose is same-origin and never taints anything.

What do the three card sizes change?

Only the shape of the exported image. 1200 by 630 is the ratio link previews have settled on, so the card is not cropped oddly when a post unfurls it. 800 by 400 is a compact strip that sits well in a README between headings. 1080 by 1080 is square. The layout is proportional rather than fixed, so the avatar, the stat tiles and the meta row re-proportion for each shape, and any field you leave blank collapses its row rather than leaving a gap.

What is the contrast figure next to the colour pickers?

It is the WCAG contrast ratio between the card's text colour and its background, and it is shown because a card is a picture. Once it is exported at low contrast there is no way for a reader to increase it — no zoom, no reader mode, no theme switch. The tool warns below 4.5:1, the threshold for body-size text, so you can adjust the colours before the card becomes a fixed bitmap that some people simply cannot read.

Is anything I type or paste sent anywhere?

No. This site is a set of static files with no backend, so there is nowhere to send it. The fields, the pasted JSON, the uploaded avatar and the rendered card all stay in this tab, and the whole tool keeps working with the network switched off. The PNG is written by your browser straight to your downloads folder, and nothing is stored between visits.