Skip to main content
Lumen Editor is a modern, browser-native rich text editor designed for developers who need a capable WYSIWYG experience without the overhead of a heavy dependency tree. At roughly 12 KB of source with zero runtime dependencies, it drops into any web project — whether you’re working with React, Vue, Svelte, or plain HTML — and requires no build step to get started.

​
Key Features

Zero Dependencies

Lumen Editor ships with no runtime dependencies. There is nothing extra to audit, nothing to keep updated, and no risk of transitive supply-chain issues.

Built-in Security

All HTML — whether typed, pasted, or programmatically set — is passed through a strict DOM-based allowlist sanitizer that strips dangerous tags, attributes, and URL protocols before they ever touch the DOM.

Framework-Agnostic

Because Lumen Editor targets a plain CSS selector or DOM element, it works identically in React, Vue, Svelte, Angular, or a zero-framework HTML page. No adapter packages required.

Configurable Toolbar

Every toolbar group is opt-in. Pass an array of button groups to the toolbar option and Lumen renders exactly the controls your users need — nothing more.

Light & Dark Themes

Switch between light and dark themes at construction time or at runtime using editor.setTheme(). The theme layer is a single CSS file you can override to match your brand.

Plugin System

Extend the editor with a plain function — no class inheritance, no registry, no magic. A plugin receives the editor instance and wires up whatever behaviour it needs.

​
How It Works

Lumen Editor is built on the browser’s native contenteditable API, which means it relies on battle-tested platform behaviour rather than re-implementing a document model from scratch. When content enters the editor — through user input, a paste event, or a setHTML() call — it is immediately run through a DOM-based allowlist sanitizer. The sanitizer works by parsing the incoming HTML into a temporary off-document fragment, walking every node, and removing or rewriting anything that isn’t on the explicit allow-list of tags, attributes, URL protocols, and CSS properties. The result is re-serialised and written into the editable region. Because the sanitizer operates on real DOM nodes rather than regex patterns, it is resistant to the encoding tricks that fool string-based approaches.
Lumen Editor is fully CSP-compatible. It never calls eval, new Function(), or injects dynamic <script> elements at runtime, so you can deploy it under a strict Content Security Policy without special exceptions.

​
Next Steps

Quickstart

Install Lumen Editor and have a working editor on your page in under five minutes.

Installation

Explore all install methods — npm, yarn, pnpm, and CDN script tag.