Skip to main content

​
Create a project

npx create-docx@latest
cd my-docx-project

​
Generate a document

npm run build
Opens output.docx.

​
Project structure

my-docx-project/
├── src/
│   └── document.tsx
├── package.json
└── tsconfig.json
src/document.tsx is your document: 
import { Document, Section, H1, Paragraph } from "@cordel/react-docx";

export const MyDocument = () => (
  <Document>
    <Section>
      <H1>Hello</H1>
      <Paragraph>First document.</Paragraph>
    </Section>
  </Document>
);
Every document needs a Document root and at least one Section.

​
Styling

Tailwind classes work: 
<H1 className="text-blue-700">Blue heading</H1>

<Paragraph className="mt-4">
  <Text className="font-bold">Bold</Text>
  <Text className="italic">Italic</Text>
  <Text className="text-red-500">Red</Text>
</Paragraph>

​
Tables

import { Table, Thead, Tbody, Tr, Th, Td } from "@cordel/react-docx";

<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2 bg-gray-100">Product</Th>
      <Th className="border p-2 bg-gray-100">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>

​
Images

import { Image } from "@cordel/react-docx";
import fs from "node:fs";

<Image
  src={fs.readFileSync("./logo.png")}
  alt="Logo"
  width="2in"
  height="2in"
/>
Supports in, cm, mm, pt, px.

​
Next

Tailwind

Supported classes and custom config

Rendering

Output to file, buffer, or stream

Components

All components and props