The lightweight, dependency-free WYSIWYG editor that just works. Built with vanilla JavaScript, perfect for modern web applications.
Only 12KB minified and gzipped. No bloat, just the features you need for rich text editing.
Built with vanilla ES6. No jQuery, no React, no framework required. Works everywhere.
Dark mode support, auto-grow, auto-hide toolbar, and extensive configuration options.
Smart paste filtering ensures clean, consistent content from any source.
Works seamlessly on all modern browsers, desktop and mobile devices.
Simple API, easy integration. Convert any textarea element into a full featured HTML editor.
Experience Wysi in action. Try formatting text, adding links, and exploring all the features.
Simple setup for a quick start. Add Wysi to your project with just a few lines of code.
<!-- Include Wysi CSS and JS -->
<link rel="stylesheet" href="wysi.min.css"/>
<script src="wysi.min.js"></script>
<!-- Or from CDN (not recommended in production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Wysi@latest/dist/wysi.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Wysi@latest/dist/wysi.min.js"></script><textarea id="my-editor"></textarea>
<script>
// Initialize Wysi
Wysi({
el: '#my-editor'
});
// Get content
const content = document.querySelector('#my-editor').value;
</script>Wysi({
el: '.richtext',
darkMode: true,
height: 300,
autoGrow: true,
autoHide: false,
tools: [
'format', '|',
'bold', 'italic', 'underline', 'strike', '|',
{ label: 'Text alignment', items: ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'] }, '|',
'ul', 'ol', '|',
'indent', 'outdent', '|',
'link', 'image', 'hr', 'quote', '|',
'removeFormat'
],
onChange: (content) => {
console.log('Content changed:', content);
// Save to server, update preview, etc.
}
});