Dynamic Workers Playground

Last updated Oct 18, 2026 Try the Dynamic Workers playground ↗︎ to write or import code from GitHub, bundle it at runtime, execute it in a Dynamic Worker, and view real-time logs.

Deploy to Workers

Dynamic Workers Playground UI

What this demo shows

  • Runtime bundling — Uses @cloudflare/worker-bundler ↗︎ to resolve npm dependencies and compile TypeScript inside a Worker
  • Dynamic execution — Loads bundled code into an isolated Dynamic Worker
  • Caching — Reuses previously bundled Workers when the source has not changed
  • Real-time output — Streams the response body, console logs, execution timing, and bundle metadata back to the client

Bundling code at runtime

The playground uses @cloudflare/worker-bundler ↗︎ to compile TypeScript, resolve npm dependencies, and produce modules the Worker Loader can execute.

Pass source files and a package.json to createWorker(), which resolves dependencies and returns bundled modules ready to load as a Dynamic Worker:

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
    files: {
        "src/index.ts": userCode,
        "package.json": JSON.stringify({
            dependencies: { hono: "^4.0.0" },
        }),
    },
    bundle: true,
    minify: false,
});

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
    files: {
        "src/index.ts": userCode,
        "package.json": JSON.stringify({
            dependencies: { hono: "^4.0.0" },
        }),
    },
    bundle: true,
    minify: false,
});

Caching Dynamic Workers

env.LOADER.load() creates a new Dynamic Worker on every call. To avoid re-bundling unchanged code, use env.LOADER.get(id, callback) instead. The runtime returns an existing Worker on a cache hit, or calls your callback to build one on a miss:

const worker = env.LOADER.get(workerId, async () => {
    // This callback only runs on cache miss
    const { mainModule, modules } = await createWorker({ files });

    return {
        mainModule,
        modules,
        compatibilityDate: "2026-05-01",
        tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
    };
});

const response = await worker.getEntrypoint().fetch(request);

const worker = env.LOADER.get(workerId, async () => {
    // This callback only runs on cache miss
    const { mainModule, modules } = await createWorker({ files });

    return {
        mainModule,
        modules,
        compatibilityDate: "2026-05-01",
        tails: [
            contextExports.DynamicWorkerTail({ props: { workerId } }),
        ],
    };
});

const response = await worker.getEntrypoint().fetch(request);

In the playground, you can see this in action — run the same Dynamic Worker twice and the second request shows a cached result with 0ms cold start, since the build and load phases are skipped entirely.

Observability with Tail Workers

When you run code in the playground, console output from the Dynamic Worker streams back to the browser in real time. Under the hood, this works through a Tail Worker pipeline:

  1. A Tail Worker ( DynamicWorkerTail) captures console.log output from the Dynamic Worker.
  2. Logs are forwarded to a LogSession Durable Object.
  3. The Durable Object streams them to the client over WebSocket.

To wire this up, include the Tail Worker in the tails array when creating the Dynamic Worker:

const worker = env.LOADER.get(workerId, async () => ({
    mainModule,
    modules,
    compatibilityDate: "2026-05-01",
    tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

const worker = env.LOADER.get(workerId, async () => ({
    mainModule,
    modules,
    compatibilityDate: "2026-05-01",
    tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

For more information on how to capture and stream logs from Dynamic Workers, refer to Observability with Dynamic Workers.

Running locally

Clone the repo and start the dev server:

Miniflare is not a hardened sandbox

Do not use Miniflare to run untrusted or potentially malicious Worker code directly on your machine. Run the entire development process inside an appropriate secure sandbox, such as a virtual machine.

Miniflare starts a local workerd ↗︎ process. This warning applies to default local execution with wrangler dev, vite dev, vite preview, direct Miniflare use, and Miniflare-based testing tools. Setting remote: true on a binding changes which resource your code accesses, but your Worker code still executes locally. By contrast, legacy wrangler dev --remote executes your Worker code on Cloudflare.

Miniflare is not a security boundary for untrusted code. Although workerd attempts to restrict Worker code to configured resources, an implementation bug could allow code to escape those restrictions. The hosted Workers platform applies additional layers of defense in depth that Miniflare does not provide locally.

npm install
npm run dev

Was this helpful?

YesNo

On this page

Dynamic Workers Playground - 图3Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/dynamic-workers/examples/dynamic-workers-playground/#page","headline":"Dynamic Workers Playground","description":"Bundle, execute, and observe Dynamic Workers with real-time logs and timing.","url":"https://developers.cloudflare.com/dynamic-workers/examples/dynamic-workers-playground/","inLanguage":"en","image":"https://developers.cloudflare.com/dynamic-workers/examples/dynamic-workers-playground/og.png?v=b159ff587b640219","dateModified":"2026-10-18","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"},"keywords":["JavaScript","TypeScript","Logging"]}

description: A starter template for deploying a Worker that loads and runs Dynamic Workers. title: Dynamic Workers Starter image: https://developers.cloudflare.com/dynamic-workers/examples/dynamic-workers-starter/og.png?v=9bfa1c960456467d

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/dynamic-workers/llms.txt
Use this file to discover all available pages before exploring further.