Cloudflare Workers Playground

A Cloudflare Worker is JavaScript code you write that handles your web site's HTTP traffic directly in Cloudflare's 120+ edge locations around the world, allowing you to locate code close to your end users in order to respond to them more quickly.

Try it yourself:

To your left is a Cloudflare Worker that is running on this site. You can edit it live and see the results here. For example, try entering the following code, which will turn the background of this page black:

addEventListener("fetch", event => {
  event.respondWith(fetchAndModify(event.request));
});

async function fetchAndModify(request) {
  console.log("got a request:", request);

  // Send the request on to the origin server.
  const response = await fetch(request);

  // Read response body.
  const text = await response.text();

  // Modify it.
  const modified = text.replace(
  "<body>",
  "<body style=\"background: #000; color: #fff\">");

  // Return modified response.
  return new Response(modified, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  });
}

Then, click " Update preview."

Once you've done that, try modifying your own site! Enter your web site's address above, then write some code that modifies it. You can share your script with other developers by sending them the address in your browser's address bar.

What are Cloudflare Workers?

Cloudflare Workers let you write JavaScript Service Workers that run directly in Cloudflare's 120+ edge locations around the world. With a Cloudflare Worker, you can modify your site's HTTP requests and responses, make parallel requests, and even reply directly from the edge. Cloudflare Workers are written against a similar API to the W3C Service Workers standard. However, while Service Workers run inside the end user's browser, Cloudflare Workers run on Cloudflare's servers. This means that Cloudflare Workers can implement trusted code (which the client cannot tamper with), and will work no matter what browser the user is running.

Here are some things you can do with Cloudflare Workers:

Improve performance:

Use custom logic to decide which request are cacheable at the edge, and canonicalize them to improve cache hit rate.
Expand HTML templates directly on the edge, fetching only dynamic content from your server.
Respond to stateless requests directly from the edge without contacting your origin server at all.
Split one request into multiple parallel requests to different servers, then combine the responses.

Improve security:

Implement custom security rules and filters.
Implement custom authentication and authorization mechanisms.

Improve reliability:

Implement custom load balancing and failover logic.
Respond dynamically when your origin server is unreachable.
Deploy fast fixes to your site in seconds, without having to update your own servers.

Nice job!

Welcome to the Cloudflare Workers Playground

Try it yourself:

What are Cloudflare Workers?

Improve performance:

Improve security:

Improve reliability: