1# Cloudflare Workers Playground Skill Reference
2 
3## Overview
4 
5Cloudflare 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.
6 
7**URL:** [workers.cloudflare.com/playground](https://workers.cloudflare.com/playground)
8 
9## ⚠️ Playground Constraints
10 
11**Playground is NOT production-equivalent:**
12- ✅ Real Workers runtime, instant testing, shareable URLs
13- ❌ No TypeScript (JavaScript only)
14- ❌ No bindings (KV, D1, R2, Durable Objects)
15- ❌ No environment variables or secrets
16- ❌ ES modules only (no Service Worker format)
17- ⚠️ Safari broken (use Chrome/Firefox)
18 
19**For production:** Use `wrangler` CLI. Playground is for rapid prototyping.
20 
21## Quick Start
22 
23Minimal Worker:
24 
25```javascript
26export default {
27  async fetch(request, env, ctx) {
28    return new Response('Hello World');
29  }
30};
31```
32 
33JSON API:
34 
35```javascript
36export default {
37  async fetch(request, env, ctx) {
38    const data = { message: 'Hello', timestamp: Date.now() };
39    return Response.json(data);
40  }
41};
42```
43 
44Proxy with modification:
45 
46```javascript
47export default {
48  async fetch(request, env, ctx) {
49    const response = await fetch('https://example.com');
50    const modified = new Response(response.body, response);
51    modified.headers.set('X-Custom-Header', 'added-by-worker');
52    return modified;
53  }
54};
55```
56 
57Import from CDN:
58 
59```javascript
60import { Hono } from 'https://esm.sh/hono@3';
61 
62export default {
63  async fetch(request) {
64    const app = new Hono();
65    app.get('/', (c) => c.text('Hello Hono!'));
66    return app.fetch(request);
67  }
68};
69```
70 
71## Reading Order
72 
731. **[configuration.md](configuration.md)** - Start here: playground setup, constraints, deployment
742. **[api.md](api.md)** - Core APIs: Request, Response, ExecutionContext, fetch, Cache
753. **[patterns.md](patterns.md)** - Common use cases: routing, proxying, A/B testing, multi-module code
764. **[gotchas.md](gotchas.md)** - Troubleshooting: errors, browser issues, limits, best practices
77 
78## In This Reference
79 
80- **[configuration.md](configuration.md)** - Setup, deployment, configuration
81- **[api.md](api.md)** - API endpoints, methods, interfaces
82- **[patterns.md](patterns.md)** - Common patterns, use cases, examples
83- **[gotchas.md](gotchas.md)** - Troubleshooting, best practices, limitations
84 
85## Key Features
86 
87**No Setup Required:**
88- Open URL and start coding
89- No CLI, no account, no config files
90- Code executes in real Cloudflare Workers runtime
91 
92**Instant Preview:**
93- Live preview pane with browser tab or HTTP tester
94- Auto-reload on code changes
95- DevTools integration (right-click → Inspect)
96 
97**Share & Deploy:**
98- Copy Link generates permanent shareable URL
99- Deploy button publishes to production in ~30 seconds
100- Get `*.workers.dev` subdomain immediately
101 
102## Common Use Cases
103 
104- **API development:** Test endpoints before wrangler setup
105- **Learning Workers:** Experiment with APIs without local environment
106- **Prototyping:** Quick POCs for edge logic
107- **Sharing examples:** Generate shareable links for bug reports or demos
108- **Framework testing:** Import from CDN (Hono, itty-router, etc.)
109 
110## Limitations vs Production
111 
112| Feature | Playground | Production (wrangler) |
113|---------|------------|----------------------|
114| Language | JavaScript only | JS + TypeScript |
115| Bindings | None | KV, D1, R2, DO, AI, etc. |
116| Environment vars | None | Full support |
117| Module format | ES only | ES + Service Worker |
118| CPU time | 10ms (Free plan) | 10ms Free / 30s default, 5min max Paid |
119| Custom domains | No | Yes |
120| Analytics | No | Yes |
121 
122## See Also
123 
124- [Cloudflare Workers Docs](https://developers.cloudflare.com/workers/)
125- [Workers Examples](https://developers.cloudflare.com/workers/examples/)
126- [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/)
127- [Workers API Reference](https://developers.cloudflare.com/workers/runtime-apis/)
128