UI Lab

Live Code Playground

Edit HTML, CSS, and JavaScript with Monaco. Preview updates instantly and console output is captured in a sandboxed iframe.

Tip: click the heading in the preview to test interactivity.
Layout
Loading editor…
DEBUG CONSOLE
0 messages

Console output will appear here when your code runs.

Live preview

A zero-setup front-end playground

This live code playground lets you write HTML, CSS, and JavaScript and see the result render in real time. It is powered by the Monaco editor — the engine behind VS Code — so you get syntax highlighting, bracket matching, and familiar keyboard shortcuts right in the browser. There is nothing to install and nothing to configure; open the page and start building.

How it works

Type in any of the three editors and the preview updates instantly. Your JavaScript runs inside a sandboxed iframe, which keeps the rest of the page safe while still giving your code a real DOM to work with. Console output — console.log, warnings, and errors — is captured and displayed so you can debug without opening browser dev tools.

What it’s great for

Use it to prototype a UI idea, test a CSS layout or animation, try a JavaScript snippet, reproduce a bug in isolation, or teach and learn front-end concepts. Because it runs entirely client-side, it is a fast, private scratchpad — perfect for the quick “does this work?” moments that break your flow when you have to spin up a local project.

Frequently asked questions

What is the code playground?+
It is a live, in-browser editor for HTML, CSS, and JavaScript. You write code on one side and see the rendered result update instantly on the other, with console output captured in a sandboxed iframe. It is ideal for prototyping UI, testing a snippet, or learning front-end concepts without any local setup.
Do I need to install anything?+
No. The playground runs entirely in your browser using the Monaco editor — the same editor that powers VS Code. There is nothing to download, configure, or sign up for.
Is my code saved or shared?+
Your code stays in your browser session and runs in a sandboxed iframe for safety. Nothing is uploaded to a server, so you can experiment freely with private snippets.
What can I build with it?+
Anything that runs on the front end: layout experiments, CSS animations, small JavaScript demos, API-free component mock-ups, and quick reproductions of bugs. It is a fast scratchpad for ideas.