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

Configuration

Getting Started

Navigate to 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:

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:

// 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).