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

​
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.