Skip to main content
You pass options as the second argument to the Editor constructor. Every option is optional — you only need to provide the ones that differ from the defaults. The first argument is a CSS selector string (or a DOM element reference) identifying the container element where Lumen Editor will mount. 
const editor = new Editor('#editor', {
  placeholder: 'Write here…',
  theme: 'light',
  locale: 'en',
  value: '<p>Hello world</p>',
  toolbar: [
    ['undo', 'redo'],
    ['h1', 'h2', 'paragraph'],
    ['bold', 'italic', 'underline'],
    ['ul', 'ol'],
    ['link', 'image', 'code'],
    ['html']
  ],
  autoSave: { key: 'my-doc', debounce: 800 },
  uploadImage: async (file) => '/uploads/my-image.png',
  plugins: [plugin1, plugin2],
  modules: [...Object.values(modules), customModule],
  sanitize: {
    tags: ['p', 'strong', 'em', 'a', 'code', 'pre'],
    attrs: { '*': ['class'], a: ['href', 'title', 'rel', 'target'] },
    protocols: ['https:'],
    imgProtocols: ['https:'],
    dataImages: false,
    styles: []
  },
  maxImageSize: 5 * 1024 * 1024,
  allowedImageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
});

​
Options reference

​
placeholder
string
Ghost text displayed inside the editor when its content is empty. Accepts any plain string. Defaults to an empty string (no placeholder shown).
​
theme
"light" | "dark"
Visual theme applied to the editor UI. Set to 'dark' to activate the built-in dark colour scheme. Defaults to 'light'.
theme: 'dark'
​
locale
string | object
Controls the language used for toolbar tooltips and ARIA labels. Pass 'en' or 'tr' to use a built-in locale, or supply a custom locale object to provide your own strings. Defaults to 'en'.
// Built-in locale
locale: 'tr'

// Custom locale object
locale: {
  bold: 'Bold',
  italic: 'Italic',
  // ... all other keys
}
​
value
string
Initial HTML content loaded into the editor on mount. The string is passed through the sanitizer before rendering. Defaults to an empty string.
value: '<p>Hello <strong>world</strong></p>'
​
toolbar
string[][]
Defines which command buttons appear in the toolbar and how they are grouped. Each inner array is a group of command names separated by a visual divider. Omit a group or command name to hide those controls entirely.
toolbar: [
  ['undo', 'redo'],
  ['h1', 'h2', 'paragraph'],
  ['bold', 'italic', 'underline'],
  ['ul', 'ol'],
  ['link', 'image', 'code'],
  ['html']
]
See the Modules reference for the full list of built-in command names.
​
autoSave
{ key: string, debounce: number }
Enables automatic persistence of editor content to localStorage. key is the storage key under which the HTML is saved. debounce is the delay in milliseconds after the last keystroke before the save fires. When present, the stored value is restored on next mount (taking precedence over value).
autoSave: { key: 'my-doc', debounce: 800 }
​
uploadImage
async (file: File) => string
An async function called when the user selects an image through the image toolbar button. Receive the raw File object, upload it however you like, and return the public URL string that will be inserted into the editor as the src of an <img> tag.
uploadImage: async (file) => {
  const form = new FormData();
  form.append('image', file);
  const res = await fetch('/api/upload', { method: 'POST', body: form });
  const { url } = await res.json();
  return url;
}
Combine uploadImage with maxImageSize and allowedImageTypes to validate files before they are uploaded.
​
plugins
((editor: Editor) => void)[]
An array of plugin functions, each of which receives the Editor instance and can extend or modify its behaviour. Plugins are called once, in order, immediately after the editor has mounted.
function myPlugin(editor) {
  // attach custom event listeners, override methods, etc.
}

plugins: [myPlugin]
​
modules
EditorModule[]
The full set of toolbar module definitions available to the editor. Defaults to the complete built-in modules set. Pass a merged array to add custom modules alongside the defaults, or a completely custom array to replace the built-in set entirely.
import { Editor, modules } from 'lumen-editor';

new Editor('#editor', {
  modules: [...Object.values(modules), customModule]
});
See the Modules reference for the module object shape and a list of all built-in modules.
​
sanitize
object
A configuration object that overrides the default HTML sanitizer allowlist. When provided, it entirely replaces the defaults — any key you omit falls back to an empty/disabled state rather than inheriting the default. Supply all required keys explicitly.
sanitize: {
  tags: ['p', 'strong', 'em', 'a', 'code', 'pre'],
  attrs: { '*': ['class'], a: ['href', 'title', 'rel', 'target'] },
  protocols: ['https:'],
  imgProtocols: ['https:'],
  dataImages: false,
  styles: []
}
See the Sanitizer reference for a full breakdown of each key and a hardening example.
​
maxImageSize
number
Maximum permitted file size (in bytes) for images inserted via the toolbar image button. Files that exceed this limit are rejected before uploadImage is called. Defaults to 5242880 (5 MB).
maxImageSize: 2 * 1024 * 1024  // 2 MB
​
allowedImageTypes
string[]
An allowlist of MIME types for images inserted via the toolbar. Files whose type is not in this list are rejected before uploadImage is called. Defaults to ['image/png', 'image/jpeg', 'image/gif', 'image/webp'].
allowedImageTypes: ['image/png', 'image/jpeg']

​
Full example

The snippet below shows all options used together for reference. In practice, only include the options you need to override. 
import { Editor, modules } from 'lumen-editor';

const editor = new Editor('#editor', {
  placeholder: 'Write here…',
  theme: 'light',
  locale: 'en',
  value: '<p>Hello world</p>',
  toolbar: [
    ['undo', 'redo'],
    ['h1', 'h2', 'paragraph'],
    ['bold', 'italic', 'underline'],
    ['ul', 'ol'],
    ['link', 'image', 'code'],
    ['html']
  ],
  autoSave: { key: 'my-doc', debounce: 800 },
  uploadImage: async (file) => {
    const form = new FormData();
    form.append('image', file);
    const res = await fetch('/api/upload', { method: 'POST', body: form });
    const { url } = await res.json();
    return url;
  },
  plugins: [plugin1, plugin2],
  modules: [...Object.values(modules), customModule],
  sanitize: {
    tags: ['p', 'strong', 'em', 'a', 'code', 'pre'],
    attrs: { '*': ['class'], a: ['href', 'title', 'rel', 'target'] },
    protocols: ['https:'],
    imgProtocols: ['https:'],
    dataImages: false,
    styles: []
  },
  maxImageSize: 5 * 1024 * 1024,
  allowedImageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp']
});

Sanitizer

Customise the HTML allowlist to control which tags, attributes, and CSS properties survive sanitisation.

Modules

Explore all 17 built-in toolbar modules and learn how to define your own.

Custom Toolbar

Step-by-step guide to building and registering a custom toolbar module.