Step one
Bring real files
Drag in HTML, CSS, JS, JSX, or TSX — multiple files per artifact, folder structure kept intact.
In the workbenchArtifacts is the studio's workbench for HTML, CSS, JS, and JSX prototypes. Drop in files, watch them run inside a sandboxed iframe, and share the exact working version with a single link.
Greetings from the sandbox
live
The workbench
Three moves turn a folder of loose files into a working, shareable prototype — no deploy step, no build pipeline.
Step one
Drag in HTML, CSS, JS, JSX, or TSX — multiple files per artifact, folder structure kept intact.
In the workbenchStep two
The iframe refreshes as you type, with Babel transforming JSX at runtime. What you see is what ships.
In the workbenchStep three
Artifacts stay private until you flip sharing on. Copy a clean URL; unshare and caches invalidate instantly.
In the workbenchUnder the hood
Drop your files, or paste raw code. Set an entry file when needed; everything else is referenced relatively.
The server bundles your files into one HTML document piped into an iframe via srcDoc. The sandbox attribute blocks it from reaching the parent app.
Toggle the share switch, copy the public URL, send it to anyone. They get the running version — no sign-in required.
Peace of mind
Every artifact renders inside a sandboxed iframe with explicit permissions. It cannot reach the parent page, your cookies, or your storage. Share pages cache for one hour and invalidate the instant you edit or unshare.
<iframe srcDoc={document} sandbox="allow-scripts allow-forms allow-popups allow-modals" referrerPolicy="no-referrer" loading="lazy" />
After hours
Create an artifact, verify it inside the sandbox, share the exact running version — all before the sun goes down.