Skip to main content

Quick Start

Minimal example​

Every docxio document starts with a <document> root containing one or more <section> elements. Sections hold paragraphs, tables, and other block-level content.

/** @jsxImportSource docxio */
import { render } from "docxio";

const doc = (
  <document title="Hello">
    <section>
      <paragraph><run bold>Hello, World!</run></paragraph>
    </section>
  </document>
);

const bytes = await render(doc);

The render function returns a Uint8Array containing the .docx file bytes.

Write to a file​

Bun​

await Bun.write("hello.docx", bytes);

Node.js​

import { renderToFile } from "docxio";

await renderToFile(doc, "hello.docx");

Or use the buffer helper:

import { renderToBuffer } from "docxio";
import { writeFileSync } from "node:fs";

const buf = await renderToBuffer(doc);
writeFileSync("hello.docx", buf);

Render to a Blob (browser)​

import { renderToBlob } from "docxio";

const blob = await renderToBlob(doc);
const url = URL.createObjectURL(blob);
// Trigger download via an <a> element

Render to base64​

import { renderToBase64 } from "docxio";

const base64 = await renderToBase64(doc);

Adding structure​

A more complete example with headings, styled text, and a table:

/** @jsxImportSource docxio */
import { render } from "docxio";

const doc = (
  <document creator="docxio" title="Report">
    <section>
      <heading level={1}><run>Quarterly Report</run></heading>
      <paragraph>
        <run>Revenue increased by </run>
        <run bold color="2E74B5">15%</run>
        <run> this quarter.</run>
      </paragraph>
      <table borders="single" width={7500}>
        <row>
          <cell shading={{ fill: "D9E1F2" }}>
            <paragraph><run bold>Metric</run></paragraph>
          </cell>
          <cell shading={{ fill: "D9E1F2" }}>
            <paragraph><run bold>Value</run></paragraph>
          </cell>
        </row>
        <row>
          <cell><paragraph><run>Revenue</run></paragraph></cell>
          <cell><paragraph><run>$1.2M</run></paragraph></cell>
        </row>
      </table>
    </section>
  </document>
);

const bytes = await render(doc);

Next steps​