This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/document-authoring/customize-actions-and-toolbar.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Customize actions and the toolbar in Document Authoring

Customize actions and the toolbar

Markdown version of this page, suitable for AI agents and automation

Before you start, ensure the Document Authoring library is installed and running. Refer to the getting started 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 to provide an initial actions list. Start from defaultActions if you want to keep the standard editor commands:

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() to replace the current action list:

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() to read the current selection, and editor.insertContentAtCursor() to insert content at the cursor or replace an active range selection:

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:

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:

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 to set the initial toolbar layout. Start from defaultToolbarConfig if you want to keep most of the standard toolbar:

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:

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:

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