Lumen Editor Constructor Options: Complete Reference

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

string

Ghost text displayed inside the editor when its content is empty. Accepts any plain string. Defaults to an empty string (no placeholder shown).

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

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
}

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

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.

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

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.

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

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.

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.

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

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.

Get Started

Core Concepts

Guides

Configuration

Help

Lumen Editor Constructor Options: Complete Reference

Options reference

Full example

Sanitizer

Modules

Custom Toolbar

​Options reference

​Full example

​Related pages

Sanitizer

Modules

Custom Toolbar

Options reference

Full example

Related pages