> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumen.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lumen Editor: Lightweight WYSIWYG Rich Text Editor

> Lumen Editor is a ~12 KB, zero-dependency, framework-agnostic WYSIWYG editor with built-in HTML sanitization and a fully configurable toolbar.

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

<CardGroup cols={2}>
  <Card title="Zero Dependencies" icon="circle-check">
    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.
  </Card>

  <Card title="Built-in Security" icon="shield-halved">
    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.
  </Card>

  <Card title="Framework-Agnostic" icon="puzzle-piece">
    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.
  </Card>

  <Card title="Configurable Toolbar" icon="sliders">
    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.
  </Card>

  <Card title="Light & Dark Themes" icon="moon">
    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.
  </Card>

  <Card title="Plugin System" icon="plug">
    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.
  </Card>
</CardGroup>

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

<Note>
  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.
</Note>

## Next Steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" href="/quickstart">
    Install Lumen Editor and have a working editor on your page in under five minutes.
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Explore all install methods — npm, yarn, pnpm, and CDN script tag.
  </Card>
</CardGroup>