Custom styles and branding

DOCX styles control document content. Interface CSS controls the editor's appearance. Load a branded .docx template to set headings, fonts, colors, spacing, and table styles.

Load a branded template

Fetch the template and pass it as the 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} />;
}

<script setup lang="ts">
import { DocxEditor, useDocxSource } from '@docx-editor.dev/vue';
import '@docx-editor.dev/vue/styles.css';

const { document: template } = useDocxSource('/templates/brand.docx');
</script>

<template>
  <DocxEditor :document="template" />
</template>

Save preserves styles.xml, theme1.xml, and settings.xml instead of regenerating them.

Prepare document styles

1. Create a document with your styles, including Normal, Heading1 to Heading9, and table styles.
2. Remove the document content.
3. Save the file as your template.

Configure brand fonts

Pass brand fonts through the fonts prop, built with loadFonts. For sources, loading, and failures, see Fonts and measurement.

Limits

• The style picker does not filter w:qFormat, w:semiHidden, or w:hidden. To restrict it, see Document styles.
• New tables do not use the document's default table style.
• CSS @font-face rules and system fonts affect rendering only. They do not provide measurement bytes, so text uses estimated metrics.

See also

• Fonts and measurement
• Document styles
• Appearance