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.

Version 2.0 Interactive Demo

Experience Kria Lite v2 Live

Try the full-featured WYSIWYG editor with 40+ tools. Everything works right here in your browser.

Find & Replace Templates & Snippets Image Resize & Drag/Drop Word Count

<h2>Welcome to Kria Lite v2! 🚀</h2>
<p>This is a <strong>live demo</strong> of the Kria Lite WYSIWYG editor version 2. Try out all the powerful features:</p>

<h3>✨ New in v2</h3>
<ul>
    <li><strong>Find & Replace</strong> - Press Ctrl/Cmd+F or use the toolbar</li>
    <li><strong>Templates</strong> - Pre-made content layouts (meeting notes, articles, reports)</li>
    <li><strong>Snippets</strong> - Quick reusable content blocks (tip boxes, warnings)</li>
    <li><strong>Word Count</strong> - Real-time writing statistics</li>
    <li><strong>Highlight</strong> - Mark important text with yellow background</li>
    <li><strong>Sub/Superscript</strong> - H₂O, E=mc², and more</li>
</ul>

<h3>📝 Classic Features</h3>
<ul>
    <li>Rich text formatting (bold, italic, underline, strikethrough)</li>
    <li>Multiple heading levels (H1-H6)</li>
    <li>Font family, size, and colors</li>
    <li>Text alignment and line height</li>
    <li>Bullet and numbered lists with checklists</li>
    <li>Tables with custom rows and columns</li>
    <li>Images with resize handles</li>
    <li>Links, videos, code blocks, and quotes</li>
</ul>

<blockquote>
    "Kria Lite v2 is the perfect balance of power and simplicity. All the features you need, none of the bloat." — Happy Developer
</blockquote>

<div style="background:#dbeafe;border-left:4px solid #3b82f6;padding:12px;border-radius:6px;margin:16px 0;">
    💡 <strong>Pro Tip:</strong> Use keyboard shortcuts for faster editing! Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic, Ctrl/Cmd+F for find & replace.
</div>

<p>Click the <strong>Templates</strong> or <strong>Snippets</strong> buttons in the toolbar to explore pre-made content options!</p>

HTML Output

Quick Actions

v2 Features

Find & Replace

Templates

Snippets

Word Count

Image Resize

Drag & Drop

Highlight

Sub/Superscript

Ready to Use Kria Lite?

Add powerful editing to your project in minutes.

Get Started Free →

Quick Setup

Add Kria Lite v2 to your project in just 3 lines of code

HTML

<!-- Include the editor script -->
<script src="https://cdn.jsdelivr.net/gh/vinaysikarwar/kria-lite@main/v2/kria.editor.v2.min.js"></script>

<!-- Create a textarea -->
<textarea id="my-editor"></textarea>

JavaScript

// Initialize the editor
const editor = WYSIWYG.v2.init('#my-editor', {
    height: 400,
    toolbar: [
        'bold', 'italic', 'underline', '|',
        'h1', 'h2', 'h3', '|',
        'ul', 'ol', 'table', '|',
        'templates', 'insertSnippet', '|',
        'findReplace', 'wordCount', 'fullscreen'
    ],
    features: {
        wordCount: true,
        findReplace: true,
        imageResize: true,
        dragDrop: true
    }
});