cloudflare-browser-rendering

Name: cloudflare-browser-rendering
Author: jackspace

15stars7forks

How to install cloudflare-browser-rendering?

jackspace/claudeskillz/cloudflare-browser-rendering

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-browser-rendering

Installs into the current project.

Summary

Complete knowledge domain for Cloudflare Browser Rendering - Headless Chrome automation with Puppeteer and Playwright on Cloudflare Workers for screenshots, PDFs, web scraping, and browser automation workflows. Use when: taking screenshots, generating PDFs from HTML or URLs, web

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Browser Rendering - Complete Reference
2
3	Production-ready knowledge domain for building browser automation workflows with Cloudflare Browser Rendering.
4
5	Status: Production Ready ✅
6	Last Updated: 2025-10-22
7	Dependencies: cloudflare-worker-base (for Worker setup)
8	Latest Versions: @cloudflare/puppeteer@1.0.4, @cloudflare/playwright@1.0.0, wrangler@4.43.0
9
10	---
11
12	## Table of Contents
13
14	1. [Quick Start (5 minutes)](#quick-start-5-minutes)
15	2. [Browser Rendering Overview](#browser-rendering-overview)
16	3. [Puppeteer API Reference](#puppeteer-api-reference)
17	4. [Playwright API Reference](#playwright-api-reference)
18	5. [Session Management](#session-management)
19	6. [Common Patterns](#common-patterns)
20	7. [Pricing & Limits](#pricing--limits)
21	8. [Known Issues Prevention](#known-issues-prevention)
22	9. [Production Checklist](#production-checklist)
23
24	---
25
26	## Quick Start (5 minutes)
27
28	### 1. Add Browser Binding
29
30	wrangler.jsonc:
31	```jsonc
32	{
33	"name": "browser-worker",
34	"main": "src/index.ts",
35	"compatibility_date": "2023-03-14",
36	"compatibility_flags": ["nodejs_compat"],
37	"browser": {
38	"binding": "MYBROWSER"
39	}
40	}
41	```
42
43	Why nodejs_compat? Browser Rendering requires Node.js APIs and polyfills.
44
45	### 2. Install Puppeteer
46
47	```bash
48	npm install @cloudflare/puppeteer
49	```
50
51	### 3. Take Your First Screenshot
52
53	```typescript
54	import puppeteer from "@cloudflare/puppeteer";
55
56	interface Env {
57	MYBROWSER: Fetcher;
58	}
59
60	export default {
61	async fetch(request: Request, env: Env): Promise<Response> {
62	const { searchParams } = new URL(request.url);
63	const url = searchParams.get("url") \|\| "https://example.com";
64
65	// Launch browser
66	const browser = await puppeteer.launch(env.MYBROWSER);
67	const page = await browser.newPage();
68
69	// Navigate and capture
70	await page.goto(url);
71	const screenshot = await page.screenshot();
72
73	// Clean up
74	await browser.close();
75
76	return new Response(screenshot, {
77	headers: { "content-type": "image/png" }
78	});
79	}
80	};
81	```
82
83	### 4. Deploy
84
85	```bash
86	npx wrangler deploy
87	```
88
89	Test at: `https://your-worker.workers.dev/?url=https://example.com`
90
91	CRITICAL:
92	- Always pass `env.MYBROWSER` to `puppeteer.launch()` (not undefined)
93	- Always call `browser.close()` when done (or use `browser.disconnect()` for session reuse)
94	- Use `nodejs_compat` compatibility flag
95
96	---
97
98	## Browser Rendering Overview
99
100	### What is Browser Rendering?
101
102	Cloudflare Browser Rendering provides headless Chromium browsers running on Cloudflare's global network. Use familiar tools like Puppeteer and Playwright to automate browser tasks:
103
104	- Screenshots - Capture visual snapshots of web pages
105	- PDF Generation - Convert HTML/URLs to PDFs
106	- Web Scraping - Extract content from dynamic websites
107	- Testing - Automate frontend tests
108	- Crawling - Navigate multi-page workflows
109
110	### Two Integration Methods
111
112	\| Method \| Best For \| Complexity \|
113	\|--------\|----------\|-----------\|
114	\| Workers Bindings \| Complex automation, custom workflows, session management \| Advanced \|
115	\| REST API \| Simple screenshot/PDF tasks \| Simple \|
116
117	This skill covers Workers Bindings (the advanced method with full Puppeteer/Playwright APIs).
118
119	### Puppeteer vs Playwright
120
121	\| Feature \| Puppeteer \| Playwright \|
122	\|---------\|-----------\|------------\|
123	\| API Familiarity \| Most popular \| Growing adoption \|
124	\| Package \| `@cloudflare/puppeteer@1.0.4` \| `@cloudflare/playwright@1.0.0` \|
125	\| Session Management \| ✅ Advanced APIs \| ⚠️ Basic \|
126	\| Browser Support \| Chromium only \| Chromium only (Firefox/Safari not yet supported) \|
127	\| Best For \| Screenshots, PDFs, scrapin

People who liked this also viewed

6 picks

Type

cloudflare-browser-rendering

15stars7forks

View on GitHub

How to install cloudflare-browser-rendering?

jackspace/claudeskillz/cloudflare-browser-rendering

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-browser-rendering

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Browser Rendering - Complete Reference
2
3	Production-ready knowledge domain for building browser automation workflows with Cloudflare Browser Rendering.
4
5	Status: Production Ready ✅
6	Last Updated: 2025-10-22
7	Dependencies: cloudflare-worker-base (for Worker setup)
8	Latest Versions: @cloudflare/puppeteer@1.0.4, @cloudflare/playwright@1.0.0, wrangler@4.43.0
9
10	---
11
12	## Table of Contents
13
14	1. [Quick Start (5 minutes)](#quick-start-5-minutes)
15	2. [Browser Rendering Overview](#browser-rendering-overview)
16	3. [Puppeteer API Reference](#puppeteer-api-reference)
17	4. [Playwright API Reference](#playwright-api-reference)
18	5. [Session Management](#session-management)
19	6. [Common Patterns](#common-patterns)
20	7. [Pricing & Limits](#pricing--limits)
21	8. [Known Issues Prevention](#known-issues-prevention)
22	9. [Production Checklist](#production-checklist)
23
24	---
25
26	## Quick Start (5 minutes)
27
28	### 1. Add Browser Binding
29
30	wrangler.jsonc:
31	```jsonc
32	{
33	"name": "browser-worker",
34	"main": "src/index.ts",
35	"compatibility_date": "2023-03-14",
36	"compatibility_flags": ["nodejs_compat"],
37	"browser": {
38	"binding": "MYBROWSER"
39	}
40	}
41	```
42
43	Why nodejs_compat? Browser Rendering requires Node.js APIs and polyfills.
44
45	### 2. Install Puppeteer
46
47	```bash
48	npm install @cloudflare/puppeteer
49	```
50
51	### 3. Take Your First Screenshot
52
53	```typescript
54	import puppeteer from "@cloudflare/puppeteer";
55
56	interface Env {
57	MYBROWSER: Fetcher;
58	}
59
60	export default {
61	async fetch(request: Request, env: Env): Promise<Response> {
62	const { searchParams } = new URL(request.url);
63	const url = searchParams.get("url") \|\| "https://example.com";
64
65	// Launch browser
66	const browser = await puppeteer.launch(env.MYBROWSER);
67	const page = await browser.newPage();
68
69	// Navigate and capture
70	await page.goto(url);
71	const screenshot = await page.screenshot();
72
73	// Clean up
74	await browser.close();
75
76	return new Response(screenshot, {
77	headers: { "content-type": "image/png" }
78	});
79	}
80	};
81	```
82
83	### 4. Deploy
84
85	```bash
86	npx wrangler deploy
87	```
88
89	Test at: `https://your-worker.workers.dev/?url=https://example.com`
90
91	CRITICAL:
92	- Always pass `env.MYBROWSER` to `puppeteer.launch()` (not undefined)
93	- Always call `browser.close()` when done (or use `browser.disconnect()` for session reuse)
94	- Use `nodejs_compat` compatibility flag
95
96	---
97
98	## Browser Rendering Overview
99
100	### What is Browser Rendering?
101
102	Cloudflare Browser Rendering provides headless Chromium browsers running on Cloudflare's global network. Use familiar tools like Puppeteer and Playwright to automate browser tasks:
103
104	- Screenshots - Capture visual snapshots of web pages
105	- PDF Generation - Convert HTML/URLs to PDFs
106	- Web Scraping - Extract content from dynamic websites
107	- Testing - Automate frontend tests
108	- Crawling - Navigate multi-page workflows
109
110	### Two Integration Methods
111
112	\| Method \| Best For \| Complexity \|
113	\|--------\|----------\|-----------\|
114	\| Workers Bindings \| Complex automation, custom workflows, session management \| Advanced \|
115	\| REST API \| Simple screenshot/PDF tasks \| Simple \|
116
117	This skill covers Workers Bindings (the advanced method with full Puppeteer/Playwright APIs).
118
119	### Puppeteer vs Playwright
120
121	\| Feature \| Puppeteer \| Playwright \|
122	\|---------\|-----------\|------------\|
123	\| API Familiarity \| Most popular \| Growing adoption \|
124	\| Package \| `@cloudflare/puppeteer@1.0.4` \| `@cloudflare/playwright@1.0.0` \|
125	\| Session Management \| ✅ Advanced APIs \| ⚠️ Basic \|
126	\| Browser Support \| Chromium only \| Chromium only (Firefox/Safari not yet supported) \|
127	\| Best For \| Screenshots, PDFs, scrapin

People who liked this also viewed

6 picks

Type