A Node.js web app for generating social media cards (Open Graph images). Design cards with custom colors, text, and templates, then export as PNG.
This tutorial requires an APIVerve API key. Sign up free - no credit card required.
- Visual card editor with live preview
- Custom title, description, and author
- Color picker for background and text
- Pre-built templates (Blog, Product, Event)
- Standard OG image size (1200x630)
- Download as PNG
- Built with Express.js
-
Clone this repository
git clone https://github.com/apiverve/social-card-generator-node-tutorial.git cd social-card-generator-node-tutorial -
Install dependencies
npm install
-
Add your API key
Set environment variable or edit
server.js:export API_KEY=your-api-key-here -
Start the server
npm start
-
Open in browser
Visit http://localhost:3000 and create social cards!
social-card-generator-node-tutorial/
├── server.js # Express server & API endpoint
├── public/
│ └── index.html # Frontend editor UI
├── package.json # Dependencies
├── screenshot.jpg # Preview image
├── LICENSE # MIT license
├── .gitignore # Git ignore rules
└── README.md # This file
- User designs card in visual editor
- Editor generates HTML with styles
- Frontend sends HTML to
/api/generate - Server calls HTML to Image API
- API renders HTML and returns image URL
- User downloads the generated PNG
const response = await fetch('https://api.apiverve.com/v1/htmltoimage', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': API_KEY
},
body: JSON.stringify({
html: '<html>...</html>',
width: 1200,
height: 630,
format: 'png'
})
});Endpoint: POST https://api.apiverve.com/v1/htmltoimage
Request Body:
| Parameter | Type | Required | Description |
|---|---|---|---|
html |
string | Yes | HTML code to render |
width |
number | No | Image width (default: 1280) |
height |
number | No | Image height (default: 800) |
format |
string | No | Output format: png, jpeg, webp |
Example Response:
{
"status": "ok",
"error": null,
"data": {
"imageName": "79c8416d-8096-4524-adea-a948eb69a21e.png",
"format": ".png",
"downloadURL": "https://storage.googleapis.com/apiverve/...",
"expires": 1766010253596,
"htmlLength": 197,
"dimensions": {
"width": 800,
"height": 600
}
}
}| Platform | Size |
|---|---|
| Open Graph (Facebook, LinkedIn) | 1200 x 630 |
| Twitter Card | 1200 x 600 |
| 1000 x 1500 |
- Blog posts - Generate OG images for articles
- Product launches - Create announcement cards
- Events - Design event share images
- Marketing - Build campaign visuals
- Documentation - Generate doc previews
- Email headers - Create email banner images
- Add image/logo upload
- Save templates to database
- Add more card layouts
- Support custom fonts
- Add icon library
- Batch generation for multiple posts
Explore more APIs at APIVerve:
- HTML to PDF - Convert HTML to PDF
- Markdown to Image - Convert Markdown to image
- Website Screenshot - Capture website screenshots
This tutorial works with the free APIVerve plan. Some APIs may have:
- Locked fields: Premium response fields return
nullon free plans - Ignored parameters: Some optional parameters require a paid plan
The API response includes a premium object when limitations apply. Upgrade anytime to unlock all features.
MIT - see LICENSE
- Get API Key - Sign up free
- APIVerve Marketplace - Browse 300+ APIs
- HTML to Image API - API details