CssLiveUpdate updates the page’s CSS styles with the textual content of the HTML element(s) it’s watching. This makes it very easy to create a CSS demo page where any CSS typed into a form field is added in the head of the page via a style tag. It is meant to be used for CSS demos, classes, conferences, etc.


Modify the CSS rules in one of the boxes on the left to dynamically see the effect on the right. For example, change the color: grey instruction to alter the color of the text in the #demo div.

A contenteditable-enabled element:

#demo {
    background-color: #353;

A textarea form element:

CSS syntax coloring in the contenteditable-enabled element is provided by the awesome highlight.js library.


To download it and get further instructions on how to use it, please go to its GitHub repository.

Leave a Reply

Your email address will not be published. Required fields are marked *