Skip to main content
Toolbar modules are the unit of extensibility in Lumen Editor. Each module describes a single toolbar button — its name, visual icon, tooltip label, and the action it performs on the editor when clicked. Lumen Editor ships with 17 built-in modules covering all standard rich-text operations, and you can add your own alongside them.

​
The modules export

Import the modules named export to access the built-in module definitions as a plain object keyed by module name. 
import { Editor, modules } from 'lumen-editor';

// modules is an object: { bold: {...}, italic: {...}, undo: {...}, ... }
console.log(modules.bold);
// { name: 'bold', group: 'inline', icon: '...', label: 'Bold', exec: [Function] }
You can spread modules into an array to pass all built-in modules to the editor, then append your own custom definitions: 
new Editor('#editor', {
  modules: [...Object.values(modules), customModule]
});
The modules option defines which module objects are available to the editor. The toolbar option separately controls which of those module names actually appear as buttons, and in what order and grouping. A module must be registered in modules before you can reference its name in toolbar.

​
Built-in modules

The table below lists all 17 built-in modules, their group classification, and a short description of what each one does.
NameGroupDescription
undohistoryReverts the most recent change in the editor’s undo stack.
redohistoryRe-applies the most recently undone change.
boldinlineToggles bold (<strong>) formatting on the selected text.
italicinlineToggles italic (<em>) formatting on the selected text.
underlineinlineToggles underline (<u>) formatting on the selected text.
strikethroughinlineToggles strikethrough (<s>) formatting on the selected text.
h1blockConverts the current block to a level-1 heading (<h1>).
h2blockConverts the current block to a level-2 heading (<h2>).
h3blockConverts the current block to a level-3 heading (<h3>).
paragraphblockConverts the current block back to a standard paragraph (<p>).
ulblockWraps selected content in an unordered list (<ul>).
olblockWraps selected content in an ordered list (<ol>).
blockquoteblockWraps the current block in a <blockquote>.
codeblockWraps the current block in a <pre><code> code block.
linkinsertOpens a prompt to insert or edit a hyperlink (<a>).
imageinsertOpens the image picker; calls uploadImage if configured, otherwise inserts a data URI.
htmlviewToggles between the WYSIWYG view and a raw HTML source view.

​
Groups at a glance

inline

Formatting applied to a text selection without changing the block structure: bold, italic, underline, strikethrough.

block

Commands that change the type of the current block element: h1, h2, h3, paragraph, ul, ol, blockquote, code.

history

Undo/redo operations that traverse the editor’s change history: undo, redo.

insert

Commands that insert new content or elements at the cursor: link, image.

view

Commands that switch the editor’s display mode: html (toggle raw HTML source view).

​
Module interface

Every module — built-in or custom — must conform to the following object shape.
​
name
string
required
A unique string identifier for the module. This is the value you reference in the toolbar option to place the button. Must not collide with any existing built-in module name unless you intend to replace it.
name: 'highlight'
​
group
string
required
A logical grouping label used for documentation and potential style targeting. Built-in values are 'inline', 'block', 'history', and 'insert', but custom modules may use any string.
group: 'inline'
​
icon
string
required
An HTML string rendered as the button’s visual content. You can use a Unicode character, an emoji, an inline SVG, or an icon ligature string. The string is set as innerHTML, so SVG markup is fully supported.
icon: '<svg viewBox="0 0 24 24" width="16" height="16">...</svg>'
// or simply:
icon: 'H'
​
label
string
required
A plain-text string used as the button’s tooltip and aria-label. Keep it short and descriptive — this is the primary accessibility affordance for keyboard and screen-reader users.
label: 'Highlight text'
​
exec
(editor: Editor) => void
required
The function called when the user clicks the toolbar button. Receives the live Editor instance, giving you access to the full editor API to read selection state, manipulate content, or trigger other commands.
exec: (editor) => {
  document.execCommand('backColor', false, 'yellow');
}

​
Complete custom module example

import { Editor, modules } from 'lumen-editor';

const highlightModule = {
  name: 'highlight',
  group: 'inline',
  icon: '🖊',
  label: 'Highlight text',
  exec: (editor) => {
    document.execCommand('backColor', false, 'yellow');
  }
};

new Editor('#editor', {
  toolbar: [
    ['bold', 'italic', 'underline', 'highlight']
  ],
  modules: [...Object.values(modules), highlightModule]
});
For a full walkthrough of building and styling a custom module — including how to add toggle state, keyboard shortcuts, and dropdowns — see the Custom Toolbar guide.