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

# Installing Lumen Editor via npm, yarn, pnpm, or CDN

> Install Lumen Editor using npm, yarn, or pnpm, or drop it onto any page with a CDN script tag — no build step required for either approach.

Lumen Editor is published to the npm registry as `lumen-editor` and can also be loaded directly from a CDN as an ES module. Choose the method that fits your project's workflow — both approaches give you the same feature-complete editor with zero runtime dependencies.

## Package Manager

Install `lumen-editor` with the package manager you already use in your project.

<CodeGroup>
  ```bash npm theme={null}
  npm install lumen-editor
  ```

  ```bash yarn theme={null}
  yarn add lumen-editor
  ```

  ```bash pnpm theme={null}
  pnpm add lumen-editor
  ```
</CodeGroup>

## CDN / Script Tag

If you are working on a static page or want to prototype without a build tool, you can import Lumen Editor as a native ES module straight from the source files. No bundler, no compilation step.

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lumen Editor — CDN demo</title>
    <!-- 1. Load the stylesheet -->
    <link rel="stylesheet" href="https://cdn.example.com/lumen-editor/theme.css" />
  </head>
  <body>
    <div id="app"></div>

    <!-- 2. Import and initialize as an ES module -->
    <script type="module">
      import { Editor } from 'https://cdn.example.com/lumen-editor/index.js';

      new Editor('#app', { placeholder: 'Start writing…' });
    </script>
  </body>
</html>
```

<Note>
  No build step is required when using the CDN approach. Modern browsers support `<script type="module">` natively, so you can open the HTML file directly in a browser or serve it with any static file server.
</Note>

## Import the Stylesheet

Regardless of whether you install via a package manager or CDN, you must load `theme.css`. This file contains all toolbar layout styles, editor chrome, and the CSS custom properties that power the light and dark themes. Without it the editor will render without styles.

When installing via npm/yarn/pnpm, import the stylesheet once in your application's entry file:

```js theme={null}
import 'lumen-editor/theme.css';
```

Most modern bundlers (Vite, webpack, Parcel, Rollup) resolve CSS imports from `node_modules` automatically. If your setup does not, reference the file path directly:

```js theme={null}
import 'node_modules/lumen-editor/theme.css';
```

## Framework Integration

The snippets below show the minimal wiring needed to mount Lumen Editor inside the three most common environments. Because the editor targets a plain DOM element, the integration pattern is the same in every framework: get a reference to the container element, construct an `Editor` instance, and call `destroy()` when the component unmounts.

<Tabs>
  <Tab title="React">
    Use a `useEffect` hook to construct the editor after the component mounts and destroy it on cleanup.

    ```jsx theme={null}
    import { useEffect, useRef } from 'react';
    import { Editor } from 'lumen-editor';
    import 'lumen-editor/theme.css';

    export default function RichTextEditor() {
      const containerRef = useRef(null);

      useEffect(() => {
        const editor = new Editor(containerRef.current, {
          placeholder: 'Write something awesome…',
          theme: 'light',
        });

        return () => {
          editor.destroy();
        };
      }, []);

      return <div ref={containerRef} />;
    }
    ```
  </Tab>

  <Tab title="Vue">
    Use the `onMounted` and `onBeforeUnmount` lifecycle hooks to manage the editor instance.

    ```vue theme={null}
    <template>
      <div ref="container"></div>
    </template>

    <script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue';
    import { Editor } from 'lumen-editor';
    import 'lumen-editor/theme.css';

    const container = ref(null);
    let editor;

    onMounted(() => {
      editor = new Editor(container.value, {
        placeholder: 'Write something awesome…',
        theme: 'light',
      });
    });

    onBeforeUnmount(() => {
      editor?.destroy();
    });
    </script>
    ```
  </Tab>

  <Tab title="Plain HTML">
    Load the stylesheet and module inline — no framework, no bundler, no build command.

    ```html theme={null}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Lumen Editor</title>
        <link rel="stylesheet" href="./node_modules/lumen-editor/theme.css" />
      </head>
      <body>
        <div id="editor"></div>

        <script type="module">
          import { Editor } from './node_modules/lumen-editor/index.js';

          const editor = new Editor('#editor', {
            placeholder: 'Write something awesome…',
            theme: 'light',
          });
        </script>
      </body>
    </html>
    ```
  </Tab>
</Tabs>

## Next Steps

Now that Lumen Editor is installed, head to the [Quickstart](/quickstart) guide to initialize your first editor instance with a full set of options, listen for content changes, and start reading output.
