Setup with Cloudflare Workers

How it works (SPAs)

Your edge middleware/worker calls /api/prerender/render?url=... for HTML document requests. If LovableHTML returns 200 you serve rendered HTML. If it returns 304 with a Location header, prerendering didn't apply — fall back to your origin SPA.

Prerequisites

A LovableHTML account and API key (Settings → API Keys)
A domain added + verified in your LovableHTML dashboard
Cloudflare account with Workers enabled

Setup

Replace <your-api-key> (or set LOVABLEHTML_API_KEY where the snippet expects it). Don't commit API keys.

If your domain is not on Cloudflare yet, add it first
Set up the hostname in Lovable first, then make sure Cloudflare is proxying it.
Most common case: if you are connecting www, app, or another subdomain, point it to the hostname Lovable gives you using a proxied CNAME (orange cloud on).
If you are connecting the apex/root domain such as yourdomain.com, follow the DNS records Lovable gives you for that hostname. In many cases that will be an A record plus verification records instead of a CNAME.
Create a new Worker → choose a "Hello World" Worker → Deploy → Edit Code
Paste the snippet below and deploy your Worker
Under Variables and Secrets, add a secret named LOVABLEHTML_API_KEY or run: wrangler secret put LOVABLEHTML_API_KEY
Go to your Worker → Settings → Domains & Routes → Add Route → enter yourdomain.com/*
Set Failure mode to Fail open (proceed) and save.
Deploy the Worker. It can take a couple of minutes to start working.

Important: Use Routes, not Custom Domains

Lovable remains the origin for your site, so the Worker should be attached with a Route. Use Custom Domains only when the Worker is the origin. Keep the DNS record orange-clouded so traffic reaches Cloudflare before it reaches Lovable.

How to Test

Call the render API directly and verify x-lovablehtml-render-cache: hit | miss
Hit your site with Accept: text/html and verify you get HTML back
Verify static assets (JS/CSS/images/fonts) are not proxied to LovableHTML

bash

CopyDownload

# 1) Call the LovableHTML render API directly
curl -sS -D - -o /dev/null \
  -H "x-lovablehtml-api-key: <API_KEY>" \
  -H "Accept: text/html" \
  "https://lovablehtml.com/api/prerender/render?url=https%3A%2F%2Fyour-domain.com%2Fyour-page"

# Look for:
# - HTTP/1.1 200
# - x-lovablehtml-render-cache: hit | miss
# - x-lovablehtml-snapshot-key: ...

bash

CopyDownload

# 2) Hit your site with an HTML Accept header
curl -sS -D - -o /dev/null \
  -H "Accept: text/html" \
  -A "Googlebot" \
  "https://your-domain.com/your-page"

# Look for:
# - HTTP/1.1 200
# - content-type: text/html

bash

CopyDownload

# 3) Passthrough (no Accept: text/html → worker should not call LovableHTML)
curl -sS -D - -o /dev/null \
  -A "Mozilla/5.0" \
  "https://your-domain.com/your-page"

Best Practices

Keep secrets out of git — Store keys in your platform's secret manager or env vars; rotate/revoke when compromised.
Don't proxy static assets — Only call LovableHTML for HTML document requests. Always pass through JS/CSS/images/fonts.
Handle 304 passthrough — 304 means prerendering doesn't apply. Fall back to your origin and use the Location header as the target URL when needed.
Invalidate after content changes — Use the cache invalidation endpoints (optionally with prewarm) after deploys or CMS updates.

Need help? Check the full API reference for prerender, cache, and analytics endpoint docs, or jump directly to Analytics API, or contact us if you run into issues.