### Start Local Development Server

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/quickstart.mdx

This command initiates the local development server for previewing documentation changes. It requires the Mintlify CLI to be installed globally. Run this command from the root directory of your documentation project, where the 'mint.json' file is located.

```bash
mintlify dev
```

--------------------------------

### Install htmldocs Packages (npm, pnpm, yarn, bun)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/getting-started.mdx

Installs the necessary htmldocs packages for React and rendering into the project using the specified package manager. These packages are required for manual setup.

```bash
npm install htmldocs @htmldocs/react @htmldocs/render
```

```bash
pnpm add htmldocs @htmldocs/react @htmldocs/render
```

```bash
yarn add htmldocs @htmldocs/react @htmldocs/render
```

```bash
bun add htmldocs @htmldocs/react @htmldocs/render
```

--------------------------------

### Start htmldocs Development Server (npm, pnpm, yarn, bun)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/getting-started.mdx

Starts the htmldocs development server, which provides a live preview of the documents in the browser. This command is typically run after initialization or manual setup.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

--------------------------------

### Install Mintlify CLI for Local Preview

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/quickstart.mdx

This command installs the Mintlify Command Line Interface globally, enabling local previewing of documentation changes. Ensure Node.js and npm are installed. After installation, navigate to your documentation's root directory and run 'mintlify dev'.

```bash
npm i -g mintlify
```

--------------------------------

### Initialize htmldocs Project

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Scaffolds a new htmldocs project, copies starter templates, sets up package.json, installs dependencies including Playwright, and creates a default documents directory. Navigate to the project directory and run 'npm run dev' to start the development server.

```bash
npx htmldocs@latest init my-project
cd my-project
npm run dev
```

--------------------------------

### Add htmldocs Dev Script to package.json

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/getting-started.mdx

Adds a 'dev' script to the package.json file to easily start the htmldocs development server. This script uses npx to execute the htmldocs dev command.

```json
{
    "scripts": {
        "dev": "npx htmldocs@latest dev"
    }
}
```

--------------------------------

### Start htmldocs Local Development Server CLI

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Starts a local development server that watches files and automatically rebuilds document templates on changes. Login is not required. Supports various package managers.

```npm
npx htmldocs@latest dev
```

```pnpm
pnpx htmldocs@latest dev
```

```yarn
yarn dlx htmldocs@latest dev
```

```bun
bunx htmldocs@latest dev
```

--------------------------------

### htmldocs Document Template (React/TypeScript)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/getting-started.mdx

A sample React component demonstrating how to create a document template for htmldocs. It includes importing necessary components, rendering Markdown content, and setting up a footer with page numbers.

```tsx
import { Document, Footer } from "@htmldocs/react"
import MarkdownIt from 'markdown-it'

import "~/index.css"

const MARKDOWN_CONTENT = "\n# The Art of Programming\n\n## Chapter 1: Fundamentals\n\nProgramming is both a science and an art. It requires logical thinking and creative problem-solving. In this book, we will explore the principles that make software development a fascinating discipline.\n\n### 1.1 The Programming Mindset\n\nTo become an effective programmer, one must develop a particular way of thinking. This includes:\n\n- Breaking down complex problems into manageable parts\n- Thinking algorithmically about solutions\n- Understanding data structures and their applications\n- Embracing continuous learning and adaptation\n\nThe journey of a programmer is one of constant growth and discovery.\n"

const md = new MarkdownIt({ html: true })

function Book() {
  const html = md.render(MARKDOWN_CONTENT)
  
  return (
    <Document size="6in 9in" orientation="portrait" margin="0.75in">
      <article className="prose max-w-none font-serif">
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </article>

      <Footer 
        position="bottom-center"
        className="font-serif text-sm"
        children={({ currentPage }) => currentPage}
        marginBoxStyles={{
          marginBottom: '0.25in',
        }}
      />
    </Document>
  )
}

Book.documentId = "book"

export default Book
```

--------------------------------

### Full Document Example with Spacer

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/spacer.mdx

An example of integrating the Spacer component within a full document structure using React. This snippet illustrates creating a document with a title, page content, and various sections separated by dynamically sized vertical spaces.

