HTML & CSS Playground

Write HTML, CSS and JavaScript and see it render, with a console for what it logs.

Processed locally — nothing is uploaded

Runs in a sandboxed frame with no access to this page

Preview

Press Run to render the page.
Nothing runs until you do, and nothing leaves your browser when it does.

Console

console.log from the preview appears here.

About HTML & CSS Playground

The preview runs in a frame with no origin of its own, so the code inside it cannot read this page, your saved work or anything else in the browser — and code that arrives in a link is shown rather than run until you press the button.

Three panels and a preview. Markup goes in the first, styling in the second, behaviour in the third, and pressing Run assembles them into one document and renders it beside you. Whatever the script writes with the logging functions appears in the panel underneath, along with any error it throws and the line it came from, which is most of what a browser's developer tools give you for a snippet this size without leaving the page you are reading.

The preview is deliberately not part of this page. It renders inside a frame marked as sandboxed and given no origin of its own, which means the code in it cannot read this document, cannot reach anything saved on this site, and finds the storage interfaces throwing when it calls them. That is the same containment a browser applies to an advertisement, applied here to code you may have been sent by someone else, and it holds regardless of what that code tries.

One rule follows from the sharing feature and is worth stating plainly: code that arrives in a link is never executed on arrival. A page that rendered a shared payload automatically would be a way to put someone else's interface, complete with a password box, at this site's address — so a link fills the panels, lists anything in the code worth a second look, and waits for a click. The same restraint applies to a restored piece of saved work.

What will not work inside the preview is anything loaded from another address. The frame inherits this site's content policy, which permits no third-party scripts and no third-party stylesheets, so a snippet that pulls in a framework from a content network will render without it. That is a real limit rather than an oversight: the alternative is a page that can be made to load arbitrary code from anywhere, which is exactly what the policy exists to prevent. Paste the library's source into the script panel, or use the snippet as a test of your own code rather than somebody's framework.

The export button writes a standalone file with the three panels assembled and the console bridge removed, which opens in any browser and can be committed, mailed or dropped into a ticket. It is also the honest way to hand a reproduction to somebody: a file they can read before opening beats a link that renders on arrival, which is the same reason this page will not render one for you.

Learn how this works

A Practical Guide to Everyday Developer Encoding & FormattingHow and when to use Base64, JSON formatting, hashing, JWTs, regex and cron — with free in-browser tools for each task.11 min read

Frequently asked questions

Can the code in the preview reach the rest of this site?

No. The frame is sandboxed without the permission that would give it an origin, so it has no access to this page's document, no cookies, and no reachable storage — calls to local storage throw inside it rather than returning anything. It can draw, compute and log, and it can make its own network requests to other places, which is why the page lists that when the code does it.

Why did my shared snippet not start on its own?

Because it came from a link, and a link is something anyone can send. Rendering it automatically would let a person put a convincing-looking page at this site's address, which is the shape of a phishing attempt. The panels fill, anything notable in the code is listed, and the Run button is yours to press.

Why is my library not loading?

The preview inherits this site's content security policy, which does not permit scripts or stylesheets from other addresses. A snippet that references a framework on a content network gets nothing. Paste the library's code into the script panel if it is small, or download the standalone file and open it outside this site where your own policy applies.

Is my code stored anywhere?

Only if you ask. Save work keeps it in this browser's own database on this device; Copy link puts it in the part of the URL that is never sent to a server. Neither reaches us, and both are entirely under your control. Otherwise it lives in the page for as long as the tab is open.

Is anything uploaded?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→Press Run rather than expecting live updates: an animation loop or a listener from the previous run would otherwise pile up on top of the new one every time you typed.
→Use the console panel as your first stop when nothing renders. A syntax error in the script stops the whole file, and the message names the line.
→Start from a template when you want to test one thing; deleting what you do not need is quicker than assembling a page around your snippet.
→Export the standalone file for a bug report. The recipient can read it before running it, which is not true of a link.
→For layout questions specifically, the flexbox and grid playgrounds give you controls instead of a text panel, which is faster than typing property names.

Common Use Cases

•Checking what a fragment of markup actually renders as before putting it in a template.
•Reproducing a styling bug in isolation, away from the rest of an application's stylesheet.
•Trying an idea on a machine where you cannot install anything and would rather not sign up for a service.
•Teaching: showing a small example, changing one line, and running it again in front of someone.
•Testing a small piece of script against the browser's own interfaces without a build step.

How It Compares

The established playgrounds are excellent and they are accounts, saved collections and other people's code on their servers; several also inject their own scripts into the preview. A local editor with a file open in a browser gives you everything except the console beside the page and the link you can hand someone. What is different here is the shape of the promise: no sign-up, nothing stored anywhere by default, and a shared link that is shown to you before it is allowed to run.