Skip to main content
Lumen Editor is a modern rich text editor weighing in at ~12 KB with zero runtime dependencies. It works with any JavaScript framework — or none at all — and ships with built-in XSS protection, a configurable toolbar, light/dark themes, and a plugin system that lets you extend it to fit your exact needs.

Quickstart

Go from zero to a working editor in under five minutes.

Installation

Install via npm, yarn, pnpm, or load directly from a CDN.

API Reference

Full reference for the Editor constructor, methods, and events.

Plugin System

Extend Lumen Editor with custom plugins and toolbar buttons.

​
Why Lumen Editor?

Lumen Editor is designed for developers who need a capable rich text editor without the weight of a large dependency. It is intentionally small, deliberately secure, and straightforward to integrate.

Zero Dependencies

~12 KB of source. No external runtime libraries to audit or update.

Security First

Built-in allowlist sanitizer strips XSS vectors from all user input automatically.

Framework Agnostic

Works with React, Vue, Angular, Svelte, or plain HTML — no adapter needed.

Configurable Toolbar

Pick exactly which formatting commands appear, and add your own custom buttons.

Light & Dark Themes

Switch themes at runtime with a single method call.

Plugin System

Add word counts, custom commands, or any behaviour via the plugin API.

​
Get started in three steps

1

Install Lumen Editor

npm install lumen-editor
2

Import and initialize

import { Editor } from 'lumen-editor';
import 'lumen-editor/theme.css';

const editor = new Editor('#editor', {
  placeholder: 'Start writing…',
  theme: 'light',
});
3

Read the content

editor.on('change', (html) => {
  console.log(editor.getHTML()); // sanitized HTML
});
Prefer loading from a CDN? See the Installation page for the script-tag approach that requires no build step.