Skip to content
Workers
Visit Workers on GitHub
Set theme to dark (⇧+D)

Playground

The quickest way to experiment with Cloudflare Workers is in the Playground. It doesn’t require any setup. It’s just a simple, instant way to preview and test a Workers script directly in the browser against any site.

Launch playground

Hello world

When you arrive in the playground, you’ll see this default code:

addEventListener("fetch", event => {  event.respondWith(handleRequest(event.request))})
async function handleRequest(request) {  return new Response("Hello world")}

It’s essentially the simplest Worker script you can write.

Essentially what’s going on here is that when the Worker receives a request, handleRequest is called, and it responds with a text response of "Hello world".

Check out the reference for addEventListener and FetchEvent to learn more.


Beyond hello world

To get familiar with Workers, we recommend playing around in the Playground, borrowing bits from Examples section of the documentation. This will give you a taste of what Workers can do. It’s pretty amazing.


Using the playground

When you have code you are ready to test, click the button to preview at the bottom of the script panel.

Now you should be able to see a preview on the right side of that exact code running just as it would in a browser. Enter your website’s address in the right section to preview the Workers script running on that site.

You can modify the script and click the preview button to view the effect on the request.

To test a raw HTTP request — not in an HTML previewer, for example to test a POST request — go to the Test tab in the previewer. To run the HTTP preview, we will need to click update preview and run test.


Devtools

For debugging Workers inside the playground, use out the developer tools at the bottom of the preview panel. The developer tools for Workers previewer works similar to the developer tools in Chrome or Firefox.

Network tab

The Network tab shows the outgoing requests from your Workers script—in other words, any calls to fetch inside your script.

Console Logs

The console displays the output of any calls to console.log that were called for the current preview run as well as any other preview runs in that session.

Sources

The sources that make up your Workers script. Note that access KV, text, and secret bindings are only accessible when authenticated with an account. This means you must be logged in to the dashboard, or use wrangler preview with your account credentials.