```jsx
import Document from './Document';
import Page from './Page';
import Head from './Head';
import Spacer from './Spacer';

const MyDocument = () => (
  <Document>
    <Head>
      <title>My Document</title>
    </Head>
    <Page>
      <h1>Welcome to My Document</h1>
      <Spacer height={20} />
      <p>This is the first paragraph of my document.</p>
      <Spacer height={30} />
      <h2>Section 1</h2>
      <Spacer height={15} />
      <p>Content for section 1 goes here.</p>
      <Spacer height={50} />
      <h2>Section 2</h2>
      <Spacer height={15} />
      <p>Content for section 2 goes here.</p>
    </Page>
  </Document>
);

export default MyDocument;
```

--------------------------------

### Start htmldocs Development Server

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Starts a local preview server with hot reloading for rapid development of document templates. It watches for file changes and automatically rebuilds templates. The preview interface is accessible at http://localhost:3000.

```bash
htmldocs dev --dir ./documents --port 3000
```

--------------------------------

### Page Component Usage Example (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/page.mdx

Demonstrates how to use the Page component to structure content across multiple pages within a Document component. It requires importing Document and Page components from their respective modules. The example shows creating two distinct pages with headings and paragraphs.

```jsx
import Document from './Document';
import Page from './Page';

const MyDocument = () => (
  <Document size="A4" orientation="portrait">
    <Page>
      <h1>My Document Title</h1>
      <p>This is the content of my first page.</p>
    </Page>
    <Page>
      <h2>Second Page</h2>
      <p>This is the content of my second page.</p>
    </Page>
  </Document>
);
```

--------------------------------

### Install Resend Dependency with Package Managers

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/integrations/resend.mdx

Installs the Resend library using various package managers like npm, pnpm, yarn, and bun. This is a prerequisite for using Resend in your project.

```bash
npm install resend
```

```bash
pnpm install resend
```

```bash
yarn install resend
```

```bash
bun install resend
```

--------------------------------

### Legal Landscape Document Example

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/document.mdx

Provides an example of creating a legal-sized document in landscape orientation with a 0.5-inch margin. This demonstrates how to adapt the Document component for varied paper sizes and orientations, including landscape.

```jsx
import Document from './Document';

const LegalLandscape = () => (
  <Document size="legal" orientation="landscape" margin="0.5in">
    <h1>Legal Landscape Document</h1>
    <p>This is a legal size landscape document with 0.5 inch margins.</p>
  </Document>
);
```

--------------------------------

### Initialize htmldocs Project

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/README.md

Command to create a new htmldocs project. This command scaffolds a new project, setting up the necessary files and configurations for starting document generation with htmldocs.

```shell
npx htmldocs@latest init
```

--------------------------------

### MarginBox Example: Watermark (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/margin-box.mdx

Shows how to create a watermark using the MarginBox component, positioned in the middle of the left margin. This example applies specific styles for font, color, size, and rotation to the content.

```jsx
<MarginBox 
  position="left-middle"
  runningName="watermark"
  style={{
    fontFamily: 'Arial, sans-serif',
    color: 'rgba(0, 0, 0, 0.1)',
    fontSize: '24px',
    transform: 'rotate(-90deg)'
  }}
>
  <div>CONFIDENTIAL</div>
</MarginBox>
```

--------------------------------

### Spacer Component Usage Examples

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/spacer.mdx

Demonstrates how to use the Spacer component for both vertical and horizontal spacing. The component accepts 'height' for vertical spacing and 'width' for horizontal spacing, which can be numbers (pixels), strings (other units), or booleans (for 100%).

```jsx
<Spacer height={50} />
```

```jsx
<Spacer width={100} />
```

--------------------------------

### Dynamic Invoice Template Generation with htmldocs (TSX)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/introduction.mdx

This example demonstrates how to create a dynamic invoice template using htmldocs. It showcases passing customer and item data as props to a custom 'Invoice' component, enabling the generation of multiple invoices with varying information. The code relies on the htmldocs JSX templating system for rendering dynamic content.

