Social Preview Generator (Playwright Sample)

A minimal web app that shows how to use Playwright to extract Open Graph metadata from any URL, render a social-style preview card, and return a PNG screenshot of that card via an Express API.

Features

• Input a URL, validate, and call a backend endpoint to generate a preview.
• Playwright loads the page, extracts OG metadata with sensible fallbacks, then renders a local /preview-card template.
• Screenshots the preview (1200×630 PNG) and returns it as base64 alongside the metadata.
• UI displays the image, metadata list, error/loading states, and a download button.

Requirements

• Node.js 18+ recommended
• npm (or another Node package manager)
• Local network access to the target URLs you enter

Setup

npm install
npx playwright install chromium

Run

npm start
# then open http://localhost:3000

Usage (UI)

1. Enter a URL (full http/https or just a hostname like example.com).
2. Click Generate Preview.
3. Wait for Playwright to extract metadata, build the preview card, and return the screenshot.
4. When the image loads, the status bar will show “Preview ready.” with a Download link.

API (POST /api/generate-preview)

Request:

{ "url": "https://example.com" }

Response (200):

{
  "metadata": {
    "title": "...",
    "description": "...",
    "image": "...",
    "domain": "example.com"
  },
  "previewImage": "data:image/png;base64,..."
}

Example curl:

curl -X POST http://localhost:3000/api/generate-preview \
  -H "Content-Type: application/json" \
  -d '{"url":"https://example.com"}'

Notes & Troubleshooting

• Timeout: pages must load within ~15s; network-idle wait is best-effort.
• Missing metadata: fallbacks use document.title, meta[name="description"], and the hostname.
• Images: if og:image is absent or fails to load, the card still renders text-only.
• Browser lifecycle: Chromium is launched per request and closed on completion/error.