PHPackages                             vinaysikarwar/kria-lite - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. vinaysikarwar/kria-lite

ActiveLibrary[Utility & Helpers](/categories/utility)

vinaysikarwar/kria-lite
=======================

Kria Lite — tiny vanilla JS WYSIWYG editor with PHP upload example.

v0.1.0(7mo ago)00MITJavaScriptCI passing

Since Sep 20Pushed 4mo agoCompare

[ Source](https://github.com/vinaysikarwar/kria-lite)[ Packagist](https://packagist.org/packages/vinaysikarwar/kria-lite)[ RSS](/packages/vinaysikarwar-kria-lite/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (3)Used By (0)

Kria Lite WYSIWYG Editor
========================

[](#kria-lite-wysiwyg-editor)

 [![Kria Lite logo](assets/logo.svg)](assets/logo.svg)

 [![License](https://camo.githubusercontent.com/8bb50fd2278f18fc326bf71f6e88ca8f884f72f179d3e555e20ed30157190d0d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e737667)](LICENSE) [![Size](https://camo.githubusercontent.com/55f8c65d5bf3a60d8f445013739cd803513569df27b649954d9239089ca2a77f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d696e6966696564253230253242253230677a2d7e33e28093364b422a2d696e666f726d6174696f6e616c)](https://camo.githubusercontent.com/55f8c65d5bf3a60d8f445013739cd803513569df27b649954d9239089ca2a77f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d696e6966696564253230253242253230677a2d7e33e28093364b422a2d696e666f726d6174696f6e616c) [![Vanilla JS](https://camo.githubusercontent.com/ee3b34ce73f5feeddf613b3ff0e0aba987ca881a7b9aee5e88be3ca991210cab/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76616e696c6c612d4a532d626c7565)](https://camo.githubusercontent.com/ee3b34ce73f5feeddf613b3ff0e0aba987ca881a7b9aee5e88be3ca991210cab/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76616e696c6c612d4a532d626c7565)

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
----------------

[](#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
-----------

[](#quick-start)

Include the script and enhance your ``

```

  // 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
  });

```

Upload endpoint
---------------

[](#upload-endpoint)

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

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

API
---

[](#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
----------------

[](#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

[](#advanced-build-usage)

```

  WYSIWYG.init('.wysiwyg', {
    // Optional: customize icons per control
    // icons: { undo: '...' },
    // Optional image upload
    uploadUrl: '/wysiwyg/upload.php',
    uploadFieldName: 'image',
    autosaveKey: 'post-42-draft'
  });

```

Publish options
---------------

[](#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
---------------------

[](#demo-and-social-links)

- Live demo (GitHub Pages):
- Repository:
- Issue tracker:

Try online:

- StackBlitz (static):
- CodeSandbox (import from GitHub):

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
----

[](#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
-----

[](#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
-------

[](#license)

MIT

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance70

Regular maintenance activity

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity26

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

234d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/89c3e094155c3909aed6351f87a4fde17b19eef817d5eb9a19e735d701cef272?d=identicon)[webtechnologycodes](/maintainers/webtechnologycodes)

---

Top Contributors

[![vinaysikarwar](https://avatars.githubusercontent.com/u/5436260?v=4)](https://github.com/vinaysikarwar "vinaysikarwar (15 commits)")

---

Tags

editorjavascriptlightweightrich-textvanilla-jswysiwyg

### Embed Badge

![Health badge](/badges/vinaysikarwar-kria-lite/health.svg)

```
[![Health](https://phpackages.com/badges/vinaysikarwar-kria-lite/health.svg)](https://phpackages.com/packages/vinaysikarwar-kria-lite)
```

###  Alternatives

[humanmade/mu-plugins-loader

A WordPress must-use plugin autoloader for mu-plugins in directories

1122.3k](/packages/humanmade-mu-plugins-loader)[caouecs/bootstrap3

Bootstrap 3 for Laravel 4

111.9k](/packages/caouecs-bootstrap3)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)