> ## 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. # Quickstart: Get Started with Lumen Editor in 5 Minutes > Install Lumen Editor, mount it on a page, configure your toolbar and options, then read and react to content changes — all in under five minutes. This guide walks you through everything you need to go from a blank project to a fully functional rich text editor. By the end you will have Lumen Editor installed, mounted on a page, configured with real options, and wired up to read content and respond to changes. ## Prerequisites Before you begin, make sure you have the following in place: * A **modern browser** (Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+) for the runtime environment. * **Node.js 16+** and npm (or yarn / pnpm) if you plan to install via a package manager. You can skip this requirement entirely if you prefer the CDN approach. No build step is required. If you just want to try Lumen Editor immediately, load it straight from a ` ``` Create a new `Editor` instance, passing your container selector as the first argument and an options object as the second. The example below demonstrates the full set of supported options so you can pick the ones relevant to your use case. ```js theme={null} import { Editor } from 'lumen-editor'; import 'lumen-editor/theme.css'; const editor = new Editor('#editor', { // Placeholder text shown when the editor is empty placeholder: 'Write here…', // Initial theme: 'light' (default) or 'dark' theme: 'light', // Locale for toolbar tooltips and ARIA labels locale: 'en', // 'en' | 'tr' | custom locale object // Pre-populate the editor with existing HTML content value: '

Hello world

', // Toolbar layout — each nested array becomes a button group toolbar: [ ['undo', 'redo'], ['h1', 'h2', 'paragraph'], ['bold', 'italic', 'underline'], ['ul', 'ol'], ['link', 'image', 'code'], ['html'], ], // Persist content to localStorage automatically autoSave: { key: 'my-doc', // localStorage key debounce: 800, // milliseconds to wait after last keystroke }, // Async handler called when the user inserts an image from disk. // Return the URL that should appear in the attribute. uploadImage: async (file) => { const form = new FormData(); form.append('file', file); const res = await fetch('/api/upload', { method: 'POST', body: form }); return (await res.json()).url; }, // Maximum allowed image file size in bytes (default: no limit) maxImageSize: 5 * 1024 * 1024, // 5 MB // Restrict uploads to specific MIME types allowedImageTypes: ['image/jpeg', 'image/png', 'image/webp'], // Override the built-in sanitizer allowlist with a custom configuration sanitize: { allowedTags: ['p', 'strong', 'em', 'u', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'img'], allowedAttributes: { a: ['href', 'rel', 'target'], img: ['src', 'alt'] }, }, // Register plugins at construction time (same as calling editor.use() later) plugins: [], // Low-level module overrides for advanced customisation modules: {}, }); ``` Every option is optional. Calling `new Editor('#editor', {})` is perfectly valid and gives you a working editor with sensible defaults. Subscribe to the `change` event to react whenever the user edits the document. Use `getHTML()` to retrieve sanitized HTML or `getText()` for plain text. ```js theme={null} // React to every content change editor.on('change', (html) => { console.log('Current HTML:', html); // e.g. auto-save to your backend save(html); }); // Read content on demand const html = editor.getHTML(); // sanitized HTML string const text = editor.getText(); // plain text string // Replace the entire content programmatically editor.setHTML('

New content loaded from the server

'); // Switch theme at runtime editor.setTheme('dark'); // Move focus into the editor programmatically editor.focus(); // Install a plugin after construction editor.use((editorInstance) => { // plugins receive the editor instance and can hook into its API editorInstance.on('change', () => console.log('plugin: content changed')); }); // Clean up when your component or page unmounts editor.destroy(); ``` You can also listen for other built-in events: | Event | Fired when | | ----------------- | -------------------------------------------------------------------- | | `change` | The document content changes | | `selectionchange` | The cursor or selection moves | | `history:change` | The undo/redo stack updates | | `view:toggle` | The editor switches between WYSIWYG and raw HTML view | | `autosave` | An auto-save write completes | | `error` | An internal error occurs (receives an object with a `code` property) | ## What's Next? You now have a working Lumen Editor instance. From here you can: * Explore all **install methods** (yarn, pnpm, CDN) on the [Installation](/installation) page. * Learn how to extend the editor with the **plugin system** by writing a simple `(editor) => { ... }` function. * Tighten security or customise the **sanitizer allowlist** for your content requirements.