> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# API Overview

> Default export object containing all public APIs of `@joyfill/components`.

## Core Components

<CardGroup cols={2}>
  <Card title="Components" icon="box" href="/web/api-reference/classes">
    JoyDoc and JoyDocExporter components
  </Card>

  <Card title="Functions" icon="function" href="/web/api-reference/functions">
    PublicAPI utility functions
  </Card>
</CardGroup>

## Quick Reference

### JoyDoc Component

The main form builder component for creating and editing JoyDoc forms.

<CodeGroup>
  ```jsx React theme={null}
  import { JoyDoc, getDefaultDocument } from '@joyfill/components';

  function App() {
    return (
      <JoyDoc
        doc={getDefaultDocument()}
        mode="edit"
        view="desktop"
        onChange={(changelogs, doc) => console.log('Document updated:', doc)}
        features={{
          validateSchema: true,
          readableIds: true
        }}
      />
    );
  }
  ```

  ```js JavaScript theme={null}
  // Option 1: Using CDN (include this script tag in your HTML)
  // <script src="https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js"></script>

  // Option 2: Using ES Modules
  // import Joyfill from "@joyfill/components/dist/joyfill.min.js";

  // Initialize JoyDoc
  const container = document.getElementById('joydoc-container');
  const myDocument = Joyfill.getDefaultDocument();

  Joyfill.JoyDoc(
    container,
    {
      doc: myDocument,
      mode: 'edit',
      view: 'desktop',
      onChange: (changelogs, doc) => console.log('Document updated:', doc),
      features: {
        validateSchema: true,
        readableIds: true
      }
    }
  );
  ```
</CodeGroup>

**Key Props:**

* `doc` - The JoyDoc document object containing form structure and data
* `mode` - Display mode: 'edit', 'view', or 'preview'
* `onChange` - Callback fired when document changes
* `features` - Feature flags for enabling/disabling functionality

### JoyDocExporter Component

PDF export component for rendering JoyDoc forms as PDF-ready layouts.

<CodeGroup>
  ```jsx React theme={null}
  import { JoyDocExporter, getDefaultDocument } from '@joyfill/components';

  function App() {
    const myDocument = getDefaultDocument();
    return (
      <JoyDocExporter
        doc={myDocument}
        config={{
          page: {
            height: 1056,
            width: 816,
            padding: 20
          }
        }}
        theme={{
          fontFamily: 'sans-serif',
          field: {
            margin: 4
          }
        }}
      />
    );
  }
  ```

  ```js JavaScript theme={null}
  // Option 1: Using CDN (include this script tag in your HTML)
  // <script src="https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js"></script>

  // Option 2: Using ES Modules
  // import Joyfill from "@joyfill/components/dist/joyfill.min.js";

  // Initialize JoyDocExporter
  const container = document.getElementById('exporter-container');
  const myDocument = Joyfill.getDefaultDocument();

  Joyfill.JoyDocExporter(
    container,
    {
      doc: myDocument,
      config: {
        page: {
          height: 1056,
          width: 816,
          padding: 20
        }
      },
      theme: {
        fontFamily: 'sans-serif',
        field: {
          margin: 4
        }
      }
    }
  );
  ```
</CodeGroup>

<Info>
  **Note:** For JavaScript usage, you must import from `dist/joyfill.min.js` because it's a UMD bundle that includes React and provides browser-friendly wrapper functions. The main package exports (`@joyfill/components`) are React components that require React as a peer dependency.
</Info>

## Common Patterns

### Creating a New Document

```javascript theme={null}
import { getDefaultDocument } from '@joyfill/components';

const newDoc = getDefaultDocument();
console.log('Document ID:', newDoc._id);
```

### Duplicating a Template

```javascript theme={null}
import { duplicate } from '@joyfill/components';

const copy = duplicate(template, { name: "Template Copy" });
```

### Validating a Document

```javascript theme={null}
import { validator, validateSchema } from '@joyfill/components';

// Field validation
const result = validator(doc, { view: 'desktop' });

// Schema validation
const schemaError = validateSchema(doc);
if (schemaError) {
  console.error('Schema validation failed:', schemaError.message);
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Components Reference" icon="box" href="/web/api-reference/classes">
    Complete component documentation
  </Card>

  <Card title="Functions Reference" icon="function" href="/web/api-reference/functions">
    Detailed function documentation
  </Card>
</CardGroup>