cloudflare-demos

browser-rendering Browser Rendering

Headless Chromium screenshot — source on GitHub

src/index.ts
import puppeteer from '@cloudflare/puppeteer'
import { Hono } from 'hono'

const app = new Hono<{ Bindings: Env }>()

app.get('/screenshot', async (c) => {
  const url = c.req.query('url') ?? 'https://example.com'
  const browser = await puppeteer.launch(c.env.BROWSER)
  try {
    const page = await browser.newPage()
    await page.goto(url, { waitUntil: 'networkidle0' })
    const screenshot = await page.screenshot()
    return c.body(new Uint8Array(screenshot), 200, { 'content-type': 'image/png' })
  } finally {
    await browser.close()
  }
})

app.get('/markdown', (c) => {
  const url = c.req.query('url') ?? 'https://example.com'
  return c.env.BROWSER.quickAction('markdown', { url })
})

app.get('/pdf', (c) => {
  const url = c.req.query('url') ?? 'https://example.com'
  return c.env.BROWSER.quickAction('pdf', { url })
})

export default app
Try it — requests go to a Dynamic Worker running this code. State is isolated per browser session and expires after a while.
response will appear here
response