@css-canvas/editor NPM

CSS Editor

An optimized editor, just for CSS.

Try it out with the demo.

Installation

Install CSS Editor with:

npm install @css-canvas/editor

Usage

Import the CSSEditor class into your project:

import { CSSEditor } from '@css-canvas/editor';

Attach the editor to an element on your page:

const editor = new CSSEditor('#editor');
// Replace '#editor' with the selector for your element.

Set the stylesheet:

const yourStylesheet = [
    {
        selector: 'div',
        properties: [
            {
                key: 'border',
                values: [ '10px', 'solid', 'red' ] 
            }
        ]
    }
];

editor.stylesheet = yourStylesheet;

Listen to changes in the stylesheet with a callback:

function yourCallback (stylesheet) {
    // Do something awesome!
}

const callbackID = editor.onUpdate(yourCallback);
// You can add as many callbacks as you like. They will all be called whenever the stylesheet is updated.

Stop listening to changes in the stylesheet:

editor.offUpdate(callbackID);

The CSSEditor class also has two static methods, parse and stringify:

// Convert a CSS string into a stylesheet object.
const stylesheet = CSSEditor.parse('div { border: 10px solid red; }');

// Convert a stylesheet object into a CSS string.

const stylesheet = [
    {
        selector: 'div',
        properties: [
            {
                key: 'border',
                values: [ '10px', 'solid', 'red' ] 
            }
        ]
    }
];

const string = CSSEditor.stringify(stylesheet);