DEV Community

loading...
Cover image for JavaScript Editor from Scratch to live-edit CSS Values in your Browser

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

typo3freelancer profile image Simon Köhler ・3 min read

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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
           }

        });
    });

});

Enter fullscreen mode Exit fullscreen mode

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.

You might be interested in this...

Support my work:
https://www.paypal.com/paypalme/typo3freelancer
https://www.patreon.com/koehlersimon

Follow me:
https://github.com/koehlersimon
https://www.linkedin.com/in/typo3-freelancer/
https://bitbucket.org/typo3freelancer/
https://twitter.com/koehlersimon
https://www.instagram.com/typo3freelancer/

Learn TYPO3 with the Video Training for Version 9 LTS of Wolfgang Wagner:
https://www.digistore24.com/redir/246076/GOCHILLA/

Your TYPO3 Developer & Freelancer - let's start a great TYPO3 project together!
https://simon-koehler.com/en

TYPO3 Slug Editor for SEO Gurus:
https://extensions.typo3.org/extension/slug

TYPO3 Timeline Extension for frontend timelines:
https://extensions.typo3.org/extension/ce_timeline

TYPO3 Font Awesome Extension for awesome icons:
https://extensions.typo3.org/extension/faicon

USA Hosting with Bluehost:
https://www.bluehost.com/track/simonkoehler

Island Hosting with Orange Website:
https://affiliate.orangewebsite.com/idevaffiliate.php?id=10827_0_3_1

Discussion (0)

pic
Editor guide