---
title: "Generate a GitHub Repo Card Image"
description: "Render a GitHub repository card as an image. Worked code, common dimensions and the social preview template alternative."
url: "https://html2img.com/docs/examples/github-repo-card/"
---
# 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.
> **Note**
>
> Want it faster? Use the [GitHub Social Preview template](https://html2img.com/templates/github-social-preview/) and skip the markup. Send repo name, description, language and star count as JSON.
## HTML Content
```html
```
## CSS Styles
```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: #4F5D95;
}
.meta-item svg {
color: #57606a;
}
```
## API Request
```bash
POST https://app.html2img.com/api/html
```
```json
{
"html": "",
"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:#4F5D95}.meta-item svg{color:#57606a}"
}
```
> **Note**
>
> Update the repository details, stats, and description to match your GitHub repository.
## How it Works
1. Accurate recreation of GitHub's repository card design
2. SVG icons for repository actions and metadata
3. Interactive star button with hover state
4. Responsive layout that maintains GitHub's visual style
> **Warning**
>
> 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.
### Node.js
```javascript
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
```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
```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 colour.** Inline SVGs need an explicit `fill` attribute. The example markup uses `fill="currentColor"` and sets the text colour on the parent.
- **Card looks crushed at retina.** Render at `dpi: 2` (see [dpi parameter](https://html2img.com/docs/parameters/dpi/)) for sharp output on modern displays.
## See also
- [JavaScript integration guide](https://html2img.com/integrations/javascript/), [Python integration guide](https://html2img.com/integrations/python/)
- [html parameter](https://html2img.com/docs/parameters/html/), [dimensions parameter](https://html2img.com/docs/parameters/dimensions/)