Screenshot Generator

Generate screenshots from HTML and CSS, automatically uploaded to Cloudinary

HTML

Enter your HTML content

CSS

Enter your CSS styles

JavaScript

Enter your JavaScript code

Result

Your screenshot will appear here

Add your HTML and CSS, then click "Generate & Upload Screenshot"

Setup Instructions

npm install cloudinary puppeteer puppeteer-core @sparticuz/chromium-min

Add these to your Vercel project settings or .env.local:

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

POST /api/screenshot
{
  "html": "<div>...</div>",
  "css": "body { ... }",
  "width": 1200,
  "height": 800,
  "fileName": "screenshot"
}