{"id":51126545,"url":"https://github.com/apiverve/social-card-generator-node-tutorial","last_synced_at":"2026-06-25T08:01:59.106Z","repository":{"id":338744268,"uuid":"1158967975","full_name":"apiverve/social-card-generator-node-tutorial","owner":"apiverve","description":"Social media card generator for creating Open Graph images with Node.js","archived":false,"fork":false,"pushed_at":"2026-02-16T07:41:10.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-16T14:18:33.868Z","etag":null,"topics":["apiverve","express","html-to-image","marketing","nodejs","og-image","open-graph","social-cards","tutorial"],"latest_commit_sha":null,"homepage":"https://apiverve.com/marketplace/htmltoimage","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apiverve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-16T06:25:20.000Z","updated_at":"2026-02-16T07:41:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/apiverve/social-card-generator-node-tutorial","commit_stats":null,"previous_names":["apiverve/social-card-generator-node-tutorial"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/apiverve/social-card-generator-node-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fsocial-card-generator-node-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fsocial-card-generator-node-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fsocial-card-generator-node-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fsocial-card-generator-node-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apiverve","download_url":"https://codeload.github.com/apiverve/social-card-generator-node-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apiverve%2Fsocial-card-generator-node-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34765322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-25T02:00:05.521Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apiverve","express","html-to-image","marketing","nodejs","og-image","open-graph","social-cards","tutorial"],"created_at":"2026-06-25T08:01:59.043Z","updated_at":"2026-06-25T08:01:59.101Z","avatar_url":"https://github.com/apiverve.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Social Card Generator | APIVerve API Tutorial\r\n\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\r\n[![Build](https://img.shields.io/badge/Build-Passing-brightgreen.svg)]()\r\n[![Node.js](https://img.shields.io/badge/Node.js-18+-339933)](https://nodejs.org)\r\n[![Express](https://img.shields.io/badge/Express-4-000000)](https://expressjs.com)\r\n[![APIVerve | HTML to Image](https://img.shields.io/badge/APIVerve-HTML_to_Image-purple)](https://apiverve.com/marketplace/htmltoimage?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial)\r\n\r\nA Node.js web app for generating social media cards (Open Graph images). Design cards with custom colors, text, and templates, then export as PNG.\r\n\r\n![Screenshot](https://raw.githubusercontent.com/apiverve/social-card-generator-node-tutorial/main/screenshot.jpg)\r\n\r\n---\r\n\r\n### Get Your Free API Key\r\n\r\nThis tutorial requires an APIVerve API key. **[Sign up free](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial)** - no credit card required.\r\n\r\n---\r\n\r\n## Features\r\n\r\n- Visual card editor with live preview\r\n- Custom title, description, and author\r\n- Color picker for background and text\r\n- Pre-built templates (Blog, Product, Event)\r\n- Standard OG image size (1200x630)\r\n- Download as PNG\r\n- Built with Express.js\r\n\r\n## Quick Start\r\n\r\n1. **Clone this repository**\r\n   ```bash\r\n   git clone https://github.com/apiverve/social-card-generator-node-tutorial.git\r\n   cd social-card-generator-node-tutorial\r\n   ```\r\n\r\n2. **Install dependencies**\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Add your API key**\r\n\r\n   Set environment variable or edit `server.js`:\r\n   ```bash\r\n   export API_KEY=your-api-key-here\r\n   ```\r\n\r\n4. **Start the server**\r\n   ```bash\r\n   npm start\r\n   ```\r\n\r\n5. **Open in browser**\r\n\r\n   Visit http://localhost:3000 and create social cards!\r\n\r\n## Project Structure\r\n\r\n```\r\nsocial-card-generator-node-tutorial/\r\n├── server.js           # Express server \u0026 API endpoint\r\n├── public/\r\n│   └── index.html      # Frontend editor UI\r\n├── package.json        # Dependencies\r\n├── screenshot.jpg      # Preview image\r\n├── LICENSE             # MIT license\r\n├── .gitignore          # Git ignore rules\r\n└── README.md           # This file\r\n```\r\n\r\n## How It Works\r\n\r\n1. User designs card in visual editor\r\n2. Editor generates HTML with styles\r\n3. Frontend sends HTML to `/api/generate`\r\n4. Server calls HTML to Image API\r\n5. API renders HTML and returns image URL\r\n6. User downloads the generated PNG\r\n\r\n### The API Call\r\n\r\n```javascript\r\nconst response = await fetch('https://api.apiverve.com/v1/htmltoimage', {\r\n  method: 'POST',\r\n  headers: {\r\n    'Content-Type': 'application/json',\r\n    'x-api-key': API_KEY\r\n  },\r\n  body: JSON.stringify({\r\n    html: '\u003chtml\u003e...\u003c/html\u003e',\r\n    width: 1200,\r\n    height: 630,\r\n    format: 'png'\r\n  })\r\n});\r\n```\r\n\r\n## API Reference\r\n\r\n**Endpoint:** `POST https://api.apiverve.com/v1/htmltoimage`\r\n\r\n**Request Body:**\r\n\r\n| Parameter | Type | Required | Description |\r\n|-----------|------|----------|-------------|\r\n| `html` | string | Yes | HTML code to render |\r\n| `width` | number | No | Image width (default: 1280) |\r\n| `height` | number | No | Image height (default: 800) |\r\n| `format` | string | No | Output format: png, jpeg, webp |\r\n\r\n**Example Response:**\r\n\r\n```json\r\n{\r\n  \"status\": \"ok\",\r\n  \"error\": null,\r\n  \"data\": {\r\n    \"imageName\": \"79c8416d-8096-4524-adea-a948eb69a21e.png\",\r\n    \"format\": \".png\",\r\n    \"downloadURL\": \"https://storage.googleapis.com/apiverve/...\",\r\n    \"expires\": 1766010253596,\r\n    \"htmlLength\": 197,\r\n    \"dimensions\": {\r\n      \"width\": 800,\r\n      \"height\": 600\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## Social Card Sizes\r\n\r\n| Platform | Size |\r\n|----------|------|\r\n| Open Graph (Facebook, LinkedIn) | 1200 x 630 |\r\n| Twitter Card | 1200 x 600 |\r\n| Pinterest | 1000 x 1500 |\r\n\r\n## Use Cases\r\n\r\n- **Blog posts** - Generate OG images for articles\r\n- **Product launches** - Create announcement cards\r\n- **Events** - Design event share images\r\n- **Marketing** - Build campaign visuals\r\n- **Documentation** - Generate doc previews\r\n- **Email headers** - Create email banner images\r\n\r\n## Customization Ideas\r\n\r\n- Add image/logo upload\r\n- Save templates to database\r\n- Add more card layouts\r\n- Support custom fonts\r\n- Add icon library\r\n- Batch generation for multiple posts\r\n\r\n## Related APIs\r\n\r\nExplore more APIs at [APIVerve](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial):\r\n\r\n- [HTML to PDF](https://apiverve.com/marketplace/htmltopdf?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - Convert HTML to PDF\r\n- [Markdown to Image](https://apiverve.com/marketplace/markdowntoimage?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - Convert Markdown to image\r\n- [Website Screenshot](https://apiverve.com/marketplace/webscreenshots?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - Capture website screenshots\r\n\r\n## Free Plan Note\r\n\r\nThis tutorial works with the free APIVerve plan. Some APIs may have:\r\n- **Locked fields**: Premium response fields return `null` on free plans\r\n- **Ignored parameters**: Some optional parameters require a paid plan\r\n\r\nThe API response includes a `premium` object when limitations apply. [Upgrade anytime](https://dashboard.apiverve.com/plans) to unlock all features.\r\n\r\n## License\r\n\r\nMIT - see [LICENSE](LICENSE)\r\n\r\n## Links\r\n\r\n- [Get API Key](https://dashboard.apiverve.com?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - Sign up free\r\n- [APIVerve Marketplace](https://apiverve.com/marketplace?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - Browse 300+ APIs\r\n- [HTML to Image API](https://apiverve.com/marketplace/htmltoimage?utm_source=github\u0026utm_medium=tutorial\u0026utm_campaign=social-card-generator-node-tutorial) - API details\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fsocial-card-generator-node-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapiverve%2Fsocial-card-generator-node-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapiverve%2Fsocial-card-generator-node-tutorial/lists"}