<css-editor>

A simple Web-Component to live-edit CSS. Built with CodeMirror.

Usage

<css-editor>
    <style>
        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            outline: 2px solid red;
            background: repeating-conic-gradient(
                in hsl longer hue,
                red, red
            );
        }
    </style>
</css-editor>

Installation

It's available as an module on npm. So you can install it using your package-manager of choice, or directly through esm.sh

Install via npm:

npm install css-editor-element

Use directly via esm.sh

<script type="module">
import "https://esm.sh/css-editor-element"
</script>

Work in progress