dotfiles/.agents/skills/cloudflare-deploy/references/workers-playground/configuration.md

# Configuration

## Getting Started

Navigate to [workers.cloudflare.com/playground](https://workers.cloudflare.com/playground)

- **No account required** for testing
- **No CLI or local setup** needed
- Code executes in real Cloudflare Workers runtime
- Share code via URL (never expires)

## Playground Constraints

⚠️ **Important Limitations**

| Constraint | Playground | Production Workers |
|------------|------------|-------------------|
| **Module Format** | ES modules only | ES modules or Service Worker |
| **TypeScript** | Not supported (JS only) | Supported via build step |
| **Bindings** | Not available | KV, D1, R2, Durable Objects, etc. |
| **wrangler.toml** | Not used | Required for config |
| **Environment Variables** | Not available | Full support |
| **Secrets** | Not available | Full support |
| **Custom Domains** | Not available | Full support |

**Playground is for rapid prototyping only.** For production apps, use `wrangler` CLI.

## Code Editor

### Syntax Requirements

Must export default object with `fetch` handler:

```javascript
export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World');
  }
};
```

**Key Points:**
- Must use ES modules (`export default`)
- `fetch` method receives `(request, env, ctx)`
- Must return `Response` object
- TypeScript not supported (use plain JavaScript)

### Multi-Module Code

Import from external URLs or inline modules:

```javascript
// Import from CDN
import { Hono } from 'https://esm.sh/hono@3';

// Or paste library code and import relatively
// (See patterns.md for multi-module examples)

export default {
  async fetch(request) {
    const app = new Hono();
    app.get('/', (c) => c.text('Hello'));
    return app.fetch(request);
  }
};
```

## Preview Panel

### Browser Tab

Default interactive preview with address bar:
- Enter custom URL paths
- Automatic reload on code changes
- DevTools available (right-click → Inspect)

### HTTP Test Panel

Switch to **HTTP** tab for raw HTTP testing:
- Change HTTP method (GET, POST, PUT, DELETE, PATCH, etc.)
- Add/edit request headers
- Modify request body (JSON, form data, text)
- View response headers and body
- Test different content types

Example HTTP test:
```
Method: POST
URL: /api/users
Headers:
  Content-Type: application/json
  Authorization: Bearer token123
Body:
{
  "name": "Alice",
  "email": "alice@example.com"
}
```

## Sharing Code

**Copy Link** button generates shareable URL:
- Code embedded in URL fragment
- Links never expire
- No account required
- Can be bookmarked for later

Example: `https://workers.cloudflare.com/playground#abc123...`

## Deploying from Playground

Click **Deploy** button to move code to production:

1. **Log in** to Cloudflare account (creates free account if needed)
2. **Review** Worker name and code
3. **Deploy** to global network (takes ~30 seconds)
4. **Get URL**: Deployed to `<name>.workers.dev` subdomain
5. **Manage** from dashboard: add bindings, custom domains, analytics

**After deploy:**
- Code runs on Cloudflare's global network (300+ cities)
- Can add KV, D1, R2, Durable Objects bindings
- Configure custom domains and routes
- View analytics and logs
- Set environment variables and secrets

**Note:** Deployed Workers are production-ready but start on Free plan (100k requests/day).

## Browser Compatibility

| Browser | Status | Notes |
|---------|--------|-------|
| Chrome/Edge | ✅ Full support | Recommended |
| Firefox | ✅ Full support | Works well |
| Safari | ⚠️ Broken | Preview fails with "PreviewRequestFailed" |

**Safari users:** Use Chrome, Firefox, or Edge for Workers Playground.

## DevTools Integration

1. **Open preview** in browser tab
2. **Right-click** → Inspect Element
3. **Console tab** shows Worker logs:
   - `console.log()` output
   - Uncaught errors
   - Network requests (subrequests)

**Note:** DevTools show client-side console, not Worker execution logs. For production logging, use Logpush or Tail Workers.

## Limits in Playground

Same as production Free plan:

| Resource | Limit | Notes |
|----------|-------|-------|
| CPU time | 10ms | Per request |
| Memory | 128 MB | Per request |
| Script size | 1 MB | After compression |
| Subrequests | 50 | Outbound fetch calls |
| Request size | 100 MB | Incoming |
| Response size | Unlimited | Outgoing (streamed) |

**Exceeding CPU time** throws error immediately. Optimize hot paths or upgrade to Paid plan (50ms CPU).