Document

Root element for every document. Contains one or more sections.

import { Document, Section, Paragraph } from "@cordel/react-docx";

const MyDocument = () => (
  <Document>
    <Section>
      <Paragraph>Hello</Paragraph>
    </Section>
  </Document>
);

Props

Prop	Type	Description
`children`	`ReactNode`	Section elements
`styles`	`DocumentStyles`	Default fonts and heading styles
`className`	`string`	Tailwind classes (inherited by children)
`theme`	`ThemeConfig`	Theme values for this document (colors, font sizes, font families)
`imageCompression`	`ImageCompression`	Default compression for images. Default `"print"`
`metadata`	`DocumentMetadata`	File properties: title, author, subject, keywords, revision, company
`trackChanges`	`boolean`	Record edits made in Word as tracked changes
`updateFieldsOnOpen`	`boolean`	Ask Word to update the table of contents and other fields on open. Default `true`
`lang`	`string`	Language for spelling and grammar checks, e.g. `"pt-BR"`
`customProperties`	`Record<string, string \| number \| boolean \| Date>`	Custom file properties (Word: File > Properties > Custom)
`watermark`	`string \| WatermarkOptions`	Diagonal text behind every page
`base`	`string \| Uint8Array`	A .docx/.dotx whose styles, theme, fonts and numbering the document uses
`fonts`	`FontDefinition[]`	Fonts to embed in the file

Theme per document

theme takes values in Tailwind’s theme.extend shape and adds them to the project’s tailwind.config. Use it when documents for different clients need different brand colors or fonts:

<Document
  theme={{
    colors: { brand: { DEFAULT: client.primaryColor, 50: client.tint } },
    fontFamily: { heading: [client.font, "sans-serif"] },
  }}
>
  <Section>
    <H1 className="text-brand font-heading">{client.name}</H1>
  </Section>
</Document>

Colors must be hex (#0b5fff or #abc). Themes are per render, so documents rendered at the same time with different themes do not affect each other.

Metadata

<Document
  metadata={{
    title: "Maintenance report",
    subject: "RF-2026-0147",
    author: "Maria Souza",
    keywords: ["maintenance", "boiler"],
    revision: 2,
    company: "ACME",
  }}
>

Word shows these under File > Info, and document management systems read them. created and modified dates are written only when you pass them, so the same input always produces the same file.

Language

<Document lang="pt-BR">

Word checks spelling and grammar in this language. Mark passages in another language with <Text lang="en-US">.

Custom properties

<Document customProperties={{ Contrato: "CT-2026-17", Revisao: 3, Aprovado: true }}>

Word shows them in File > Properties > Custom, and document management systems can index them. Names starting with ReactDocx. are reserved for provenance.

Watermark

<Document watermark="CONFIDENCIAL">
<Document watermark={{ text: "RASCUNHO", color: "#FF0000", opacity: 0.3, font: "Arial" }}>

The same watermark Word’s Design > Watermark creates: people can change or remove it there. It is placed in every section’s header; sections without a header get one.

Base document and fonts

<Document base="modelo-empresa.dotx" fonts={[{ name: "Montserrat", regular: "fonts/Montserrat-Regular.ttf" }]}>

See Word templates and fonts.

Word settings

<Document trackChanges updateFieldsOnOpen={false}>

trackChanges turns on Review > Track Changes, including formatting changes, so edits made after generation are recorded.
updateFieldsOnOpen (default true) makes Word refresh the table of contents, page references and sequence numbers when the document opens. Word asks the reader to confirm. Set it to false if the prompt is unwanted; the fields then keep the values React DOCX computed until someone updates them.

Document styles

Configure default fonts and heading styles:

<Document
  styles={{
    defaultFont: {
      name: "Arial",
      size: 11,
    },
    heading1: {
      font: "Arial",
      size: 24,
      bold: true,
      color: "1F4E78",
    },
    heading2: {
      font: "Arial",
      size: 18,
      bold: true,
      color: "2E75B5",
    },
  }}
>
  <Section>
    <H1>Uses heading1 style</H1>
    <H2>Uses heading2 style</H2>
    <Paragraph>Uses defaultFont</Paragraph>
  </Section>
</Document>

Font config

interface FontConfig {
  name?: string;  // Font family
  size?: number;  // Size in points
}

Heading config

interface HeadingStyleConfig {
  font?: string;
  size?: number;
  color?: string;   // Hex without #
  bold?: boolean;
  italic?: boolean;
}

Style inheritance

Text classes cascade to children (margins, padding, backgrounds and borders do not; see Inheritance):

<Document className="font-serif text-gray-800">
  <Section>
    <Paragraph>Inherits font-serif and text-gray-800</Paragraph>
    <Paragraph className="text-blue-600">
      Inherits font-serif, overrides color
    </Paragraph>
  </Section>
</Document>

Multiple sections

<Document>
  <Section>
    <H1>Title Page</H1>
  </Section>

  <Section margins={{ top: "0.5in" }}>
    <Paragraph>Main content</Paragraph>
  </Section>

  <Section pageSize={{ orientation: "landscape" }}>
    <Paragraph>Wide content</Paragraph>
  </Section>
</Document>

Each section can have different margins, page sizes, headers, and footers.

Getting started

Components

Props

Theme per document

Metadata

Language

Custom properties

Watermark

Base document and fonts

Word settings

Document styles

Font config

Heading config

Style inheritance

Multiple sections

​Props

​Theme per document

​Metadata

​Language

​Custom properties

​Watermark

​Base document and fonts

​Word settings

​Document styles

​Font config

​Heading config

​Style inheritance

​Multiple sections

Props

Theme per document

Metadata

Language

Custom properties

Watermark

Base document and fonts

Word settings

Document styles

Font config

Heading config

Style inheritance

Multiple sections