CSS Live Editor

How to use the css live editor

1. Edit the CSS, and the markup too if a selector needs it.
2. Watch the result update as you type.
3. Download the combined file to keep it.

About this tool

The markup stays put and the styles are yours to change, updating live as you type — which is the right arrangement for learning what a property does or working out why a rule is not applying. Both panes are editable, so the markup can change too when a selector needs different structure to work against.

The useful part is that this is the browser's own rendering with nothing between you and it. A property that behaves unexpectedly here behaves unexpectedly in a real page, and the cascade, specificity and inheritance all work exactly as they do anywhere else — which is what makes it worth testing a rule here rather than reasoning about it.

The result runs in a sandboxed frame with `allow-scripts` and deliberately without `allow-same-origin`. Those two together let the frame reach back into the page that hosts it, its storage and its cookies — granting both is the standard way a sandbox gets quietly undone, and it is a common mistake in tools of this kind. Without same-origin the frame has an opaque origin: your code runs, and can see nothing of the page around it.

Nothing is stored. The editor's contents are gone when the page is closed, so download the file if the result is worth keeping.

Common uses

• Working out why a selector is not matching.
• Learning what an unfamiliar property does.
• Trying a layout idea before writing it into a stylesheet.

Frequently asked questions

Can I edit the markup as well?

Yes. Both panes are editable, since a selector often needs different structure to demonstrate anything.

Does this render exactly like a real page?

Yes — it is the browser's own rendering inside a frame, so the cascade, specificity and inheritance all behave as they would anywhere else.

Is anything saved?

No. Closing the page discards the editor's contents; the download button saves a copy locally.