How to Generate a GitHub Repo Card Image
Render a GitHub repository card as a PNG. Useful for project READMEs, social previews and conference slides.
Want it faster? Use the GitHub Social Preview template and skip the markup. Send repo name, description, language and star count as JSON.
HTML Content
<div class="repo-card">
<div class="repo-header">
<div class="repo-name-container">
<svg class="repo-icon" viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z" />
</svg>
<div class="repo-name">
<a href="https://github.com/html2img/html-to-image" class="repo-link">codeium/html-to-image</a>
<span class="repo-visibility">Public</span>
</div>
</div>
<button class="star-button">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" />
</svg>
Star
</button>
</div>
<div class="repo-description">
Convert HTML elements to images using pure JavaScript with no dependencies. Perfect for creating social media cards, screenshots, and more.
</div>
<div class="repo-meta">
<div class="meta-item">
<div class="language-dot"></div>
TypeScript
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" />
</svg>
1.2k stars
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z" />
</svg>
156 forks
</div>
<div class="meta-item">
<svg viewBox="0 0 16 16" width="16" height="16">
<path fill="currentColor" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z" />
</svg>
42 watching
</div>
<div class="meta-item">
Updated 2 days ago
</div>
</div>
</div>CSS Styles
body {
margin: 0;
padding: 0;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.repo-card {
width: 450px;
background: white;
border: 1px solid #e1e4e8;
border-radius: 6px;
padding: 16px;
font-size: 14px;
}
.repo-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.repo-name-container {
display: flex;
align-items: center;
}
.repo-icon {
color: #57606a;
margin-right: 8px;
}
.repo-name {
display: flex;
align-items: center;
}
.repo-link {
color: #0969da;
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.repo-visibility {
margin-left: 8px;
padding: 0 7px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
border: 1px solid #d0d7de;
border-radius: 2em;
color: #57606a;
}
.star-button {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 12px;
font-size: 12px;
font-weight: 500;
line-height: 20px;
color: #24292f;
background-color: #f6f8fa;
border: 1px solid #1b1f2426;
border-radius: 6px;
cursor: pointer;
}
.star-button:hover {
background-color: #f3f4f6;
border-color: #1b1f2426;
}
.repo-description {
color: #57606a;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
}
.repo-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
color: #57606a;
font-size: 12px;
}
.meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.language-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #3178c6;
}
.meta-item svg {
color: #57606a;
}API Request
POST https://app.html2img.com/api/html{
"html": "<div class=\"repo-card\"><div class=\"repo-header\"><div class=\"repo-name-container\"><svg class=\"repo-icon\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\" /></svg><div class=\"repo-name\"><a href=\"https://github.com/codeium/html-to-image\" class=\"repo-link\">codeium/html-to-image</a><span class=\"repo-visibility\">Public</span></div></div><button class=\"star-button\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z\" /></svg>Star</button></div><div class=\"repo-description\">Convert HTML elements to images using pure JavaScript with no dependencies. Perfect for creating social media cards, screenshots, and more.</div><div class=\"repo-meta\"><div class=\"meta-item\"><div class=\"language-dot\"></div>TypeScript</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z\" /></svg>1.2k stars</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z\" /></svg>156 forks</div><div class=\"meta-item\"><svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\"><path fill=\"currentColor\" d=\"M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z\" /></svg>42 watching</div><div class=\"meta-item\">Updated 2 days ago</div></div></div>",
"width": 484,
"height": 200,
"css": "body{margin:0;padding:0;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.repo-card{width:450px;background:white;border:1px solid #e1e4e8;border-radius:6px;padding:16px;font-size:14px}.repo-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.repo-name-container{display:flex;align-items:center}.repo-icon{color:#57606a;margin-right:8px}.repo-name{display:flex;align-items:center}.repo-link{color:#0969da;text-decoration:none;font-weight:600;font-size:16px}.repo-visibility{margin-left:8px;padding:0 7px;font-size:12px;font-weight:500;line-height:18px;border:1px solid #d0d7de;border-radius:2em;color:#57606a}.star-button{display:flex;align-items:center;gap:4px;padding:3px 12px;font-size:12px;font-weight:500;line-height:20px;color:#24292f;background-color:#f6f8fa;border:1px solid #1b1f2426;border-radius:6px;cursor:pointer}.star-button:hover{background-color:#f3f4f6;border-color:#1b1f2426}.repo-description{color:#57606a;margin-bottom:16px;font-size:14px;line-height:1.5}.repo-meta{display:flex;flex-wrap:wrap;gap:16px;color:#57606a;font-size:12px}.meta-item{display:flex;align-items:center;gap:4px}.language-dot{width:12px;height:12px;border-radius:50%;background-color:#3178c6}.meta-item svg{color:#57606a}"
}
Update the repository details, stats, and description to match your GitHub repository.
How it Works
- Accurate recreation of GitHub’s repository card design
- SVG icons for repository actions and metadata
- Interactive star button with hover state
- Responsive layout that maintains GitHub’s visual style
Update the repository URL and statistics to match your actual GitHub repository data.
Code in other languages
The same payload can be sent from any language that can make an HTTP POST. The full PHP, Node.js and Python equivalents are shown in the authentication guide and language guides.
Node.js
const response = await fetch('https://app.html2img.com/api/html', {
method: 'POST',
headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ html: repoCardHtml, css: repoCardCss, width: 484, height: 200 }),
});
const { url } = await response.json();Python
import os, requests
response = requests.post(
'https://app.html2img.com/api/html',
headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
json={'html': repo_card_html, 'css': repo_card_css, 'width': 484, 'height': 200},
)
url = response.json()['url']PHP
$response = file_get_contents('https://app.html2img.com/api/html', false, stream_context_create([
'http' => [
'method' => 'POST',
'header' => "X-API-Key: " . getenv('HTML2IMG_API_KEY') . "\r\nContent-Type: application/json\r\n",
'content' => json_encode(['html' => $repoCardHtml, 'css' => $repoCardCss, 'width' => 484, 'height' => 200]),
],
]));
$url = json_decode($response, true)['url'];Common pitfalls
- Stats go stale. Star and fork counts in the markup do not update on their own. Refetch the GitHub API and re-render whenever you ship a new release.
- SVG icons miss their fill color. Inline SVGs need an explicit
fillattribute. The example markup usesfill="currentColor"and sets the text color on the parent. - Card looks crushed at retina. Render at
dpi: 2(see dpi parameter) for sharp output on modern displays.