Skip to main content
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

PropTypeDescription
childrenReactNodeSection elements
stylesDocumentStylesDefault fonts and heading styles
metadataDocumentMetadataDocument metadata (title, author, etc.)
classNamestringTailwind classes (inherited by children)

​
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;
}

​
Metadata

Embed metadata in the document’s core properties: 
<Document
  metadata={{
    title: "Invoice #1234",
    creator: "Acme Corp",
    subject: "Monthly billing",
    description: "Invoice for January 2024",
    keywords: "invoice, billing",
    category: "Finance",
  }}
>
  <Section>
    <Paragraph>Content</Paragraph>
  </Section>
</Document>

​
DocumentMetadata

interface DocumentMetadata {
  title?: string;
  subject?: string;
  creator?: string;
  description?: string;
  keywords?: string;        // Comma-separated
  lastModifiedBy?: string;
  category?: string;
}
All fields are optional. Only provided values are written to the file.

​
Style inheritance

Classes cascade to children: 
<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.