```tsx
<Invoice 
  customer={{
    name: "John Doe",
    address: "456 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
    phone: "123-456-7890",
  }}
  items={[
    {
      name: "Website Development",
      description: "Frontend implementation with React",
      price: 2000.00,
      quantity: 1
    },
    {
      name: "UI/UX Design",
      description: "Custom design system creation",
      price: 1500.00,
      quantity: 1
    }
  ]}
/>
```

--------------------------------

### Document Component Usage Example

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/document.mdx

Demonstrates the basic usage of the Document component to create a structured document layout. It sets the document size to A4, orientation to portrait, and applies a margin. The component accepts children, such as headings and paragraphs, to define the document's content.

```jsx
import Document from './Document';

const MyDocument = () => (
  <Document size="A4" orientation="portrait" margin="0.39in">
    <h1>My Document Content</h1>
    <p>This is the content of my document.</p>
  </Document>
);
```

--------------------------------

### Load and Render Markdown Content Server-Side (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/static-content.mdx

Provides a complete example of loading Markdown content from a static file server-side using Node.js and rendering it as HTML within a React document template using the `markdown-it` library.

```tsx
import { Document } from "@htmldocs/react"
import MarkdownIt from 'markdown-it'
import fs from 'node:fs'
import path from "path"

const content = fs.readFileSync(
  path.join(process.env.DOCUMENTS_STATIC_PATH ?? '', 'content.md'),
  'utf-8'
)

const md = new MarkdownIt({ html: true })

function MyDocument() {
  const html = md.render(content)
  
  return (
    <Document>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </Document>
  )
}
```

--------------------------------

### Render Invoice Component with Dynamic Data (React/TypeScript)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/README.md

Example of rendering a React component for an invoice, demonstrating how to pass dynamic customer and item data as props. This showcases htmldocs' ability to create dynamic documents using JSX templating.

```tsx
<Invoice 
  customer={{
    name: "John Doe",
    address: "456 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
    phone: "123-456-7890",
  }}
  items={items}
/>
```

--------------------------------

### MarginBox Example: Document Title Header (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/margin-box.mdx

Illustrates how to use MarginBox for a document title header, specifically on even pages. This example includes styling for italicized, gray text, and applies it to the top-right margin.

```jsx
<MarginBox 
  position="top-right"
  runningName="document-title"
  pageType="even"
  style={{ 
    fontStyle: 'italic',
    color: '#666'
  }}
>
  {documentTitle}
</MarginBox>
```

--------------------------------

### A4 Portrait Document Example

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/document.mdx

Illustrates how to configure the Document component for an A4 size document in portrait orientation with a 1-inch margin. This snippet showcases the flexibility in setting specific dimensions and margins for different document types.

```jsx
import Document from './Document';

const A4Portrait = () => (
  <Document size="A4" orientation="portrait" margin="1in">
    <h1>A4 Portrait Document</h1>
    <p>This is an A4 portrait document with 1 inch margins.</p>
  </Document>
);
```

--------------------------------

### Reinstall Mintlify Dependencies (bash)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/README.md

Reinstalls project dependencies for Mintlify. This command is useful for troubleshooting when 'mintlify dev' is not running correctly.

```bash
mintlify install
```

--------------------------------

### Initialize htmldocs Project CLI

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Initializes a new htmldocs project in the current directory. Supports various package managers like npm, pnpm, yarn, and bun.

```npm
npx htmldocs@latest init
```

```pnpm
pnpx htmldocs@latest init
```

```yarn
yarn dlx htmldocs@latest init
```

```bun
bunx htmldocs@latest init
```

--------------------------------

### Display htmldocs CLI Help

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Shows all available commands and options for the htmldocs CLI. Supports multiple package managers.

```npm
npx htmldocs@latest --help
```

```pnpm
pnpx htmldocs@latest --help
```

```yarn
yarn dlx htmldocs@latest --help
```

```bun
bunx htmldocs@latest --help
```

--------------------------------

### Define Document ID in Template

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/publishing-to-the-cloud.mdx

Example of how to define a unique `documentId` for a document template in TypeScript. This ID is crucial for publishing and referencing the template.

