Toolbar

The toolbar gives your users formatting controls for document editing. You can use the built-in UI or go headless and build your own.

Choose your approach

	Built-in	Headless
Setup	toolbar: '#toolbar' — renders a ready-made UI	createHeadlessToolbar() — you build the UI
Customization	Swap icons, exclude buttons, reorder groups	Full control — any component library, any layout, any framework
Framework	Renders its own DOM (works everywhere)	React, Vue, Svelte, vanilla JS — your choice
Best for	Standard document editing, quick prototypes	Design system integration, embedded editors, custom UX

Quick start

Built-in

Point toolbar at a container element. SuperDoc renders the UI for you.

new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  toolbar: '#toolbar',
});

Headless

Create a headless toolbar. You get state snapshots and an execute method — wire them to any UI you want.

import { createHeadlessToolbar } from 'superdoc/headless-toolbar';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
});

const toolbar = createHeadlessToolbar({
  superdoc,
  commands: ['bold', 'italic', 'underline', 'font-size', 'undo', 'redo'],
});

toolbar.subscribe(({ snapshot }) => {
  // Update your UI with snapshot.commands
});

toolbar.execute('bold');

Learn more

Built-in toolbar

Configuration, custom buttons, responsive behavior

Headless toolbar

API reference, command table, helpers

Framework examples

React + shadcn, React + MUI, Vue + Vuetify, Svelte, vanilla JS