> ## 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 Secure Rich Text Editor

> Lumen Editor is a zero-dependency, framework-agnostic WYSIWYG rich text editor. Drop it into any web project in minutes via npm or CDN.

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.

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Go from zero to a working editor in under five minutes.
  </Card>

  <Card title="Installation" icon="download" href="/installation">
    Install via npm, yarn, pnpm, or load directly from a CDN.
  </Card>

  <Card title="API Reference" icon="code" href="/api/constructor">
    Full reference for the Editor constructor, methods, and events.
  </Card>

  <Card title="Plugin System" icon="puzzle-piece" href="/api/plugins">
    Extend Lumen Editor with custom plugins and toolbar buttons.
  </Card>
</CardGroup>

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

<CardGroup cols={3}>
  <Card title="Zero Dependencies" icon="feather">
    \~12 KB of source. No external runtime libraries to audit or update.
  </Card>

  <Card title="Security First" icon="shield-check">
    Built-in allowlist sanitizer strips XSS vectors from all user input automatically.
  </Card>

  <Card title="Framework Agnostic" icon="layer-group">
    Works with React, Vue, Angular, Svelte, or plain HTML — no adapter needed.
  </Card>

  <Card title="Configurable Toolbar" icon="sliders">
    Pick exactly which formatting commands appear, and add your own custom buttons.
  </Card>

  <Card title="Light & Dark Themes" icon="circle-half-stroke">
    Switch themes at runtime with a single method call.
  </Card>

  <Card title="Plugin System" icon="plug">
    Add word counts, custom commands, or any behaviour via the plugin API.
  </Card>
</CardGroup>

## Get started in three steps

<Steps>
  <Step title="Install Lumen Editor">
    ```bash theme={null}
    npm install lumen-editor
    ```
  </Step>

  <Step title="Import and initialize">
    ```js theme={null}
    import { Editor } from 'lumen-editor';
    import 'lumen-editor/theme.css';

    const editor = new Editor('#editor', {
      placeholder: 'Start writing…',
      theme: 'light',
    });
    ```
  </Step>

  <Step title="Read the content">
    ```js theme={null}
    editor.on('change', (html) => {
      console.log(editor.getHTML()); // sanitized HTML
    });
    ```
  </Step>
</Steps>

<Tip>
  Prefer loading from a CDN? See the [Installation](/installation) page for the script-tag approach that requires no build step.
</Tip>