```tsx
Invoice.documentId = "invoice";
export default Invoice;
```

--------------------------------

### React: Static Footer Content

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/footer.mdx

Illustrates how to insert static content into the footer, replacing the default page numbering. This example includes copyright information and a 'Confidential' label, arranged using flexbox.

```jsx
<Footer>
  <div style={{ 
    display: 'flex', 
    justifyContent: 'space-between' 
  }}>
    <span>© 2024 Company Name</span>
    <span>Confidential</span>
  </div>
</Footer>
```

--------------------------------

### Build htmldocs Document for Production

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Compiles a document template into a production-ready bundle. This includes bundling React components with esbuild, processing Tailwind CSS, minifying output, zipping static assets, and outputting to the 'dist' directory. Source maps are included for debugging.

```bash
htmldocs build ./documents/invoice.tsx
```

--------------------------------

### React: Custom Page Number Formatting in Footer

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/footer.mdx

Shows how to customize page number display using the function-as-children pattern. The function receives currentPage and totalPages, allowing for dynamic formatting. This example uses a monospace font.

```jsx
<Footer>
  {({ currentPage, totalPages }) => (
    <div style={{ fontFamily: 'monospace' }}>
      [{currentPage} / {totalPages}]
    </div>
  )}
</Footer>
```

--------------------------------

### Define Dynamic Document Template with Props - React JSX

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/template-variables.mdx

Defines a React component for an invoice that accepts dynamic customer name and item details as props. It uses the htmldocs/react Document component to structure the output. Ensure @htmldocs/react is installed as a dependency.

```tsx
import { Document } from "@htmldocs/react";

interface InvoiceProps {
  customerName: string;
  items: {
    name: string;
    quantity: number;
    price: number;
  }[];
}

function Invoice({ customerName, items }: InvoiceProps) {
  return (
    <Document>
      <h1>Invoice for {customerName}</h1>
      <div className="items">
        {items.map((item, index) => (
          <div key={index} className="item">
            <span>{item.name}</span>
            <span>{item.quantity}</span>
            <span>${item.price}</span>
          </div>
        ))}
      </div>
    </Document>
  );
}

export default Invoice;
```

--------------------------------

### Define Document Preview Props in React

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Demonstrates how to define specific props for a document's preview using a 'PreviewProps' static property on the default export in a React component.

```jsx
export default function Document(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

Document.PreviewProps = {
  title: "Preview Title",
  content: "This is preview content",
};
```

--------------------------------

### Authenticate with htmldocs Cloud

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/publishing-to-the-cloud.mdx

Logs in to the htmldocs cloud platform, which is necessary before publishing templates. This command opens a browser for authentication and securely stores credentials.

```bash
npx htmldocs@latest login
```

--------------------------------

### Publish htmldocs Document to Cloud CLI

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Publishes a specified document file to the htmldocs cloud for API use. Requires prior authentication via the 'login' command. Supports multiple package managers.

```npm
npx htmldocs@latest publish <file>
```

```pnpm
pnpx htmldocs@latest publish <file>
```

```yarn
yarn dlx htmldocs@latest publish <file>
```

```bun
bunx htmldocs@latest publish <file>
```

--------------------------------

### Custom Headers and Footers with MarginBox in React

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Illustrates the use of the MarginBox component for implementing custom headers and footers in specific margin areas. MarginBox offers extensive positioning options and requires a unique `runningName` for each instance.

```tsx
import { Document, Page, MarginBox } from "@htmldocs/react";

function CustomMargins() {
  return (
    <Document size="A4" orientation="portrait" margin="1in">
      <MarginBox
        position="top-left"
        runningName="company-logo"
        className="text-sm"
        marginBoxStyles={{ padding: "0.5in" }}
      >
        <img src="/static/logo.png" alt="Logo" className="h-12" />
      </MarginBox>

      <MarginBox
        position="top-right"
        runningName="document-date"
        className="text-sm text-gray-500"
        pageType="odd"
      >
        {new Date().toLocaleDateString()}
      </MarginBox>

      <Page className="p-8">
        <h1>Annual Report</h1>
        <p>Content goes here...</p>
      </Page>
    </Document>
  );
}

export default CustomMargins;
```

