Build a custom UI

Build a custom UI when your product needs focused controls or workflows around a DOCX document. SuperDoc continues to render the document and handle editing. Your application renders the toolbar, panels, and other controls it needs.

A SuperDoc editor renders a DOCX document in the centre. A toolbar above it and a comments panel beside it are rendered by the application. Reactive state — selection, command state, and comments — flows out of the editor to those controls, and commands and document operations flow back in.

Your toolbar

SuperDoc renders the document, layout, selection, and editing

Your comments panel

renders from the comments snapshot

↑ state out — selection, command state, comments

↓ actions in — commands and document operations

You can replace one surface or the complete interface. For example, keep the built-in toolbar while rendering your own comments panel, or set ui: false and render every control yourself.

Choose the right surface

These surfaces work together. Setting ui: { comments: false } removes SuperDoc's comments interface, but your custom panel can still use superdoc.ui.comments. The interaction configuration decides whether that panel may read, write, or resolve comments.

superdoc.ui is the controller. Import its types from superdoc/ui. React applications use the provider and hooks from superdoc/ui/react, and Vue applications use the composables from superdoc/ui/vue. Each binding exposes the same controller.

Try one custom control

Select text in the document, then choose Bold. The application-owned button observes the command's live state and executes the action through the same controller as SuperDoc's built-in toolbar.

Expand

1. 1 Observeenabled · active
2. 2 Renderdisabled · aria-pressed
3. 3 ExecuteexecuteAsync()
4. 4 Read outcomeboolean or receipt

The control follows one reusable pattern: observe state, render it, execute the action, and inspect the result. The custom UI example contains the complete runnable project.

Follow the core path

If this is your first custom UI, read these guides in this order:

1. Build your first custom control and move Bold into your application.
2. Keep commands and controls in sync as the selection changes.
3. Build a custom toolbar with a toggle and value pickers.
4. Add document controls for zoom and DOCX download.

Only the first guide is a prerequisite. It establishes the controller setup the rest build on, so you can stop after any step. Step 2 explains how command state stays in sync and asks you to change nothing; steps 3 and 4 each replace that setup's Editor code rather than the guide before it.

Steps 3 and 4 take the toolbar in different directions and are alternatives rather than a sequence: the custom toolbar owns the toolbar markup outright, while document controls keep SuperDoc's toolbar and remove only Zoom. Read both before combining them.

Choose a workflow

After the first control, choose only the workflows your product needs. These guides are independent unless a page names a prerequisite.

Use Dialogs and surfaces when your application only needs content in a SuperDoc-managed layer. Use Theming to apply product colors to SuperDoc UI.