README

A tiny, dependency-free WYSIWYG editor in vanilla JavaScript. Fast to load, simple to use, and easy to integrate.

Zero dependencies
Image upload with progress (via XHR or custom handler)
Basic sanitization built in

Feature overview

Core
- Lightweight vanilla JS; no dependencies
- Toolbar: Bold, Italic, Underline, Strike, Remove format, H1/H2/H3, Paragraph, Align Left/Center/Right, Bulleted/Numbered lists, Indent/Outdent, Link, Image, Table, Horizontal rule, Code block, Quote, Toggle Source (HTML), Fullscreen
- Keyboard shortcuts: Cmd/Ctrl+B/I/U, Cmd/Ctrl+K (link)
- Basic HTML sanitization
- Image upload via uploadUrl or custom uploadHandler with progress
- API: getHTML, setHTML, getText, insertHtml, destroy
- Optional autosave to localStorage
Advanced build extras (kria.editor.widget.*)
- Undo/Redo with custom snapshot history + toolbar buttons; shortcuts Cmd/Ctrl+Z and Shift+Cmd/Ctrl+Z
- Mobile-friendly UI: sticky/scrollable toolbar on small screens, larger tap targets, safe-area insets
- Font family dropdown, font size, font and background color pickers
- Link dialog (restores selection) and Image dialog
- Paste images from clipboard: instant blob preview, optional upload with URL replacement
- Table dialog: choose rows and columns before insert
- Code block insertion, Toggle source (WYSIWYG/HTML), Fullscreen mode
- Active-state indication for toolbar buttons
- Overridable icons via options.icons
- Plugin hook: options.plugins: (instance) => void
- Enhanced paste handling (prefer HTML; fallback to plain text → paragraphs)

Quick start

Include the script and enhance your <textarea>

<script src="editor.widget.js"></script>
<textarea class="wysiwyg" style="width:100%;height:300px"></textarea>
<script>
  // Use either alias:
  // KriaLite.init('.wysiwyg');
  WYSIWYG.init('.wysiwyg', {
    // Optional image upload
    uploadUrl: '/wysiwyg/upload.php',
    uploadFieldName: 'image',
    // Optional: map your API response to an URL
    parseUploadResponse: (json) => json && json.url
  });
</script>

Upload endpoint

A sample PHP upload handler is provided at upload.php. It stores images under uploads/images and returns { "url": "/wysiwyg/uploads/images/<filename>" }.

Adjust $publicPathPrefix if your public path differs
Set $maxFileSize and $allowedMime as needed
For auth, flip $requireAuthToken to true and implement validation

API

WYSIWYG.init(selectorOrNodeList, options)
KriaLite.init(selectorOrNodeList, options) (alias)
WYSIWYG.sanitizeHtml(html)

Key options (see editor.widget.js for full list):

height (number)
toolbar (array of controls)
sanitize (boolean)
uploadUrl, uploadFieldName, uploadHeaders
uploadHandler(file, { onProgress }) custom uploader returning { url } or string
onUploadProgress(percent, loaded, total, imgEl, instance)
parseUploadResponse(json) -> string URL

Build and minify

Requires Node.js. This repo ships with a minimal build using UglifyJS.

npm install
npm run build

Outputs:

Core: editor.widget.min.js, editor.widget.min.js.map
Advanced: kria.editor.widget.min.js, kria.editor.widget.min.js.map

Advanced build usage

<script src="kria.editor.widget.min.js"></script>
<textarea class="wysiwyg" style="width:100%;height:300px"></textarea>
<script>
  WYSIWYG.init('.wysiwyg', {
    // Optional: customize icons per control
    // icons: { undo: '<svg>...</svg>' },
    // Optional image upload
    uploadUrl: '/wysiwyg/upload.php',
    uploadFieldName: 'image',
    autosaveKey: 'post-42-draft'
  });
</script>

Publish options

GitHub Releases: tag versions (e.g., v0.1.0) and attach the minified build
npm: publish the package for easy install (npm publish)
Packagist: submit this repo to Packagist to expose the PHP example via Composer
CDN: once on npm, unpkg/jsDelivr can serve the minified file directly

Demo and social links

Live demo (GitHub Pages): https://vinaysikarwar.github.io/kria-lite/
Repository: https://github.com/vinaysikarwar/kria-lite
Issue tracker: https://github.com/vinaysikarwar/kria-lite/issues

Try online:

StackBlitz (static): https://stackblitz.com/fork/github/vinaysikarwar/kria-lite
CodeSandbox (import from GitHub): https://codesandbox.io/p/github/vinaysikarwar/kria-lite

GitHub topics (set): wysiwyg, editor, vanilla-js, rich-text, lightweight, javascript

Tip: Add a repo social preview image (Settings → Social preview). A screenshot of the editor or the assets/logo.svg on a gradient background works well.

Demo

The demo is a simple static page using KriaLite.init() and no upload backend. To enable uploads in your own app, configure uploadUrl as shown above.

Notes

Uses document.execCommand for editing for broad compatibility.
Blob image previews are inserted instantly; final URL replaces on upload success.
Minimal CSS is injected automatically; customize via overrides if needed.

License

MIT

vinaysikarwar / kria-lite

Maintainers

Details