Components

Twelve primitives plus the <Document> root. Compose them like any other React tree — they’re plain elements with __helixuiDocKind markers so the exporter can dispatch on type without circular imports.

<Document>

The root container. Owns page geometry, theme, file metadata, and the DOM preview wrapper.

<Document
  pageSize="letter"           // 'letter' | 'a4' | 'legal' | { w, h }
  orientation="portrait"      // 'portrait' | 'landscape'
  margins={{ top: 1, right: 1, bottom: 1, left: 1 }}
  theme={{ /* partial DocTheme */ }}
  meta={{ title, author, subject, keywords, company }}
  exportFileName="brief.docx"
  showPageBoundary             // dashed page outline in DOM preview
>
  …blocks…
</Document>

<DocSection>

Mid-document page-setup change. Each section becomes its own Section in the exported file. By default, a section starts on a new page.

<DocSection
  pageSize="letter"
  orientation="landscape"
  margins={{ top: 0.5, right: 0.5, bottom: 0.5, left: 0.5 }}
  pageBreakBefore                   // default true
>
  …blocks specific to this section…
</DocSection>

<Heading>

Word heading styles 1–6. Sizes derive from theme.headingFontSize unless you override via size.

<Heading level={1} align="center" id="overview">
  Overview
</Heading>

Prop	Type	Default
level	1 | 2 | 3 | 4 | 5 | 6	required
size	points	derived from theme.headingFontSize
align	'left' | 'center' | 'right' | 'justify'	undefined
color	DocColor	'ink'
id	string	undefined (becomes a bookmark)

<Paragraph>

A block of text. Children may be plain strings, <DocText>, <DocLink>, or any combination — they’re flattened into TextRuns on export.

<Paragraph
  align="justify"
  lineHeight={1.4}
  indent={0.25}
  spaceBefore={4}
  spaceAfter={6}
  style={{ size: 11, color: 'ink', font: 'body' }}
>
  Body copy with <DocText weight="bold">strong emphasis</DocText> and a
  <DocLink href="https://helixui.ai" external> link</DocLink>.
</Paragraph>

<DocText>

Inline run with full styling. Use inside <Paragraph>, <Heading>, or <DocListItem>.

Prop	Type	Notes
size	points	inherits paragraph size
weight	'regular' | 'medium' | 'semibold' | 'bold'	'bold' and 'semibold' both bold in docx
italic	boolean
underline	boolean
strike	boolean
color	DocColor	theme key, css var, hex, etc.
font	'heading' | 'body' | 'mono' | string
highlight	DocColor	mapped to nearest docx highlight enum
vertAlign	'sub' | 'super'	maps to subscript / superscript

<DocLink>

Inline hyperlink. Renders as a docx ExternalHyperlink with nested styled runs.

<DocLink
  href="https://helixui.ai"
  external               // adds target=_blank in the DOM preview
  weight="semibold"
  color="accent"
>
  helixui.ai
</DocLink>

<DocList> + <DocListItem>

Bulleted, numbered, check, or arrow lists. Items support per-level indentation.

<DocList type="check" size={11} indentStep={0.4}>
  <DocListItem>Top-level item</DocListItem>
  <DocListItem level={1}>Nested one level deeper</DocListItem>
  <DocListItem level={1}>Sibling at the nested level</DocListItem>
  <DocListItem>Back to root</DocListItem>
</DocList>

<DocList> prop	Type	Default
type	'disc' | 'number' | 'check' | 'arrow' | 'none'	'disc'
size	points	inherits body size
indentStep	inches	0.4

<DocListItem> prop	Type	Default
level	0 | 1 | 2 | 3	0
type	per-item bullet override	inherits from list

<DocTable>

Data table with optional header, zebra rows, and column widths.

<DocTable
  header={['Bet', 'Owner', 'Status']}
  rows={[
    ['Tokens',  'design',     'shipped'],
    ['Docs',    'docs guild', 'in flight'],
  ]}
  colWidths={[2.0, 2.0, 2.0]}   // inches
  striped
  bordered
  caption="Tracked in the planning doc"
/>

<DocImage>

Inline image. The exporter fetches the source and inlines it as base64. SVGs are exported as SVG with a tiny PNG fallback for legacy Word.

<DocImage
  src="/architecture.svg"
  alt="System diagram"
  w={6}                  // inches
  h={3.5}
  align="center"
  caption="High-level architecture"
/>

CORS matters — the source must be reachable from the page that runs the export. Local assets (/foo.png) work; cross-origin images need appropriate Access-Control-Allow-Origin headers.

<DocCodeBlock>

Mono-font block with light shading. Preserves whitespace and newlines.

<DocCodeBlock language="ts">
{`import { exportToDocx } from '@helixui/document';\n\nawait exportToDocx(<Brief />);`}
</DocCodeBlock>

<DocBlockquote>

Pull-quote with a colored left border and optional citation.

<DocBlockquote cite="— design lead, kickoff memo">
  If a model can introspect the system as easily as a human reads it,
  the system grows itself.
</DocBlockquote>

<DocHorizontalRule>

Standard thematic break.

<DocHorizontalRule />

<DocPageBreak>

Force a new page mid-flow without starting a new section.

<Heading level={2}>Appendix</Heading>
<DocPageBreak />
<Paragraph>Starts on its own page.</Paragraph>

Color references

Every color / highlight prop accepts:

• a theme key — 'brand' | 'success' | 'warning' | 'danger' | 'neutral' | 'ink' | 'paper' | 'subtle' | 'border' | 'accent'
• a CSS variable — '--helixui-color-...'
• any CSS color string — '#3b82f6', 'rgb(...)', 'oklch(...)'

The DOM preview honors them as CSS values. The DOCX exporter resolves them to concrete hex via a hidden canvas.