Need help with cl-editor?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

143 Stars 12 Forks MIT License 171 Commits 6 Opened issues


Lightweight text editor built with svelte, typescript

Services available


Need anything else?

Contributors list

Lightweight text editor

Built with svelte (no external dependencies)

File size (bundle includes css, html and js)

  • min: 29kb
  • gzip: 10kb



npm install --save cl-editor






import Editor from 'cl-editor';
// or
const Editor = require('cl-editor');
// Initialize editor
const editor = new Editor({
    //  required
    target: document.getElementById('editor'),
    // optional
    props: {
        //  string if overwriting, object if customizing/creating
        // available actions:
        // 'viewHtml', 'undo', 'redo', 'b', 'i', 'u', 'strike', 'sup', 'sub', 'h1', 'h2', 'p', 'blockquote', 
        // 'ol', 'ul', 'hr', 'left', 'right', 'center', 'justify', 'a', 'image', 'forecolor', 'backcolor', 'removeFormat'
        actions: [
            'b', 'i', 'u', 'strike', 'ul', 'ol',
                name: 'copy', // required
                icon: 'C', // string or html string (ex. ...)
                title: 'Copy',
                result: () => {
                    // copy current selection or whole editor content
                    const selection = window.getSelection();
                    if (!selection.toString().length) {
                        const range = document.createRange();
            'h1', 'h2', 'p'
        // default 300px
        height: '300px',
        // initial html
        html: '',
        // remove format action clears formatting, but also removes some html tags.
        // you can specify which tags you want to be removed.
        removeFormatTags: ['h1', 'h2', 'blackquote'] // default


// Methods
editor.exec(cmd: string, value?: string) // execute document command (document.executeCommand(cmd, false, value))
editor.getHtml(sanitize?: boolean) // returns html string from editor. if passed true as argument, html will be sanitized before return
editor.getText() // returns text string from editor
editor.setHtml(html: string, sanitize?: boolean) // sets html for editor. if second argument is true, html will be sanitized
editor.saveRange() // saves current editor cursor position or user selection
editor.restoreRange() // restores cursor position or user selection
// saveRange and restoreRange are useful when making custom actions
// that demands that focus is shifted from editor to, for example, modal window.
  • For list of available exec command visit
    // Events
    editor.$on('change', (event) => console.log(event)) // on every keyup event
    editor.$on('blur', (event) => console.log(event)) // on editor blur event
    // Props
    editor.refs. // references to editor, raw (textarea), modal and colorPicker HTMLElements

Run demo

git clone cl-editor
cd cl-editor
npm i
npm run dev

This library is inspired by and


MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.