DEV Community

Felippe Regazio
Felippe Regazio

Posted on

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

#webdev #css #frontend #forfun

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.

Read next

yanaiara profile image

Angular vs. ReactJS: Which One Should You Pick for Your Next Project?

Yanaiara Oliveira -

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

vamstroy profile image

Why JavaScript Never Sleeps: An Easy Guide to the Event Loop

VAIBHAV RAI -

mywillandprobate profile image

Navigating inheritance disputes: Why you need estate planning solicitors in London

My Will And Probate -