While working on Lottie Creator, I took a side quest into generative plugins. I needed a browser-based sandbox where generated HTML, CSS, and JavaScript could be bundled and previewed with a live-reloading feedback loop, without a local project or server. That led me to explore Rolldown’s WASM build and make this playground.
Live Playground
Open the live playground to edit the starter app and see its bundled output alongside the rendered preview.
Usage
The starter workspace contains index.html, a React entry point, a component, and CSS. Select a file tab, make an edit, and the preview updates after a short pause. You can also add or remove files from the input panel.
Bare npm imports are fetched from esm.sh during the build, so package experiments do not need a local node_modules folder. The HTTP ESM plugin was inspired by Rspack’s HTTP import support. For example, replace the starter component with:
import React from "react";
import confetti from "canvas-confetti";
export default function App() {
return <button onClick={() => confetti()}>Launch confetti</button>;
}What Runs in the Browser
The editor, Rolldown’s WebAssembly build, the temporary project filesystem, and the preview all run in the browser. The app bundles HTML, JSX or TSX, and CSS locally; package source is requested from the ESM CDN when an import needs it. Generated files are available in output tabs as well as in the preview.
Browser Requirement
Rolldown’s WASM runtime uses SharedArrayBuffer, so the playground must run in a cross-origin-isolated context. The hosted demo is configured for this. A current desktop browser is the most reliable way to use it; strict enterprise browser policies or extensions that interfere with cross-origin isolation can prevent the playground from starting.
Scope
This is an experiment for small generated frontend projects, not an execution sandbox for untrusted code. The preview is same-origin and has no build timeout or resource budget. The public demo and repository are linked above.