--------------------------------

### Authenticate htmldocs CLI with Cloud

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/cli.mdx

Authenticates the CLI with the htmldocs cloud service, enabling document publishing. Supports multiple package managers.

```npm
npx htmldocs@latest login
```

```pnpm
pnpx htmldocs@latest login
```

```yarn
yarn dlx htmldocs@latest login
```

```bun
bunx htmldocs@latest login
```

--------------------------------

### Access Static Content on Client-Side (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/static-content.mdx

Demonstrates how to reference static files, such as images, within client-side components using their absolute path from the static directory.

```tsx
// Access static content on the client-side
<img src="/static/logo.png" />
```

--------------------------------

### Publish Document Template

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/publishing-to-the-cloud.mdx

Publishes a specified document template file to the htmldocs cloud. Ensure you are in the root of your project and the template has a unique `documentId`.

```bash
npx htmldocs@latest publish ./documents/templates/Invoice.tsx
```

--------------------------------

### Spacer Component vs. LaTeX Spacing

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/spacer.mdx

Compares the usage of the Spacer component with its LaTeX equivalent. This highlights the flexibility of Spacer in terms of units and responsiveness compared to LaTeX's fixed units.

```jsx
<Spacer height={20} />
```

```latex
\vspace{20pt}
```

--------------------------------

### CSS for Print Footers

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/examples/debug-render.html

This CSS snippet configures running footer elements for print documents. It defines the position of the footer, applies it to the bottom-center margin box, and styles page counters. It also includes styles for hiding page numbers if not intended for use.

```css
.print-footer {
  position: running(footer);
}

@page {
  @bottom-center {
    content: element(footer);
    margin-bottom: 0.5in;
  }
}

.print-footer .page-counter::after {
  content: counter(page);
}

.print-footer .pages-counter::after {
  content: counter(pages);
}

.print-footer .page-number {
  display: inline;
}

.print-footer {
  text-align: center;
  vertical-align: bottom;
}

.print-footer {
}
```

--------------------------------

### React: Basic Footer Usage

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/footer.mdx

Demonstrates the basic usage of the Footer component in a React application. By default, it renders 'Page X of Y'. No external dependencies are required beyond React.

```jsx
import { Footer } from "@htmldocs/react";

export default function Document() {
  return (
    <Footer />  // Renders "Page X of Y" by default
  );
}
```

--------------------------------

### Set Authorization Header using Bearer Token

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/api-reference/authorization.mdx

Demonstrates how to include your API key in the Authorization header for API requests. This uses the Bearer token format. Ensure your API key is obtained from the htmldocs.com dashboard and is scoped to your team.

```http
Authorization: Bearer YOUR_API_KEY
```

--------------------------------

### Basic MarginBox Usage (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/components/margin-box.mdx

Demonstrates the fundamental usage of the MarginBox component to display content in the top-right margin. It requires importing the component and defining its position and a running name for identification.

```jsx
import { MarginBox } from "@htmldocs/react";

export default function Document() {
  return (
    <MarginBox 
      position="top-right" 
      runningName="document-title"
    >
      Quarterly Report
    </MarginBox>
  );
}
```

--------------------------------

### Generate Document via API

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/publishing-to-the-cloud.mdx

Generates a document using the htmldocs REST API. This requires an API key and a POST request to the generation endpoint with document variables. The `format` can be set to 'json'.

```bash
curl -X POST https://api.htmldocs.com/api/documents/invoice \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "format": "json",
    "props": {
      "billedTo": {
        "name": "Josiah Zhang",
        "address": "123 Elm Street",
        "city": "Anytown",
        "state": "CA",
        "zip": "12345",
        "phone": "123-456-7890"
      },
      "yourCompany": {
        "name": "Your Company",
        "address": "456 Banana Rd.",
        "city": "San Francisco",
        "state": "CA",
        "zip": "94107",
        "taxId": "00XXXXX1234X0XX",
        "phone": "123-456-7890",
        "email": "hello@email.com"
      },
      "services": [
        {
          "name": "Design",
          "description": "Website redesign and branding",
          "quantity": 1,
          "rate": 1000
        },
        {
          "name": "Consulting",
          "description": "Technical architecture review",
          "quantity": 2,
          "rate": 1200
        }
      ]
    }
  }'
```

