Quick start

my-docx-project/
├── src/
│   └── document.tsx
├── package.json
└── tsconfig.json

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

export const MyDocument = () => (
  <Document>
    <Section>
      <H1>Hello</H1>
      <Paragraph>First document.</Paragraph>
    </Section>
  </Document>
);

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

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>

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

<Image
  src={fs.readFileSync("./logo.png")}
  alt="Logo"
  width="2in"
  height="2in"
/>