Introduction

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

const Invoice = () => (
  <Document>
    <Section>
      <H1 className="text-blue-700">Invoice #1234</H1>
      <Paragraph className="mt-4">
        <Text className="font-bold">Total: </Text>$420.00
      </Paragraph>
    </Section>
  </Document>
);

​

What’s supported

• Headings (H1-H6)
• Text formatting (bold, italic, underline, strikethrough)
• Lists (ordered, unordered, nested)
• Tables (colspan, rowspan, borders, cell padding)
• Images (png, jpg, etc. with sizing and cropping)
• Links (external and internal anchors)
• Sections (headers, footers, page margins, page size)
• Page numbers
• Table of Contents
• Variables (dynamic content with useVariables hook)
• Footnotes, check boxes, watermarks, signature blocks and Markdown from data
• The company’s Word template: styles, theme, fonts and numbering from a .dotx
• Embedded fonts and document language
• Provenance and audit of edits made in Word

​

What’s not supported

• Charts
• Endnotes
• Multi-column layouts
• Text boxes and shapes
• Floating elements other than images at the left or right edge
• Embedded media

​

How it works