Home
March 2026

Update CSS Live using contenteditable (No JavaScript Required)

I was reading the HTML Living Standard for contenteditable to figure some stuff out for bitty1. Found a fun little tidbit: You can edit CSS live on a page without JavaScript.

Check this out:

HTML

<div class="example">the quick brown fox</div>

<style class="style-editor" contenteditable="plaintext-only">/* change the color to green */

.example {
  color: crimson;
}
</style>

Output

the quick brown fox

The contenteditable attribute does most of the work. The only other thing you need is to make the contents of the style tag visible by applying a display: block to it with something like:

CSS

.style-editor { 
  border: var(--default-border);
  display: block; 
  margin-block: 1rem;
  padding: 0.7rem;
  white-space: pre;
}

First thing that comes to mind to do with it is to set up a process on the backend that you can submit it to. It would update your actual stylesheet with it. Basically, live, on-page editing with immediate deployment.

A nice little reduction in friction.

-a

end of line

Endnotes

Editing your global styles would be nice. Even better would be creating a supplemental stylesheet for each page. You could apply whatever tweaks you want directly on the page then just have them go live.

(Of course, it wouldn't have to be an external stylesheet. You could just have your CMS embed the custom styles directly on the page.)

Probably less practical, but you could write a browser extension that opens any pages CSS in a little window to change things live that way too. What would be more interesting is to see if you can select/click on something and get its styles in an editable box on the page.

It would save you from having to open the console to kill the thing where sites disable the ability to paste a password.

You might be able to add syntax highlighting too. I'm not set up to test that at the moment.

Footnotes