A dashboard editor that finally feels like a real IDE
Quick Edit is Cloudflare's in-dashboard development environment for Workers. It has always been the fastest route from idea to deployed code: you open the dashboard, write a worker, and hit deploy without ever leaving the browser. But for anyone used to a full local IDE, the experience has long felt constrained. The old editor, built on Monaco (the same editor that powers VS Code), was essentially a single-file text editor. It handled syntax highlighting fine but offered little in the way of IntelliSense, multi-module support, or debugging help.
That changes with a new Quick Edit, now powered by VS Code for Web. The upgrade brings a familiar editing environment into the dashboard, and with it, capabilities that previously required a local setup with Wrangler.
Multiple modules, no local setup required
Cloudflare Workers adopted ES Modules syntax in 2021, and it is now the recommended way to write workers. Modules let you define a worker by exporting a default object with event handlers, but the real benefit comes from being able to split code across files with imports. Until now, that organization option was only available to developers running Wrangler locally. The new dashboard editor changes that: you can create multiple modules in the browser and import them just as you would on your own machine.
One limitation remains: npm packages aren't importable from the dashboard editor yet. Cloudflare says that's actively being explored.
Preview that matches production
When you edit a worker in the dashboard, Cloudflare spins up a preview deployment from your in-progress code. That preview is meant to give you a fast feedback loop without touching production traffic. Historically, though, the dashboard preview environment didn't perfectly match the deployed Workers runtime, and differences in behavior could erode confidence in a preview.
The new Quick Edit runs the preview on the same system that powers wrangler dev. Your preview worker now executes on Cloudflare's global network — the exact same environment your deployed workers run on. What you see in preview is what you get in production.
Better errors and type checking
Debugging was another weak spot in the old dashboard editor. If your worker threw an error and you weren't wrapping code in try-catch, the preview would just show a blank page. The new editor wraps workers with error handling that produces readable error pages complete with stack traces and descriptions, making it far easier to figure out what went wrong.
TypeScript itself isn't yet supported in the dashboard editor — you still write JavaScript files. But the new editor does load the TypeScript environment for Workers and supports full JSDoc TypeScript syntax. Type errors get the familiar red squiggly underline, and Cloudflare APIs like HTMLRewriter autocomplete.
How the embedding works
Behind the scenes, Cloudflare embeds VS Code for Web in the dashboard as an iframe and talks to it over a MessageChannel. When the iframe loads, the dashboard sends the worker's contents to a VS Code extension, which seeds an in-memory filesystem. Edits made in VS Code flow back over the same channel and get uploaded as a previewed worker.
The communication layer relies on the browser's MessageChannel API. The dashboard creates a channel and keeps a reference to it with useRef(), since React would otherwise create a new instance on every render. The key step is handing one end of the port to the iframe:
// A reference to the iframe embedding VSCode for Web
const editor = document.getElementById("vscode")
// Wait for the iframe to load
editor.addEventListener('load', () => {
// Send over the MessagePort
editor.contentWindow.postMessage('PORT', '*', [
channel.port2
]);
});A detail worth noting: the port is transferred, not copied. Because the third argument to postMessage() is a sequence of Transferable objects, ownership of port2 moves to the iframe. Any attempt to use it afterward in the dashboard's context will throw.
On the iframe side, the extension listens for the incoming MessagePort and starts bi-directional communication with the dashboard. The initial worker content is then sent across the channel to seed the editor's filesystem.
Cloudflare has open sourced the pieces of this project, including the VS Code extension that loads data from the dashboard, the patches to VS Code, and the VS Code theme used in the editor.
What's next
This is a substantial overhaul of the dashboard editing experience, but Cloudflare acknowledges it isn't yet on par with local Wrangler development. Two items are on the roadmap: native TypeScript support in the editor and syncing to external Git providers like GitHub and GitLab. Feedback is being collected on the Cloudflare Discord.
