Setting the file. One moment.
Chapter 04 · Cloudflare Deploy
Subchapter 4.276
references/workers-playground/configuration.mdMarkdown4 KBView on GitHub
Navigate to workers.cloudflare.com/playground
⚠️ 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.
Must export default object with fetch handler:
export default {
async fetch(request, env, ctx) {
return new Response('Hello World');
}
};Key Points:
export default)fetch method receives (request, env, ctx)Response objectImport 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);
}
};Default interactive preview with address bar:
Switch to HTTP tab for raw HTTP testing:
Example HTTP test:
Method: POST
URL: /api/users
Headers:
Content-Type: application/json
Authorization: Bearer token123
Body:
{
"name": "Alice",
"email": "alice@example.com"
}Copy Link button generates shareable URL:
Example: https://workers.cloudflare.com/playground#abc123...
Click Deploy button to move code to production:
<name>.workers.dev subdomainAfter deploy:
Note: Deployed Workers are production-ready but start on Free plan (100k requests/day).
| 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.
console.log() outputNote: DevTools show client-side console, not Worker execution logs. For production logging, use Logpush or Tail Workers.
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).