1# Configuration
2 
3## Getting Started
4 
5Navigate to [workers.cloudflare.com/playground](https://workers.cloudflare.com/playground)
6 
7- **No account required** for testing
8- **No CLI or local setup** needed
9- Code executes in real Cloudflare Workers runtime
10- Share code via URL (never expires)
11 
12## Playground Constraints
13 
14⚠️ **Important Limitations**
15 
16| Constraint | Playground | Production Workers |
17|------------|------------|-------------------|
18| **Module Format** | ES modules only | ES modules or Service Worker |
19| **TypeScript** | Not supported (JS only) | Supported via build step |
20| **Bindings** | Not available | KV, D1, R2, Durable Objects, etc. |
21| **wrangler.toml** | Not used | Required for config |
22| **Environment Variables** | Not available | Full support |
23| **Secrets** | Not available | Full support |
24| **Custom Domains** | Not available | Full support |
25 
26**Playground is for rapid prototyping only.** For production apps, use `wrangler` CLI.
27 
28## Code Editor
29 
30### Syntax Requirements
31 
32Must export default object with `fetch` handler:
33 
34```javascript
35export default {
36  async fetch(request, env, ctx) {
37    return new Response('Hello World');
38  }
39};
40```
41 
42**Key Points:**
43- Must use ES modules (`export default`)
44- `fetch` method receives `(request, env, ctx)`
45- Must return `Response` object
46- TypeScript not supported (use plain JavaScript)
47 
48### Multi-Module Code
49 
50Import from external URLs or inline modules:
51 
52```javascript
53// Import from CDN
54import { Hono } from 'https://esm.sh/hono@3';
55 
56// Or paste library code and import relatively
57// (See patterns.md for multi-module examples)
58 
59export default {
60  async fetch(request) {
61    const app = new Hono();
62    app.get('/', (c) => c.text('Hello'));
63    return app.fetch(request);
64  }
65};
66```
67 
68## Preview Panel
69 
70### Browser Tab
71 
72Default interactive preview with address bar:
73- Enter custom URL paths
74- Automatic reload on code changes
75- DevTools available (right-click → Inspect)
76 
77### HTTP Test Panel
78 
79Switch to **HTTP** tab for raw HTTP testing:
80- Change HTTP method (GET, POST, PUT, DELETE, PATCH, etc.)
81- Add/edit request headers
82- Modify request body (JSON, form data, text)
83- View response headers and body
84- Test different content types
85 
86Example HTTP test:
87```
88Method: POST
89URL: /api/users
90Headers:
91  Content-Type: application/json
92  Authorization: Bearer token123
93Body:
94{
95  "name": "Alice",
96  "email": "[email protected]"
97}
98```
99 
100## Sharing Code
101 
102**Copy Link** button generates shareable URL:
103- Code embedded in URL fragment
104- Links never expire
105- No account required
106- Can be bookmarked for later
107 
108Example: `https://workers.cloudflare.com/playground#abc123...`
109 
110## Deploying from Playground
111 
112Click **Deploy** button to move code to production:
113 
1141. **Log in** to Cloudflare account (creates free account if needed)
1152. **Review** Worker name and code
1163. **Deploy** to global network (takes ~30 seconds)
1174. **Get URL**: Deployed to `<name>.workers.dev` subdomain
1185. **Manage** from dashboard: add bindings, custom domains, analytics
119 
120**After deploy:**
121- Code runs on Cloudflare's global network (300+ cities)
122- Can add KV, D1, R2, Durable Objects bindings
123- Configure custom domains and routes
124- View analytics and logs
125- Set environment variables and secrets
126 
127**Note:** Deployed Workers are production-ready but start on Free plan (100k requests/day).
128 
129## Browser Compatibility
130 
131| Browser | Status | Notes |
132|---------|--------|-------|
133| Chrome/Edge | ✅ Full support | Recommended |
134| Firefox | ✅ Full support | Works well |
135| Safari | ⚠️ Broken | Preview fails with "PreviewRequestFailed" |
136 
137**Safari users:** Use Chrome, Firefox, or Edge for Workers Playground.
138 
139## DevTools Integration
140 
1411. **Open preview** in browser tab
1422. **Right-click** → Inspect Element
1433. **Console tab** shows Worker logs:
144   - `console.log()` output
145   - Uncaught errors
146   - Network requests (subrequests)
147 
148**Note:** DevTools show client-side console, not Worker execution logs. For production logging, use Logpush or Tail Workers.
149 
150## Limits in Playground
151 
152Same as production Free plan:
153 
154| Resource | Limit | Notes |
155|----------|-------|-------|
156| CPU time | 10ms | Per request |
157| Memory | 128 MB | Per request |
158| Script size | 1 MB | After compression |
159| Subrequests | 50 | Outbound fetch calls |
160| Request size | 100 MB | Incoming |
161| Response size | Unlimited | Outgoing (streamed) |
162 
163**Exceeding CPU time** throws error immediately. Optimize hot paths or upgrade to Paid plan (30s default, 5min max CPU).
164