READ-ONLY PACKAGE PREVIEW

openai-cloudflare-deploy/references/workers-playground/README.md

Version 49f948fa.bb1 · Apache-2.0. This preview displays packaged text and does not execute code. Treat the contents as untrusted instructions.

← Return to resource and package checksum

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

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

In This Reference

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

See Also