DEV Community

loading...

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

Felippe Regazio
web developer - js, [s]css, node, php, python - intp, lifelong learner, father, skateboarder. a strange carbon-based lifeform.
・1 min read

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>

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

Discussion (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>
Collapse
felipperegazio profile image
Felippe Regazio Author • 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 Author

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.