Lightweight JavaScript WYSIWYG Editor
Kria Lite is a tiny, dependency-free JavaScript WYSIWYG editor designed for modern web applications. With just ~6KB gzipped, it delivers all the rich text editing features you need—including image upload with progress, HTML source view, and 40+ formatting tools—without the bloat of traditional editors like TinyMCE or CKEditor. Whether you're building a blog, admin panel, SaaS app, or CMS, Kria Lite provides the perfect balance of features and performance as your lightweight WYSIWYG editor solution.
Get Started in 30 Seconds
Install the JavaScript WYSIWYG editor via npm or CDN and initialize with just one line of code.
📦 npm Install
# Install via npm
npm install kria-lite
# Import in your project
import { WYSIWYG } from 'kria-lite';
WYSIWYG.init('.wysiwyg');
🌐 CDN (No Build Step)
<!-- Add to your HTML -->
<textarea class="wysiwyg"></textarea>
<script src="https://cdn.jsdelivr.net/npm/kria-lite/dist/kria.editor.min.js"></script>
<script>WYSIWYG.init('.wysiwyg');</script>
Try the WYSIWYG Editor
Experience the lightweight HTML WYSIWYG editor right in your browser. All 40+ features are available.
Complete WYSIWYG Editor Features
Kria Lite includes everything you need in a JavaScript WYSIWYG editor, without the bloat.
Text Formatting
- ✓ Bold, Italic, Underline
- ✓ Strikethrough, Highlight
- ✓ Subscript, Superscript
- ✓ Text & Background Colors
Structure
- ✓ Headings H1-H6
- ✓ Paragraphs, Blockquotes
- ✓ Ordered & Unordered Lists
- ✓ Checklists
Media Support
- ✓ Image Upload with Progress
- ✓ Drag & Drop Images
- ✓ Image Resize
- ✓ YouTube/Vimeo Embeds
Tables
- ✓ Insert Tables
- ✓ Add/Remove Rows
- ✓ Add/Remove Columns
- ✓ Delete Tables
Tools
- ✓ Find & Replace
- ✓ Word Count
- ✓ Fullscreen Mode
- ✓ HTML Source View
Content
- ✓ Templates
- ✓ Snippets
- ✓ Code Blocks
- ✓ Links
Editing
- ✓ Undo / Redo
- ✓ Keyboard Shortcuts
- ✓ Copy/Paste
- ✓ Clear Formatting
Security
- ✓ XSS Protection
- ✓ HTML Sanitization
- ✓ Safe Paste
- ✓ Clean Output
WYSIWYG Editor Comparison
See how Kria Lite compares to other popular JavaScript WYSIWYG editors like TinyMCE, CKEditor, and Quill.
| Feature | Kria Lite | TinyMCE | CKEditor 5 | Quill |
|---|---|---|---|---|
| Bundle Size (Gzipped) | ~6KB | ~400KB | ~500KB | ~40KB |
| Dependencies | 0 | Multiple | Multiple | 1 |
| License | MIT (Free) | MIT/Commercial | GPL/Commercial | BSD |
| Image Upload | ✓ | ✓ | ✓ | Plugin |
| Tables | ✓ | ✓ | ✓ | ✗ |
| Find & Replace | ✓ | ✓ | ✓ | ✗ |
| Templates | ✓ | Premium | Plugin | ✗ |
| XSS Protection | ✓ | ✓ | ✓ | ✓ |
| Load Time Impact | Minimal | High | High | Low |
Perfect for Every Use Case
Kria Lite's lightweight JavaScript WYSIWYG editor is ideal for applications where performance matters.
Blogs & CMS
Create a fast-loading content management system with rich text editing. Perfect for WordPress alternatives or custom blog platforms.
Django Integration Guide →SaaS Applications
Integrate a fast, lightweight HTML editor into your SaaS product without compromising on page load times or bundle size.
React Integration Guide →Admin Panels
Add rich text editing to your admin dashboard. Works great with frameworks like Vue, Angular, and vanilla JavaScript.
Vue Integration Guide →Simple, Powerful API
Initialize the WYSIWYG editor with sensible defaults or customize every aspect of behavior.
Basic Initialization
// Initialize with defaults
WYSIWYG.init('.wysiwyg');
// Initialize with options
WYSIWYG.init('.wysiwyg', {
height: '400px',
placeholder: 'Start writing...',
imageUploadUrl: '/api/upload',
toolbar: ['bold', 'italic', 'heading']
});
Get & Set Content
// Get the editor instance
const editor = WYSIWYG.get('#my-editor');
// Get HTML content
const html = editor.getContent();
// Set HTML content
editor.setContent('<p>Hello World!</p>');
// Listen for changes
editor.onChange(content => {
console.log('Content updated');
});
Frequently Asked Questions
Common questions about Kria Lite JavaScript WYSIWYG editor.
What is a WYSIWYG editor? ▼
A WYSIWYG (What You See Is What You Get) editor is a type of text editor that allows users to create and edit content in a form that closely resembles the final output. Unlike plain text or HTML editors, WYSIWYG editors display formatted text, images, and other elements as they will appear when published. Kria Lite is a modern JavaScript WYSIWYG editor that provides rich text editing capabilities with zero dependencies.
Which is the best WYSIWYG editor for JavaScript? ▼
The best JavaScript WYSIWYG editor depends on your needs. For lightweight applications requiring minimal bundle size, Kria Lite is the ideal choice at only 6KB gzipped with zero dependencies. Other options include TinyMCE (400KB+), CKEditor (500KB+), and Quill (40KB). Kria Lite offers 40+ features while maintaining the smallest footprint, making it perfect for performance-focused applications.
Is Kria Lite WYSIWYG editor free and open source? ▼
Yes, Kria Lite is completely free and open-source under the MIT license. You can use it in personal and commercial projects without any licensing fees or restrictions. The source code is available on GitHub at github.com/vinaysikarwar/kria-lite.
Does Kria Lite support image uploads? ▼
Yes, Kria Lite includes built-in image upload with progress indicator, drag-and-drop support, and image resizing capabilities. You can configure custom upload endpoints and handle server-side image processing. Simply set the imageUploadUrl option when initializing the editor.
Can I use Kria Lite with React, Vue, or Angular? ▼
Yes, Kria Lite is framework-agnostic and works seamlessly with React, Vue, Angular, Svelte, and vanilla JavaScript. Installation is simple via npm (npm install kria-lite) or CDN. Check our integration guides for React, Vue, and Django.
How does Kria Lite compare to TinyMCE and CKEditor? ▼
Kria Lite is significantly smaller (6KB vs 400KB+ for TinyMCE, 500KB+ for CKEditor) and has zero dependencies. While TinyMCE and CKEditor offer more enterprise features, Kria Lite provides all essential WYSIWYG features (40+) in a fraction of the size, making it ideal for performance-focused applications. See our detailed comparison.
Is Kria Lite SEO-friendly? ▼
Yes, Kria Lite produces clean, semantic HTML output that is SEO-friendly. It supports proper heading hierarchy (H1-H6), alt text for images, and clean markup without unnecessary inline styles or wrapper divs, making content easier for search engines to parse and index.
Ready to Use the Lightweight WYSIWYG Editor?
Get started with Kria Lite in seconds. No complex setup, no heavy dependencies—just a fast, feature-rich JavaScript WYSIWYG editor.
Learn More About WYSIWYG Editors
Tutorials, guides, and comparisons for JavaScript WYSIWYG editors.
Best Lightweight WYSIWYG Editors 2025
Comprehensive comparison of Kria Lite, TinyMCE, CKEditor, Quill, and more. Find the best editor for your project.
Use Kria Lite WYSIWYG Editor in React
Step-by-step guide to integrating Kria Lite with React. Includes hooks, TypeScript support, and best practices.
Use Kria Lite WYSIWYG Editor in Vue
Complete Vue.js integration guide for Kria Lite. Covers Vue 3 Composition API and Options API.