https://github.com/apiverve/social-card-generator-node-tutorial
Social media card generator for creating Open Graph images with Node.js
https://github.com/apiverve/social-card-generator-node-tutorial
apiverve express html-to-image marketing nodejs og-image open-graph social-cards tutorial
Last synced: about 2 hours ago
JSON representation
Social media card generator for creating Open Graph images with Node.js
- Host: GitHub
- URL: https://github.com/apiverve/social-card-generator-node-tutorial
- Owner: apiverve
- License: mit
- Created: 2026-02-16T06:25:20.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-16T07:41:10.000Z (4 months ago)
- Last Synced: 2026-02-16T14:18:33.868Z (4 months ago)
- Topics: apiverve, express, html-to-image, marketing, nodejs, og-image, open-graph, social-cards, tutorial
- Language: HTML
- Homepage: https://apiverve.com/marketplace/htmltoimage
- Size: 16.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Social Card Generator | APIVerve API Tutorial
[](LICENSE)
[]()
[](https://nodejs.org)
[](https://expressjs.com)
[](https://apiverve.com/marketplace/htmltoimage?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial)
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.
---
### Get Your Free API Key
This tutorial requires an APIVerve API key. **[Sign up free](https://dashboard.apiverve.com?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial)** - no credit card required.
---
## Features
- 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
## Quick Start
1. **Clone this repository**
```bash
git clone https://github.com/apiverve/social-card-generator-node-tutorial.git
cd social-card-generator-node-tutorial
```
2. **Install dependencies**
```bash
npm install
```
3. **Add your API key**
Set environment variable or edit `server.js`:
```bash
export API_KEY=your-api-key-here
```
4. **Start the server**
```bash
npm start
```
5. **Open in browser**
Visit http://localhost:3000 and create social cards!
## Project Structure
```
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
```
## How It Works
1. User designs card in visual editor
2. Editor generates HTML with styles
3. Frontend sends HTML to `/api/generate`
4. Server calls HTML to Image API
5. API renders HTML and returns image URL
6. User downloads the generated PNG
### The API Call
```javascript
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: '...',
width: 1200,
height: 630,
format: 'png'
})
});
```
## API Reference
**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:**
```json
{
"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
}
}
}
```
## Social Card Sizes
| Platform | Size |
|----------|------|
| Open Graph (Facebook, LinkedIn) | 1200 x 630 |
| Twitter Card | 1200 x 600 |
| Pinterest | 1000 x 1500 |
## Use Cases
- **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
## Customization Ideas
- Add image/logo upload
- Save templates to database
- Add more card layouts
- Support custom fonts
- Add icon library
- Batch generation for multiple posts
## Related APIs
Explore more APIs at [APIVerve](https://apiverve.com/marketplace?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial):
- [HTML to PDF](https://apiverve.com/marketplace/htmltopdf?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - Convert HTML to PDF
- [Markdown to Image](https://apiverve.com/marketplace/markdowntoimage?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - Convert Markdown to image
- [Website Screenshot](https://apiverve.com/marketplace/webscreenshots?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - Capture website screenshots
## Free Plan Note
This tutorial works with the free APIVerve plan. Some APIs may have:
- **Locked fields**: Premium response fields return `null` on free plans
- **Ignored parameters**: Some optional parameters require a paid plan
The API response includes a `premium` object when limitations apply. [Upgrade anytime](https://dashboard.apiverve.com/plans) to unlock all features.
## License
MIT - see [LICENSE](LICENSE)
## Links
- [Get API Key](https://dashboard.apiverve.com?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - Sign up free
- [APIVerve Marketplace](https://apiverve.com/marketplace?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - Browse 300+ APIs
- [HTML to Image API](https://apiverve.com/marketplace/htmltoimage?utm_source=github&utm_medium=tutorial&utm_campaign=social-card-generator-node-tutorial) - API details