JavaScript Editor from Scratch to live-edit CSS Values in your Browser

#javascript #tutorial #codepen #css

Hello friends of JavaScript and CSS! Today I needed a small editor that allows me to conveniently edit the CSS :root variables of my theme in the browser. So I created this pen, and am now developing a more complex editor from it.

I'm happy to share the basic code with you guys. Feel free to do what you want with it, or improve the JavaScript code! By all means, let me know how you like the script, and write a comment!

What does it do?

The script creates a little editor widget based on the options array you must provide. It allows you to change the value of the :root CSS variable in your Stylesheet after changing a value in realtime.

What you need

At first you need some CSS code with your :root variables.

// Create some custom root variables
:root{
  --boxcolor: orange;
  --textcolor: #fff;
  --padding: 20px;
  --margin: 20px;
  --fontsize-h2: 30px;
  --fontsize-p: 18px;
}

// Use the variables for your CSS classes etc.

h2,p{
  color: var(--textcolor);
}

h2{
  font-size: var(--fontsize-h2);
}

p{
  font-size: var(--fontsize-p);
}

.box{
  margin: var(--margin);
  padding: var(--padding);
  background-color: var(--boxcolor);
}

Some HTML Markup

This is the most simple part of this tutorial. But of course it can be more complex. Imagine making a full website editable like this!

<div class="box">
<h2>JavaScript CSS Variable Editor</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>

<div class="box">
<h2>Text Primary Color</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>

<div class="box">
<h2>Text Primary Color</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>

The JavaScript

The JavaSript does the magic.

document.addEventListener('DOMContentLoaded',function(){

    // Entries for the Settings Widget
    let options = [
        {
            label: 'Text Color',
            type: 'color',
            property: 'textcolor',
            default: '#fff'
        },
        {
            label: 'Box Color',
            type: 'color',
            property: 'boxcolor',
            default: 'orange'
        },
        {
            label: 'Padding',
            type: 'range',
            property: 'padding',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Margin',
            type: 'number',
            property: 'margin',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Font Size H2',
            type: 'range',
            property: 'fontsize-h2',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Font Size Paragraph',
            type: 'range',
            property: 'fontsize-p',
            attributes: {min: "18", max: "30"},
            default: '14'
        }
    ];

    let styler_Editor = document.createElement('div');
    styler_Editor.classList.add('styler-editor');

    document.querySelector('body').appendChild(styler_Editor);

    function setAttributes(el, attrs) {
      for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
      }
    }

    options.forEach((option, i) => {
        let optionLabel = document.createElement('label');
        optionLabel.innerHTML = option.label;

        let optionField = document.createElement('input');
        optionField.type = option.type;
        optionField.value = option.default;
        setAttributes(optionField,option.attributes);
        styler_Editor.appendChild(optionLabel);
        styler_Editor.appendChild(optionField);
        optionField.addEventListener('change',function(){
           switch(option.type){
             case 'range':
               document.documentElement.style.setProperty('--'+option.property,optionField.value+'px');
               break;
             case 'number':
               document.documentElement.style.setProperty('--'+option.property,optionField.value+'px');
               break;
             case 'color':
               document.documentElement.style.setProperty('--'+option.property,optionField.value);
               break;
             case 'text':
               document.documentElement.style.setProperty('--'+option.property,optionField.value);
               break;
           }

        });
    });

});

And finally the CodePen

Here's the working example for you to play with. I do not know if it supports all browsers yet. This example has been tested with Google Chrome and Brave on a Macbook.