--------------------------------

### renderAsync Function

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Converts React components into complete HTML documents, suitable for PDF generation. It handles Paged.js polyfill, CSS injection, and head content management.

```APIDOC
## renderAsync

### Description
Converts a React component into a complete HTML document string, ready for further processing like PDF generation. It includes Paged.js for pagination, embeds styles, and manages head content.

### Method
`renderAsync(component, documentCss?, headContents?)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **component** (ReactElement) - Required - The React element to render.
- **documentCss** (string) - Optional - Additional CSS to inject into the HTML document.
- **headContents** (string) - Optional - Extra content to include in the HTML's `<head>` section.

### Request Example
```javascript
import { renderAsync } from "@htmldocs/render";
import Invoice from "./Invoice";

async function generateInvoiceHTML() {
  const component = (
    <Invoice
      invoiceNumber="INV-001"
      billedTo={{ name: "Client Name", address: "123 Main St", city: "NYC" }}
      services={[{ name: "Service", description: "Work", quantity: 1, rate: 100 }]} 
    />
  );

  const html = await renderAsync(component);
  return html;
}
```

### Response
#### Success Response (string)
- **html** (string) - A string containing the complete HTML document.

#### Response Example
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Invoice</title>
  <style>/* Embedded styles */</style>
  <!-- Other head contents -->
</head>
<body>
  <!-- Rendered component HTML -->
</body>
</html>
```
```

--------------------------------

### Read Static Content Server-Side (Node.js)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/static-content.mdx

Illustrates how to read static files from the server-side within document templates using Node.js's file system module and the `process.env.DOCUMENTS_STATIC_PATH` environment variable. Note: Server-side file access is limited to local development.

```tsx
import fs from 'node:fs'
import path from 'path'

// Read static content in server-side components
const content = fs.readFileSync(
  path.join(process.env.DOCUMENTS_STATIC_PATH ?? '', 'content.md'),
  'utf-8'
)
```

--------------------------------

### Footer with Page Numbers in React

Source: https://context7.com/htmldocs-js/htmldocs/llms.txt

Demonstrates how to add a footer with page numbers to a document using the Footer component. The Footer component supports various positions and page types, and its children function provides access to current and total page numbers.

```tsx
import { Document, Page, Footer } from "@htmldocs/react";

function DocumentWithFooter() {
  return (
    <Document size="A4" orientation="portrait" margin="0.75in">
      <Footer
        position="bottom-center"
        pageType="all"
        className="text-sm text-gray-600"
      >
        {({ currentPage, totalPages }) => (
          <div className="flex justify-between w-full px-4">
            <span>Confidential Report</span>
            <span>Page {currentPage} of {totalPages}</span>
            <span>{new Date().getFullYear()}</span>
          </div>
        )}
      </Footer>

      <Page className="p-8">
        <h1>Document Content</h1>
        <p>First page content...</p>
      </Page>

      <Page className="p-8">
        <p>Second page content...</p>
      </Page>
    </Document>
  );
}

export default DocumentWithFooter;
```

--------------------------------

### Load Local Fonts with @font-face (React)

Source: https://github.com/htmldocs-js/htmldocs/blob/canary/apps/docs/usage/static-content.mdx

Shows how to define and use custom fonts within a document template by placing font files in the static directory and applying them using CSS `@font-face` rules in the Head component.

```tsx
import { Document, Head } from "@htmldocs/react"

function MyDocument() {
  return (
    <Document>
      <Head>
        <style>
          {`
            @font-face {
              font-family: 'CustomFont';
              src: url('/static/fonts/CustomFont.woff2') format('woff2'),
                  url('/static/fonts/CustomFont.woff') format('woff');
              font-weight: normal;
              font-style: normal;
            }
          `}
        </style>
      </Head>
      <div style={{ fontFamily: 'CustomFont' }}>
        Text using custom font
      </div>
    </Document>
  )
}
```