What is Kria Lite WYSIWYG Editor?

Kria Lite is a lightweight, dependency-free WYSIWYG (What You See Is What You Get) editor for modern web applications. It's only 6KB gzipped and includes 40+ features like templates, snippets, find & replace, image upload, and more.

Is Kria Lite free to use?

Yes, Kria Lite is completely free and open-source under the MIT license. You can use it in personal and commercial projects without any cost.

Does Kria Lite work with React, Vue, and Angular?

Yes, Kria Lite is framework-agnostic and works with any JavaScript framework including React, Vue, Angular, Svelte, and vanilla JavaScript.

What features does Kria Lite v2 include?

Kria Lite v2 includes 40+ features: text formatting (bold, italic, underline, highlight), headings, font controls, alignment, lists with checklists, tables, images with resize, videos, links, code blocks, templates, snippets, find & replace, word count, fullscreen mode, and more.

Documentation - Kria Lite WYSIWYG Editor

Installation

NPM

npm install kria-lite

Yarn

yarn add kria-lite

Direct Download

Download from GitHub Releases.

Quick Start

1. Include the Script

<script src="kria.editor.widget.min.js"></script>

2. Add a Textarea

<textarea id="editor" class="wysiwyg"></textarea>

3. Initialize

                    
const editor = WYSIWYG.init('.wysiwyg', {
    height: 400,
    placeholder: 'Start typing...'
});

CDN Usage

unpkg

<script src="https://unpkg.com/kria-lite/kria.editor.widget.min.js"></script>

jsDelivr

                    <script src="https://cdn.jsdelivr.net/npm/kria-lite/kria.editor.widget.min.js"></script>
                

Configuration Options

Option	Type	Default	Description
`height`	number	360	Editor height in pixels
`placeholder`	string	'Start typing...'	Placeholder text
`sanitize`	boolean	true	Enable HTML sanitization
`uploadUrl`	string	null	Image upload endpoint

Toolbar Configuration

                    
WYSIWYG.init('#editor', {
    toolbar: [
        'bold', 'italic', 'underline', '|',
        'h1', 'h2', 'h3', '|',
        'ul', 'ol', '|',
        'link', 'image', 'table'
    ]
});
                    
                

Available Items

bold italic underline strike h1-h6 ul ol link image video table code quote findReplace wordCount fullscreen

Image Upload

                    
WYSIWYG.init('#editor', {
    uploadUrl: '/api/upload',
    uploadFieldName: 'image',
    uploadHeaders: {
        'X-CSRF-Token': 'your-token'
    }
});
                    
                

Templates & Snippets

                    
WYSIWYG.v2.init('#editor', {
    templates: [
        {
            name: 'Meeting Notes',
            content: '<h2>Meeting Notes</h2>...'
        }
    ],
    snippets: [
        {
            name: 'Tip Box',
            content: '<div class="tip">...</div>'
        }
    ]
});
                    
                

API Methods

getContent()

Returns the current HTML content.

const html = editor.getContent();

setContent(html)

Sets the HTML content.

editor.setContent('<p>Hello</p>');

getText()

Returns plain text (HTML stripped).

const text = editor.getText();

destroy()

Destroy the editor instance.

editor.destroy();

Event Callbacks

                    
WYSIWYG.v2.init('#editor', {
    onContentChange: (content) => {
        console.log('Content updated');
    },
    onWordCountUpdate: (stats) => {
        console.log('Words:', stats.words);
    }
});
                    
                

Custom Plugins

                    
function myPlugin(instance) {
    const button = document.createElement('button');
    button.innerHTML = '📌';
    button.addEventListener('click', () => {
        document.execCommand('insertHTML', false, '📌');
    });
    instance.toolbarEl.appendChild(button);
}

WYSIWYG.v2.init('#editor', {
    plugins: [myPlugin]
});
                    
                