DEV Community

Felippe Regazio
Felippe Regazio

Posted on

A quick and cool CSS real-time editor with HTML & CSS only

For god sake, don't use this snippet on production. Don't use it at all, maybe (?). But anyway, thats pretty cool!

You can style style tags 😢 You can add contentEditable to style tags also. So, you can build your native & real-time CSS editor with that!

If you paste this code/element at the end of your body tag, you will have your quick native CSS Editor.

<style 
    contenteditable="true"
    style="z-index:1;
    position:fixed;
    top:0;
    right:0;
    width:300px;
    background:#fff;
    min-height:100vh;
    display:block !important;
    overflow: auto;
    padding:14px;
    border-left: solid 1px #cccccc">

    body {min-height: 100vh;}

</style>
Enter fullscreen mode Exit fullscreen mode

On thing i personally like on this cool snippet is the meta relation between the style and the body, once the code on the style tag gives the body the right size to show the style tag itself, look at the body {min-height: 100vh;}.

Here's a pen if you prefer:

Highlight plugins are welcome ;P

Top comments (7)

Collapse
 
kip13 profile image
kip

You can put the style out of the body and the styles dont affect the same style.

<html>
<head></head>
<style contenteditable="true" style="display:block;
    z-index:1;
    position:fixed;
    top:0;
    right:0;
    width:300px;
    background:#fff;
    min-height:100vh;
    display:block !important;
    z-index:100000;
    overflow: auto;
    padding:14px;
    border-left: solid 1px #cccccc">

    body {min-height: 100vh; color:green;}

</style>

<body>
  You can edit the CSS code on the right corner
</body></html>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
felipperegazio profile image
Felippe Regazio • Edited

Thats true. I updated the pen with your suggestion. Thanks Kip!

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

z-index:9e9; I win πŸ˜†

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

But seriously this is clever and don't use in production!

Collapse
 
felipperegazio profile image
Felippe Regazio

hahaha ;P

Collapse
 
bantya profile image
Rahul Thakare

contenteditable="true" is the key. Clever!

Collapse
 
raghavmisra profile image
Raghav Misra

For development purposes, this is pretty neat! I tried something similar before, by binding an input value to a style tag, but this is waaaaay simpler! Cool trick.