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

williamsdev profile image

Horóscopo com IA: Uma Experiência com Next.js e Gemini

Frank William -

thisweekinjavascript profile image

JavaScript vs. Deno, Vite 6, Astro 5, and more

James -

nasehbadalov profile image

Optimizing Performance in CSS Animations: What to Avoid and How to Improve It

Naseh -

xmanhugo profile image

How to understand the ins and outs of how DNS really works.

xmanhugo -