A quick and cool CSS real-time editor with HTML & CSS only
#webdev#css#frontend#forfun
Felippe Regazio

Felippe Regazio @felipperegazio

About: software engineer, frontend specialist, curious generalist, platform dx, open sourcerer, father. a strange carbon-based lifeform

Location:
Brazil
Joined:
Feb 27, 2018

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

Publish Date: Nov 19 '19
54 7

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

Comments 7 total

  • kip
    kipNov 19, 2019

    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
    • Felippe Regazio
      Felippe RegazioNov 19, 2019

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

  • Adam Crockett 🌀
    Adam Crockett 🌀Nov 19, 2019

    z-index:9e9; I win 😆

  • Rahul Thakare
    Rahul ThakareDec 16, 2019

    contenteditable="true" is the key. Clever!

  • Raghav Misra
    Raghav MisraJan 11, 2020

    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.

Add comment