---
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-06-10T14:59:56.775Z"
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

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',
  });
}

```

For richer roundtripping, use `format: 'fragment'` when reading and inserting selection content.

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

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

- [Agent skill](/guides/document-authoring/agent-skill.md)
- [Enhancing document authoring with CSP guidelines](/guides/document-authoring/content-security-policy-and-firewall-rules.md)
- [Use copy/paste and HTML interoperability](/guides/document-authoring/copy-paste-and-html-interoperability.md)
- [Document Authoring SDK](/guides/document-authoring.md)
- [Changelog for Document Authoring SDK](/guides/document-authoring/changelog.md)
- [Get started with Document Authoring guides](/guides/document-authoring/intro.md)
- [Use events and integration APIs](/guides/document-authoring/events-and-integration.md)
- [How to self-host Document Authoring assets](/guides/document-authoring/self-hosting-assets.md)