Custom styles & branding

Load a styled .docx template to give documents your branding. The editor uses the styles defined in the document itself (headings, fonts, colors, spacing, and table styles) and preserves them when users save.

Templates can define:

• Heading styles (Heading1 to Heading9)
• Body text (Normal)
• Fonts and themes
• Table styles and the default table style

Any content users create or insert inherits those styles automatically.

Quick start

Create a .docx containing your brand styles, remove its content, and load it whenever a user starts a new document.

import { useEffect, useState } from 'react';
import { DocxEditor } from '@docx-editor.dev/react';
import '@docx-editor.dev/core/styles/editor.css';

export function BrandedEditor() {
  const [template, setTemplate] = useState<ArrayBuffer>();

  useEffect(() => {
    fetch('/templates/brand.docx')
      .then((r) => r.arrayBuffer())
      .then(setTemplate);
  }, []);

  return <DocxEditor document={template} />;
}

Create a template

Use a word processor

1. Create a document with your desired styles.
2. Define any table styles you use (see Tables).
3. Remove the document content.
4. Save the file as your template.

Headings and paragraph styles

The style dropdown is populated from the paragraph styles defined in the document. When a user applies a style, the editor uses the document's definition for fonts, colors, spacing, and the configured next style. For example, pressing Enter after a heading switches back to body text.

Set w:qFormat to surface a style in the dropdown, and w:semiHidden or w:hidden to keep one out.

Tables

Table styles defined in the document (borders, shading, banded rows, header-row formatting) render through the style cascade, including basedOn inheritance, and survive a round trip.

Newly inserted tables do not pick up a document default table style: Insert → Table authors an even grid with explicit single-line borders, so it renders the same in every document. Restyle it afterwards with the table border and fill controls.

Fonts

Provide brand fonts through the editor's fonts prop. loadFonts fetches the URLs you list and returns a fragment the editor both measures and paints with:

import { loadFonts } from '@docx-editor.dev/react';

const brand = await loadFonts({
  sources: [
    { url: '/fonts/CustomSans-Regular.ttf', family: 'Custom Sans', weight: 400, style: 'normal' },
    { url: '/fonts/CustomSans-Bold.ttf', family: 'Custom Sans', weight: 700, style: 'normal' },
  ],
});

<DocxEditor document={template} fonts={brand} />;

The font picker offers the families the document declares plus the ones you configure. See React props: Fonts for the prop and Fonts and measurement for hashes, failure handling, and on-demand loading.

A font that is only installed on the user's system or registered through your own @font-face rules affects painting, not measurement: the editor measures with the bytes you hand it and falls back to estimated metrics for families it has no bytes for.

Fonts embedded inside a .docx are loaded automatically: the editor de-obfuscates the embedded faces, renders with them, and lists them in the font picker. They are also preserved when saving.

Style preservation

The editor preserves existing style files (styles.xml, theme1.xml, settings.xml) rather than regenerating them. Custom styles, themes, fonts, and table defaults survive a full edit-and-save round trip.

Next steps

• Fonts and measurement: font sources and how they compose
• Word fidelity: what survives a round trip
• Props: fonts and the rest of the root props