> ## 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.

# Configuring the Lumen Editor Toolbar: Commands and Groups

> The Lumen Editor toolbar is an array of command groups. Learn the array-of-groups format, all 17 built-in commands, and how to build a custom toolbar.

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:

```js theme={null}
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.

| Command         | Description                                                       |
| --------------- | ----------------------------------------------------------------- |
| `undo`          | Undo the last edit                                                |
| `redo`          | Redo the last undone edit                                         |
| `bold`          | Toggle **bold** formatting on the selection                       |
| `italic`        | Toggle *italic* formatting on the selection                       |
| `underline`     | Toggle underline formatting on the selection                      |
| `strikethrough` | Toggle ~~strikethrough~~ formatting on the selection              |
| `h1`            | Convert the current block to a Heading 1                          |
| `h2`            | Convert the current block to a Heading 2                          |
| `h3`            | Convert the current block to a Heading 3                          |
| `paragraph`     | Convert the current block to a standard paragraph                 |
| `ul`            | Toggle an unordered (bulleted) list                               |
| `ol`            | Toggle an ordered (numbered) list                                 |
| `blockquote`    | Toggle a block quote                                              |
| `code`          | Toggle inline code formatting                                     |
| `link`          | Insert or edit a hyperlink                                        |
| `image`         | Insert an image (triggers the `uploadImage` callback)             |
| `html`          | Toggle 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:

```js theme={null}
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:

```js theme={null}
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.

<Tip>
  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.
</Tip>