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

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.

npm install lumen-editor

yarn add lumen-editor

pnpm add lumen-editor

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.

<!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>

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.

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:

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:

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.

React
Vue
Plain HTML

Use a useEffect hook to construct the editor after the component mounts and destroy it on cleanup.

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} />;
}

Use the onMounted and onBeforeUnmount lifecycle hooks to manage the editor instance.

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

Load the stylesheet and module inline — no framework, no bundler, no build command.

<!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>

Next Steps

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

Get Started

Core Concepts

Guides

Configuration

Help

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

Package Manager

CDN / Script Tag

Import the Stylesheet

Framework Integration

Next Steps

​Package Manager

​CDN / Script Tag

​Import the Stylesheet

​Framework Integration

​Next Steps

Package Manager

CDN / Script Tag

Import the Stylesheet

Framework Integration

Next Steps