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

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

Code Editor

Syntax Requirements

Must export default object with fetch handler:

  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

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

  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

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:

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