Skip to main content
React DOCX is a React renderer that outputs .docx files. Style with Tailwind classes. No third-party DOCX libraries. 
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)

​
What’s not supported

  • Charts
  • Footnotes/endnotes
  • Multi-column layouts
  • Text boxes and shapes
  • Floating elements
  • Embedded media
CSS properties without DOCX equivalents don’t work: opacity, z-index, flexbox, grid, box-shadow, transforms, gradients.

​
How it works

Same idea as react-dom or react-native, but renders to Open XML (the format behind .docx files). Components become document elements. Tailwind classes map to DOCX properties. The renderer handles XML generation, relationship tracking, and ZIP packaging.