---
title: "Customize actions and the toolbar in Document Authoring"
canonical_url: "https://www.nutrient.io/guides/document-authoring/customize/actions-and-toolbar/"
md_url: "https://www.nutrient.io/guides/document-authoring/customize/actions-and-toolbar.md"
last_updated: "2026-07-08T00:00:00.000Z"
description: "Learn how to customize built-in actions, register custom actions, and configure the Document Authoring toolbar at startup or runtime."
---

# Customize actions and the toolbar

Before you start, ensure the Document Authoring library is installed and running. Refer to the [getting started](https://www.nutrient.io/sdk/document-authoring/getting-started.md) guide.

Document Authoring provides an Actions API and a Toolbar API for customizing editor behavior and the visible toolbar layout.

Use actions to:

- Customize built-in editor commands

- Add your own commands

- Define keyboard shortcuts

- Enable or disable commands dynamically

Use toolbar configuration to:

- Remove built-in toolbar items

- Create a smaller toolbar for a focused workflow

- Add buttons that trigger custom actions

When customizing the toolbar, start from [`defaultToolbarConfig`](https://www.nutrient.io/api/document-authoring/variables/defaulttoolbarconfig/) whenever possible. This keeps newly added built-in controls available after SDK upgrades, including the [1.17.0](https://www.nutrient.io/guides/document-authoring/changelog.md#1.17.0) header/footer editing controls, first-page and odd/even-page variant toggles, header/footer spacing controls, and floating object wrapping controls.

The example code omits error handling. Add it before using this code in production.

## Register actions when creating the editor

Use [`UIOptions.actions`](https://www.nutrient.io/api/document-authoring/types/uioptions/#actions) to provide an initial actions list. Start from [`defaultActions`](https://www.nutrient.io/api/document-authoring/variables/defaultactions/) if you want to keep the standard editor commands:

```js

import { defaultActions } from '@nutrient-sdk/document-authoring';

const editor = await docAuthSystem.createEditor(
  document.getElementById('editor'),
  {
    ui: {
      actions: [...defaultActions,
        {
          id: 'custom.insert-signature',
          label: 'Insert Signature',
          shortcuts: ['Mod+Shift+S'],
          handler: () => {
            editor.insertContentAtCursor({
              content: '\n\nBest regards,\nJane Doe',
            });
          },
        },
      ],
    },
  },
);

```

Built-in actions can omit `handler` and use the default SDK behavior automatically. Custom actions must provide a `handler`.

## Replace or update actions at runtime

Use [`editor.setActions()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#setactions) to replace the current action list:

```js

import { defaultActions } from '@nutrient-sdk/document-authoring';

editor.setActions([...defaultActions,
  {
    id: 'custom.insert-date',
    label: "Insert Today's Date",
    isEnabled: () => editor.hasActiveCursor(),
    handler: () => {
      editor.insertContentAtCursor({
        content: new Date().toLocaleDateString(),
      });
    },
  },
]);

```

## Read selected content and insert content at the cursor

Use [`editor.getSelectionContent()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#getselectioncontent) to read the current selection, and [`editor.insertContentAtCursor()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#insertcontentatcursor) to insert content at the cursor or replace an active range selection:

```js

const selectedText = editor.getSelectionContent({ format: 'text' });

if (selectedText!== null) {
  console.log('Selected text:', selectedText);
}

if (editor.hasActiveCursor()) {
  editor.insertContentAtCursor({
    content: 'Inserted from a custom workflow',
  });
}

```

Reading and inserting as a fragment rather than plain text preserves formatting and structure across the roundtrip. `format: 'text'` gives you only the characters; `format: 'fragment'` returns a structured object that inserts back through [`insertContentAtCursor()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#insertcontentatcursor) unchanged:

```js

const fragment = editor.getSelectionContent({ format: 'fragment' });

if (fragment) {
  // A fragment is opaque, JSON-serializable data: Capture it, store it, or
  // transform it. Then insert it back with its formatting intact.
  editor.insertContentAtCursor({ format: 'fragment', content: fragment });
}

```

`getSelectionContent()` returns `null` when nothing is selected — and a collapsed caret counts as no selection, so use [`hasActiveCursor()`](https://www.nutrient.io/api/document-authoring/types/docautheditor/#hasactivecursor) to tell the two apart. Treat the fragment as opaque: It’s safe to serialize and roundtrip, but don’t rely on its internal shape. Inserting a malformed fragment throws a typed error. For catching it, refer to the [error handling](https://www.nutrient.io/guides/document-authoring/troubleshooting/error-handling.md) guide.

## Customize a built-in action

Built-in actions can be relabeled or given a custom handler:

```js

import { defaultActions } from '@nutrient-sdk/document-authoring';

editor.setActions([...defaultActions.filter(({ id }) => id!== 'document.export-pdf'),
  {
    id: 'document.export-pdf',
    label: 'Download PDF',
  },
]);

```

In this example, the action keeps its default export behavior but uses a customized label.

## Configure the command palette

The command palette is available as the built-in `view.open-command-palette` action and the `command-palette` toolbar item. Users can open it with `Mod+/` or with the toolbar button.

Because it’s wired into the Actions and Toolbar APIs, you can relabel, rebind, reposition, or remove it like any other built-in action or toolbar item:

```js

import { defaultActions } from '@nutrient-sdk/document-authoring';

editor.setActions([...defaultActions.filter(({ id }) => id!== 'view.open-command-palette'),
  {
    id: 'view.open-command-palette',
    label: 'Search commands',
    shortcuts: ['Mod+Shift+K'],
  },
]);

```

## Configure the toolbar when creating the editor

Use [`UIOptions.toolbar`](https://www.nutrient.io/api/document-authoring/types/uioptions/#toolbar) to set the initial toolbar layout. Start from [`defaultToolbarConfig`](https://www.nutrient.io/api/document-authoring/variables/defaulttoolbarconfig/) if you want to keep most of the standard toolbar:

```js

import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';

const editor = await docAuthSystem.createEditor(
  document.getElementById('editor'),
  {
    ui: {
      toolbar: {...defaultToolbarConfig,
        items: defaultToolbarConfig.items.filter(
          (item) => item.id!== 'download-menu',
        ),
      },
    },
  },
);

```

## Build a minimal toolbar

Use built-in items and separators to create a smaller toolbar for focused editing. A minimal toolbar replaces the default toolbar, so it may hide built-in controls users need for page layout, headers and footers, or image and shape wrapping. Add those controls explicitly if the workflow requires them.

```js

editor.setToolbarConfig({
  items: [
    { type: 'built-in', id: 'undo', builtInType: 'undo' },
    { type: 'built-in', id: 'redo', builtInType: 'redo' },
    { type: 'separator', id: 'sep-1' },
    { type: 'built-in', id: 'bold', builtInType: 'bold' },
    { type: 'built-in', id: 'italic', builtInType: 'italic' },
    { type: 'built-in', id: 'underline', builtInType: 'underline' },
  ],
});

```

## Add a custom action to the toolbar

Toolbar action items reference action IDs, so register the action first and then add it to the toolbar:

```js

import {
  defaultActions,
  defaultToolbarConfig,
} from '@nutrient-sdk/document-authoring';

editor.setActions([...defaultActions,
  {
    id: 'custom.save-document',
    label: 'Save',
    handler: async () => {
      const doc = await editor.currentDocument().saveDocument();
      await fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify(doc),
      });
    },
  },
]);

editor.setToolbarConfig({...defaultToolbarConfig,
  items: [...defaultToolbarConfig.items,
    { type: 'separator', id: 'sep-custom' },
    { type: 'action', id: 'save-btn', actionId: 'custom.save-document' },
  ],
});

```

## Learn more

- [Document Authoring API reference](https://www.nutrient.io/api/document-authoring/)
---

## Related pages

- [Configure fonts](/guides/document-authoring/customize/fonts.md)
- [Use events and integration APIs](/guides/document-authoring/customize/events-and-integration.md)
- [Set the locale and units](/guides/document-authoring/customize/localization-and-units.md)
- [Use spellcheck in Document Authoring](/guides/document-authoring/customize/spellcheck.md)