Cloudflare Workers Playground Skill Reference

Overview

Cloudflare Workers Playground is a browser-based sandbox for instantly experimenting with, testing, and deploying Cloudflare Workers without authentication or setup. This skill provides patterns, APIs, and best practices specifically for Workers Playground development.

URL: workers.cloudflare.com/playground

⚠️ Playground Constraints

Playground is NOT production-equivalent:

✅ Real Workers runtime, instant testing, shareable URLs
❌ No TypeScript (JavaScript only)
❌ No bindings (KV, D1, R2, Durable Objects)
❌ No environment variables or secrets
❌ ES modules only (no Service Worker format)
⚠️ Safari broken (use Chrome/Firefox)

For production: Use wrangler CLI. Playground is for rapid prototyping.

Quick Start

Minimal Worker:

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

JSON API:

export default {
  async fetch(request, env, ctx) {
    const data = { message: 'Hello', timestamp: Date.now() };
    return Response.json(data);
  }
};

Proxy with modification:

export default {
  async fetch(request, env, ctx) {
    const response = await fetch('https://example.com');
    const modified = new Response(response.body, response);
    modified.headers.set('X-Custom-Header', 'added-by-worker');
    return modified;
  }
};

Import from CDN:

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

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

Reading Order

configuration.md - Start here: playground setup, constraints, deployment
api.md - Core APIs: Request, Response, ExecutionContext, fetch, Cache
patterns.md - Common use cases: routing, proxying, A/B testing, multi-module code
gotchas.md - Troubleshooting: errors, browser issues, limits, best practices

In This Reference

configuration.md - Setup, deployment, configuration
api.md - API endpoints, methods, interfaces
patterns.md - Common patterns, use cases, examples
gotchas.md - Troubleshooting, best practices, limitations

Key Features

No Setup Required:

Open URL and start coding
No CLI, no account, no config files
Code executes in real Cloudflare Workers runtime

Instant Preview:

Live preview pane with browser tab or HTTP tester
Auto-reload on code changes
DevTools integration (right-click → Inspect)

Share & Deploy:

Copy Link generates permanent shareable URL
Deploy button publishes to production in ~30 seconds
Get *.workers.dev subdomain immediately

Common Use Cases

API development: Test endpoints before wrangler setup
Learning Workers: Experiment with APIs without local environment
Prototyping: Quick POCs for edge logic
Sharing examples: Generate shareable links for bug reports or demos
Framework testing: Import from CDN (Hono, itty-router, etc.)

Limitations vs Production

Feature	Playground	Production (wrangler)
Language	JavaScript only	JS + TypeScript
Bindings	None	KV, D1, R2, DO, AI, etc.
Environment vars	None	Full support
Module format	ES only	ES + Service Worker
CPU time	10ms (Free plan)	10ms Free / 50ms Paid
Custom domains	No	Yes
Analytics	No	Yes

3.9 KiB Raw Blame History