Skip to main content
The Lumen Editor toolbar is entirely data-driven — you describe what buttons to show and how to group them by passing an array to the toolbar option, and the editor renders the corresponding controls. There is no separate plugin registration or imperative API needed for built-in commands: if a command name appears in the array, the button appears in the UI; if it does not, the button is absent.

​
Toolbar format

The toolbar option accepts an array of groups. Each group is itself an array of command name strings. The editor renders a visual divider between groups, giving you a natural way to separate related controls: 
const editor = new Editor('#editor', {
  toolbar: [
    ['undo', 'redo'],                          // group 1 — history
    ['h1', 'h2', 'paragraph'],                 // group 2 — block type
    ['bold', 'italic', 'underline'],           // group 3 — inline formatting
    ['ul', 'ol'],                              // group 4 — lists
    ['link', 'image', 'code'],                 // group 5 — media & code
    ['html']                                   // group 6 — raw HTML toggle
  ]
});
You can include as many or as few groups as you need, and each group can contain any combination of the built-in command names listed below.

​
Built-in commands

Lumen Editor ships with 17 built-in commands that cover the most common rich text needs.
CommandDescription
undoUndo the last edit
redoRedo the last undone edit
boldToggle bold formatting on the selection
italicToggle italic formatting on the selection
underlineToggle underline formatting on the selection
strikethroughToggle strikethrough formatting on the selection
h1Convert the current block to a Heading 1
h2Convert the current block to a Heading 2
h3Convert the current block to a Heading 3
paragraphConvert the current block to a standard paragraph
ulToggle an unordered (bulleted) list
olToggle an ordered (numbered) list
blockquoteToggle a block quote
codeToggle inline code formatting
linkInsert or edit a hyperlink
imageInsert an image (triggers the uploadImage callback)
htmlToggle the raw HTML source view (calls editor.toggleHtmlView())

​
Minimal toolbar example

For lightweight editing surfaces — such as a comment box or a short bio field — you might only need a handful of commands: 
const editor = new Editor('#editor', {
  toolbar: [
    ['bold', 'italic', 'underline'],
    ['link']
  ]
});
This produces two groups separated by a single divider: one for inline formatting and one for inserting links.

​
Disabling the toolbar

Pass an empty array to hide the toolbar entirely and present a clean, toolbar-free editing surface: 
const editor = new Editor('#editor', {
  toolbar: []
});
You can also omit the toolbar key altogether, in which case the editor falls back to its built-in default group arrangement.
Need buttons the built-in set does not cover? Register a plugin with editor.use(plugin) to define custom commands, then include your command names in the toolbar array just like built-in ones. See the Plugin API reference for the full plugin interface.