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.
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';
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.
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.