Configure the built-in toolbar

Compare three ways to shape the built-in toolbar, then add a focused version to the /sample.docx project from the Quickstart.

Try the toolbar configurations

Expand the Editor and switch between the three configurations:

1. Focus shows only the controls named in items, placed in the left, center, and right regions.
2. Remove starts with the default toolbar and removes Bold and Italic with excludeItems.
3. Add keeps the focused toolbar and appends an Add note action with customItems. Place the caret in the document, then run it to insert Review note: .

Switching configurations recreates the Editor from its current DOCX state because toolbar composition is a startup option. Edits and document mode remain; the current selection resets.

Build the focused toolbar

Vanilla needs separate toolbar and Editor mounts:

<div id="toolbar"></div>
<div id="editor"></div>

<script type="module" src="/src/main.ts"></script>

React's SuperDocEditor creates the toolbar mount for you. Add the focused configuration to the Editor setup:

import { SuperDoc, type ToolbarConfig } from 'superdoc';
import 'superdoc/style.css';

const toolbar = {
  container: '#toolbar',
  items: {
    left: ['undo', 'redo'],
    center: ['bold', 'italic', 'underline', 'link', 'image', 'table', 'table-actions'],
    right: ['document-mode', 'zoom'],
  },
  responsiveTo: 'container',
} satisfies ToolbarConfig;

function withImageMimeType(file: File): Blob {
  const type = file.type.toLowerCase();
  if (type === 'image/png' || type === 'image/jpeg' || type === 'image/jpg') return file;
  if (type) throw new Error('Choose a PNG or JPEG image.');
  if (/\.png$/i.test(file.name)) return file.slice(0, file.size, 'image/png');
  if (/\.jpe?g$/i.test(file.name)) return file.slice(0, file.size, 'image/jpeg');
  throw new Error('Choose a PNG or JPEG image.');
}

function handleImageUpload(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result));
    reader.onerror = () => reject(reader.error ?? new Error('Could not read image.'));
    reader.readAsDataURL(withImageMimeType(file));
  });
}

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  handleImageUpload,
  ui: { toolbar },
});

Reload the application. The toolbar should contain eleven controls across the three regions. Select text and choose Bold to confirm that the control follows the current selection.

Table inserts a table at the current selection. Table actions becomes available when the selection is inside a table; use it to add or remove rows and columns, merge or split cells, change borders, or remove the table.

Select Image to choose a local file. SuperDoc invokes handleImageUpload. These examples return data URLs, so the workflow needs no backend or temporary object URL. withImageMimeType keeps extension-accepted PNG and JPEG files insertable when the browser leaves file.type empty. SuperDoc immediately fetches object or HTTP URLs returned by a handler and embeds the image in the DOCX. The URL only needs to remain readable until that fetch completes. Same-origin URLs need no extra server configuration. For another origin, return a public or presigned URL that the browser can read without cross-origin cookies or custom authorization headers. Configure cross-origin requests (CORS) to allow the application's origin.

For reusable document fields rather than toolbar actions, Configure content controls.

Configure the toolbar

Choose a group, then choose a field. Each entry shows its type, default, and a configuration fragment you can copy. Leave container unset to let React's SuperDocEditor create the toolbar mount. Set it in either Vanilla or React when your application provides an external toolbar container.

Use items for a focused allowlist, excludeItems to remove a few controls from the default toolbar, and customItems to add application actions. Controls listed in items keep their built-in order within each region.

For a custom item, use command when it can run one built-in action directly. Use onSelect for registered commands or workflows that need more input; its context includes execute and executeAsync.

Keep satisfies ToolbarConfig from the examples. It checks control IDs, icon and string slots, font options, and custom item shapes without widening the object. Prefer one composition strategy instead of combining a long items allowlist with a long excludeItems list.

Check the narrow layout

responsiveTo: 'container' measures the toolbar mount instead of the browser window. With the default overflow: 'menu', controls that no longer fit move into the overflow menu. SuperDoc adds its trigger when needed; do not list it in items.

Resize the Editor to your narrowest supported width. Every required control should remain reachable, and the toolbar should not add horizontal page overflow. See Layout for document scaling, contained scrolling, and fullscreen behavior.

The toolbar reads state from the Editor. Controls become active or disabled as the selection, document mode, and current content change.

Continue to comments

Add the built-in comments UI and preserve comment threads in the exported DOCX.