### Install Dependencies with npm

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-custom-sidebar/README.md

Installs the necessary project dependencies using the npm package manager. This command should be run after cloning the repository and navigating to the example directory.

```bash
npm install
```

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

### Run Development Server with npm

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-custom-sidebar/README.md

Starts the development server for the NextJS application. This allows you to view the custom sidebar example in your browser at http://localhost:3000.

```bash
npm run dev
```

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

### Clone Repository and Navigate Directory

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-custom-sidebar/README.md

Clones the SimplePDF embed repository and navigates into the specific example directory for the custom sidebar. This is the initial setup step for the project.

```bash
git clone https://github.com/SimplePDF/simplepdf-embed.git
cd examples/with-custom-sidebar
```

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

### Development Setup

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

Instructions for linking and starting the SimplePDF widget for development purposes.

```APIDOC
## Development Setup

### Description

This section provides instructions on how to link the SimplePDF widget locally and start it for development, as well as how to use it in a target application.

### Method

Command Line Instructions

### Endpoint

N/A

### Parameters

N/A

### Request Example

```sh
# Link the widget locally
npm link

# Start the widget development server
npm start

# In your target application:
# Link the widget
npm link @simplepdf/react-embed-pdf
```

### Response

N/A

#### Success Response (200)

N/A

#### Response Example

N/A
```

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

### Install and Run CLI Tool

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Installs project dependencies using npm and runs the CLI tool with a configuration file. Requires Node.js and npm.

```bash
npm install
npx tsx src/index.ts example.config.json
```

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

### Cron Schedule Configuration (TOML)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Configures the cron schedule in `wrangler.toml` for automatic cleanup of old submissions. This example runs the cleanup task every 15 minutes.

```toml
[triggers]
crons = ["*/15 * * * *"]  # Runs every 15 minutes
```

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

### Deploy to Cloudflare (Bash)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Deploys the worker application to Cloudflare, making it accessible via a provided URL.

```bash
npm run deploy
```

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

### Login to Cloudflare (Bash)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Authenticates the Wrangler CLI with your Cloudflare account, required for deployment.

```bash
npx wrangler login
```

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

### Checkout Wordpress Plugin Repository using SVN

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/wordpress/README.md

This command checks out the simplepdf-embed plugin's SVN repository. It requires the SVN command-line tool to be installed, which can be done via Homebrew on macOS.

```bash
brew install svn
svn checkout https://plugins.svn.wordpress.org/simplepdf-embed svn
```

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

### Basic Form Fill Example

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

An example JSON configuration for filling a basic form. It includes text fields for a name and a signature field.

```json
{
  "document": "https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf",
  "fields": [
    {
      "type": "TEXT",
      "x": 72,
      "y": 700,
      "width": 200,
      "height": 14,
      "page": 1,
      "value": "John"
    },
    {
      "type": "TEXT",
      "x": 320,
      "y": 700,
      "width": 200,
      "height": 14,
      "page": 1,
      "value": "Doe"
    },
    {
      "type": "SIGNATURE",
      "x": 72,
      "y": 100,
      "width": 200,
      "height": 60,
      "page": 1,
      "value": "John Doe"
    }
  ]
}
```

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

### Multi-Page Document Fill Example

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Example JSON configuration for filling fields across multiple pages of a PDF document. Demonstrates placing text on pages 1 and 2, and a signature on page 3.

```json
{
  "document": "./documents/multi-page.pdf",
  "fields": [
    {
      "type": "TEXT",
      "x": 72,
      "y": 700,
      "width": 200,
      "height": 14,
      "page": 1,
      "value": "Page 1 content"
    },
    {
      "type": "TEXT",
      "x": 72,
      "y": 700,
      "width": 200,
      "height": 14,
      "page": 2,
      "value": "Page 2 content"
    },
    {
      "type": "SIGNATURE",
      "x": 72,
      "y": 100,
      "width": 200,
      "height": 60,
      "page": 3,
      "value": "Final Signature"
    }
  ]
}
```

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

### Link and Start SimplePDF Widget (Shell)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

Commands to link the SimplePDF widget locally and start the development server. This is the first step in integrating the widget into your project.

```sh
npm link
npm start
```

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

### Create KV Namespace (Bash)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Creates a new Cloudflare KV namespace to store webhook events. The output includes a namespace ID that needs to be updated in `wrangler.toml`.

```bash
npx wrangler kv:namespace create "SIMPLEPDF_WEBHOOKS_KV"
```

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

### Enqueue Script with Version in PHP

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/wordpress/README.md

This PHP snippet demonstrates how to enqueue a script in WordPress, specifying its source, dependencies, version, and whether to load it in the footer. The version is dynamically updated during the plugin publishing process.

```php
wp_enqueue_script('simplepdf-web-embed-pdf', $script_src, array(), '<VERSION>', true);
```

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

### Configure KV Namespace in wrangler.toml (TOML)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Updates the `wrangler.toml` file to bind the created KV namespace to the worker. Replace 'YOUR_KV_NAMESPACE_ID' with the actual ID obtained from the previous step.

```toml
[[kv_namespaces]]
binding = "SIMPLEPDF_WEBHOOKS_KV"
id = "YOUR_KV_NAMESPACE_ID"  # Replace with your actual ID
```

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

### Configure Environment Variables in wrangler.toml (TOML)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/webhooks/README.md

Sets environment-specific variables in `wrangler.toml`, such as a company identifier for the SimplePDF webhooks.

```toml
[vars]
COMPANY_IDENTIFIER = "your-company-name"
```

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

### JavaScript: SimplePDF Usage Examples

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Demonstrates various ways to interact with the SimplePDF iframe using the `sendEvent` helper function. Examples include loading documents, navigating pages, selecting tools, creating fields, clearing fields, extracting content, and submitting the document.

```javascript
// Load a document
await sendEvent("LOAD_DOCUMENT", {
  data_url: "https://example.com/document.pdf",
  name: "my-document.pdf",
  page: 1,
});

// Navigate to a specific page
await sendEvent("GO_TO", { page: 3 });

// Select a tool
await sendEvent("SELECT_TOOL", { tool: "TEXT" }); // or "CHECKBOX", "SIGNATURE", "PICTURE", "BOXED_TEXT", null

// Create a field
await sendEvent("CREATE_FIELD", {
  type: "TEXT",
  page: 1,
  x: 100,
  y: 700,
  width: 200,
  height: 30,
  value: "Hello World",
});

// Clear all fields (or specific ones)
await sendEvent("CLEAR_FIELDS", {}); // Clear all
await sendEvent("CLEAR_FIELDS", { page: 1 }); // Clear page 1 only
await sendEvent("CLEAR_FIELDS", {
  field_ids: ["f_kj8n2hd9x3m1p", "f_q7v5c4b6a0wyz"],
}); // Clear specific fields

// Extract document content
const content = await sendEvent("GET_DOCUMENT_CONTENT", {
  extraction_mode: "auto",
});
console.log("Document name:", content.name);
console.log("Pages:", content.pages); // [{ page: 1, content: "..." }, ...]

// Submit the document
await sendEvent("SUBMIT", { download_copy: true });

```

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

### Install SimplePDF React Embed Package

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

This command installs the necessary package for embedding the SimplePDF editor into your React application. It is a prerequisite for using the `EmbedPDF` component.

```sh
npm install @simplepdf/react-embed-pdf
```

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

### Package and Tag Wordpress Plugin for SVN

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/wordpress/README.md

These bash commands are used to package the plugin, update the SVN repository, copy the current trunk to a new tag, and commit the changes. This process is essential for releasing new versions of the plugin.

```bash
npm run package-plugin
cd svn
svn up
svn cp trunk tags/<TAG>
svn commit -m 'Tagging version <TAG>'
```

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

### Specify Company Identifier

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Example of running the CLI tool with a custom company identifier. This directs the tool to connect to a specific SimplePDF subdomain.

```bash
npx tsx src/index.ts config.json --company-identifier mycompany
```

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

### React EmbedPDF Component Examples

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

Demonstrates various ways to use the EmbedPDF React component, including modal and inline modes, programmatic control with the useEmbed hook, viewer-only mode, and integration with company accounts for submission collection. It requires the '@simplepdf/react-embed-pdf' package.

```jsx
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';

// Modal mode - opens editor when user clicks
function ModalExample() {
  return (
    <EmbedPDF>
      <a href="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf">
        Open PDF Editor
      </a>
    </EmbedPDF>
  );
}

// Inline mode - renders editor directly in page
function InlineExample() {
  return (
    <EmbedPDF
      mode="inline"
      style={{ width: 900, height: 800 }}
      documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
    />
  );
}

// With programmatic control
function ProgrammaticExample() {
  const { embedRef, actions } = useEmbed();

  const handleAddTextField = async () => {
    const result = await actions.createField({
      type: 'TEXT',
      page: 1,
      x: 100,
      y: 200,
      width: 150,
      height: 30,
      value: 'Hello World',
    });
    if (result.success) {
      console.log('Created field:', result.data.field_id);
    }
  };

  const handleExtractContent = async () => {
    const result = await actions.getDocumentContent({ extractionMode: 'auto' });
    if (result.success) {
      console.log('Document:', result.data.name);
      result.data.pages.forEach(page => {
        console.log(`Page ${page.page}:`, page.content);
      });
    }
  };

  const handleSubmit = async () => {
    const result = await actions.submit({ downloadCopyOnDevice: true });
    if (result.success) {
      console.log('Document submitted and downloaded');
    }
  };

  return (
    <>
      <button onClick={handleAddTextField}>Add Text Field</button>
      <button onClick={() => actions.selectTool('SIGNATURE')}>Select Signature Tool</button>
      <button onClick={() => actions.goTo({ page: 2 })}>Go to Page 2</button>
      <button onClick={handleExtractContent}>Extract Content</button>
      <button onClick={handleSubmit}>Submit & Download</button>
      <EmbedPDF
        ref={embedRef}
        mode="inline"
        style={{ width: 900, height: 800 }}
        documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
        onEmbedEvent={(event) => {
          switch (event.type) {
            case 'EDITOR_READY':
              console.log('Editor ready');
              break;
            case 'DOCUMENT_LOADED':
              console.log('Document loaded:', event.data.document_id);
              break;
            case 'PAGE_FOCUSED':
              console.log(`Page ${event.data.current_page}/${event.data.total_pages}`);
              break;
            case 'SUBMISSION_SENT':
              console.log('Submitted:', event.data.submission_id);
              break;
          }
        }}
      />
    </>
  );
}

// Viewer mode (read-only, no editing)
function ViewerExample() {
  return (
    <EmbedPDF
      companyIdentifier="react-viewer"
      mode="inline"
      style={{ width: 900, height: 800 }}
      documentURL="https://example.com/document.pdf"
    />
  );
}

// With company account for submission collection
function CompanyExample() {
  return (
    <EmbedPDF
      companyIdentifier="yourcompany"
      context={{ customerId: '123', orderId: '456' }}
      locale="fr"
    >
      <button>Fill out form</button>
    </EmbedPDF>
  );
}

```

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

### Handle Webhooks with Cloudflare Worker

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

Example of a Cloudflare Worker to receive and process webhook events from SimplePDF. It handles 'submission.created' events, logs submission details, and stores the payload in a database.

```javascript
// Cloudflare Worker example for handling webhooks
export default {
  async fetch(request, env) {
    if (request.method === 'POST' && new URL(request.url).pathname === '/webhooks') {
      const body = await request.json();

      switch (body.type) {
        case 'submission.created':
          // Webhook payload structure:
          // {
          //   type: 'submission.created',
          //   data: {
          //     document: { id: 'doc_xxx', name: 'form.pdf' },
          //     submission: {
          //       id: 'sub_xxx',
          //       submitted_at: '2024-01-15T10:30:00Z',
          //       url: 'https://...'  // URL to download filled PDF
          //     },
          //     context: { customerId: '123' }  // Your custom context
          //   }
          // }

          const { document, submission, context } = body.data;

          console.log('New submission:', {
            documentName: document.name,
            submissionId: submission.id,
            pdfUrl: submission.url,
            customerId: context?.customerId
          });

          // Store in database, send notification, etc.
          await env.DB.put(`submission:${submission.id}`, JSON.stringify(body));

          return new Response(null, { status: 200 });

        default:
          console.log('Unhandled event:', body.type);
          return new Response(null, { status: 200 });
      }
    }

    return new Response('Not Found', { status: 404 });
  }
};
```

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

### Basic SimplePDF Embed with Company Identifier (React)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

Demonstrates the basic usage of the `EmbedPDF` component in React, including how to specify a `companyIdentifier` for account-specific features. This example shows how to embed a link that, when clicked, opens the SimplePDF editor.

```jsx
import { EmbedPDF } from '@simplepdf/react-embed-pdf';

<EmbedPDF companyIdentifier="yourcompany">
  <a href="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf">Opens sample.pdf</a>
</EmbedPDF>;
```

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

### Use SimplePDF Widget in Target Application (Shell)

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

Command to link the SimplePDF React embed package into your target application after it has been locally linked and started. This makes the widget available for use.

```sh
npm link @simplepdf/react-embed-pdf
```

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

### Basic Script Tag for SimplePDF Embed

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Include this script tag in the head of your HTML to add SimplePDF functionality to your website. This is the simplest way to get started without an account.

```html
<script src="https://unpkg.com/@simplepdf/web-embed-pdf" defer></script>
```

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

### CLI Usage and Options

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Demonstrates how to run the CLI tool with a configuration file and available options. The --company-identifier option customizes the SimplePDF endpoint.

```bash
npx tsx src/index.ts <config.json> [options]

Options:
  --company-identifier  Your SimplePDF company identifier (default: embed)
  --help                Show help
```

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

### createField Options Reference

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

Reference for the `createField` action, detailing the different field types and their required value formats and position parameters.

```APIDOC
## createField Action

### Description
Adds a form field to a PDF document. Supports various field types with specific value formats. All fields require precise positioning.

### Method
(Implicitly called via an SDK or API)

### Endpoint
(Not directly an HTTP endpoint, but an action within the SimplePDF Embed context)

### Parameters
- **type** (string) - Required - The type of field to create (e.g., 'TEXT', 'BOXED_TEXT', 'CHECKBOX', 'PICTURE', 'SIGNATURE').
- **page** (integer) - Required - The page number where the field will be placed (1-indexed).
- **x** (number) - Required - The x-coordinate of the field's bottom-left corner (in PDF points).
- **y** (number) - Required - The y-coordinate of the field's bottom-left corner (in PDF points).
- **width** (number) - Required - The width of the field (in PDF points).
- **height** (number) - Required - The height of the field (in PDF points).
- **value** (string | object) - Required - The value to set for the field. Format depends on the field type:
  - **TEXT / BOXED_TEXT**: Plain string content.
  - **CHECKBOX**: 'checked' or 'unchecked'.
  - **PICTURE**: Base64 encoded data URL (e.g., 'data:image/png;base64,...').
  - **SIGNATURE**: Base64 encoded image data URL or a plain string for a typed signature.

### Request Example (TEXT field)
```javascript
await actions.createField({
  type: 'TEXT',
  page: 1,
  x: 100,
  y: 500,
  width: 200,
  height: 30,
  value: 'Your text here'
});
```

### Request Example (CHECKBOX field)
```javascript
await actions.createField({
  type: 'CHECKBOX',
  page: 1,
  x: 50,
  y: 450,
  width: 20,
  height: 20,
  value: 'checked'
});
```

### Request Example (PICTURE field)
```javascript
await actions.createField({
  type: 'PICTURE',
  page: 1,
  x: 100,
  y: 300,
  width: 150,
  height: 100,
  value: 'data:image/png;base64,iVBORw0KGgo...'
});
```

### Request Example (SIGNATURE field - drawn)
```javascript
await actions.createField({
  type: 'SIGNATURE',
  page: 1,
  x: 100,
  y: 100,
  width: 200,
  height: 50,
  value: 'data:image/png;base64,iVBORw0KGgo...'
});
```

### Request Example (SIGNATURE field - typed)
```javascript
await actions.createField({
  type: 'SIGNATURE',
  page: 1,
  x: 100,
  y: 100,
  width: 200,
  height: 50,
  value: 'John Smith'
});
```

### Response
(This action typically modifies the document state within the embeddable editor. Success is usually indicated by the absence of errors.)

#### Success Response
(No explicit success response body. Errors would be handled via exceptions or callbacks.)

#### Response Example
(N/A)
```

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

### Programmatic Page Navigation

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/README.md

Navigate to a specific page within the PDF programmatically using the `actions.goTo` function. This allows for dynamic control over the user's view, such as directing them to a particular section of the document.

```javascript
// Navigate to a specific page
await actions.goTo({ page: 3 });
```

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

### SELECT_TOOL

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Selects a drawing tool for annotation or returns to the default cursor mode.

```APIDOC
## SELECT_TOOL

### Description
Select a drawing tool or return to cursor mode.

### Method
POST

### Endpoint
/simplepdf/simplepdf-embed

### Parameters
#### Request Body
- **tool** (string | null) - Required - The tool to select. Accepts `"TEXT"`, `"BOXED_TEXT"`, `"CHECKBOX"`, `"SIGNATURE"`, `"PICTURE"`, or `null` to return to cursor mode.

### Request Example
```json
{
  "event": "SELECT_TOOL",
  "data": {
    "tool": "TEXT"
  }
}
```

### Response
#### Success Response (200)
No specific response body is detailed for success.

#### Response Example
(No example provided)
```

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

### Select Drawing Tool using JavaScript

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Selects a specific drawing tool or returns to the default cursor mode. Available tools include TEXT, BOXED_TEXT, CHECKBOX, SIGNATURE, and PICTURE. Setting the tool to `null` reverts to the cursor.

```javascript
await sendEvent("SELECT_TOOL", {
  tool: "TEXT",
});

await sendEvent("SELECT_TOOL", {
  tool: null,
});
```

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

### Basic Configuration JSON

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

A sample JSON configuration file structure for the SimplePDF editor automation tool. It specifies the document source and an array of fields to be placed.

```json
{
  "document": "https://example.com/document.pdf",
  "fields": [...] 
}
```

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

### Programmatically Opening SimplePDF Editor for File Selection

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Allow users to select their own PDF file to open in the SimplePDF editor by calling `window.simplePDF.openEditor()` with the `href` property set to `null`.

```javascript
window.simplePDF.openEditor({ href: null });
```

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

### Configure Custom Branding with companyIdentifier

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/README.md

This snippet shows how to link your SimplePDF embed to your custom branding settings configured in your dashboard. The `companyIdentifier` prop is used to associate the embed with your account's branding preferences, such as logo and color schemes. This feature requires a Pro plan subscription.

```jsx
// React - branding configured in your dashboard settings
<EmbedPDF companyIdentifier="yourcompany">
  <button>Edit PDF</button>
</EmbedPDF>
```

```html
<!-- Script tag - branding configured in your dashboard settings -->
<script
  src="https://unpkg.com/@simplepdf/web-embed-pdf"
  companyIdentifier="yourcompany"
  defer
></script>
```

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

### Forcing PDF Opening with SimplePDF

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Use the 'simplepdf' class on anchor tags to ensure they open with SimplePDF, even if the linked file does not have a '.pdf' extension. This provides explicit control over which links trigger the editor.

```html
<a href="/example_without_pdf_extension" class="simplepdf">Open with SimplePDF</a>
```

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

### Programmatically Opening SimplePDF Editor with Context

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Pass additional context data, such as customer IDs or environment information, when opening the SimplePDF editor programmatically. This data is sent via webhooks and can help link submissions to specific users or configurations.

```javascript
window.simplePDF.openEditor({
  href: 'publicly_available_url_pdf',
  context: {
    customer_id: '123',
    environment: 'prod',
  },
});
```

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

### Trigger Browser Download of Modified PDF

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/README.md

Use the `submit` function with the `downloadCopyOnDevice: true` option to initiate a direct download of the modified PDF file to the user's device. This is useful for end-users who need to save their work locally.

```javascript
submit({ downloadCopyOnDevice: true });
```

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

### Programmatic Control of SimplePDF Embed Editor

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/react/README.md

Demonstrates how to use the `useEmbed` hook to access actions for controlling the SimplePDF embed editor. This includes submitting the document, extracting content, creating text fields, selecting tools, and navigating between pages. It requires the `@simplepdf/react-embed-pdf` library.

```jsx
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';

const Editor = () => {
  const { embedRef, actions } = useEmbed();

  const handleSubmit = async () => {
    const result = await actions.submit({ downloadCopyOnDevice: false });
    if (result.success) {
      console.log('Submitted!');
    }
  };

  const handleExtract = async () => {
    const result = await actions.getDocumentContent({ extractionMode: 'auto' });
    if (result.success) {
      console.log('Document name:', result.data.name);
      console.log('Pages:', result.data.pages);
    }
  };

  const handleCreateTextField = async () => {
    const result = await actions.createField({
      type: 'TEXT',
      page: 1,
      x: 100,
      y: 200,
      width: 150,
      height: 30,
      value: 'Hello World',
    });
    if (result.success) {
      console.log('Created field:', result.data.field_id);
    }
  };

  return (
    <>
      <button onClick={handleSubmit}>Submit</button>
      <button onClick={handleExtract}>Extract Content</button>
      <button onClick={handleCreateTextField}>Add Text Field</button>
      <button onClick={() => actions.selectTool('TEXT')}>Select Text Tool</button>
      <button onClick={() => actions.goTo({ page: 2 })}>Go to Page 2</button>
      <EmbedPDF
        companyIdentifier="yourcompany"
        ref={embedRef}
        mode="inline"
        style={{ width: 900, height: 800 }}
        documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
      />
    </>
  );
};

```

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

### Programmatic Control of SimplePDF Editor

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

This snippet demonstrates programmatic control over the SimplePDF editor using the global `window.simplePDF` object. It shows how to open the editor with specific document URLs and context, allow user file selection, close the editor, and update configuration at runtime.

```javascript
// Programmatic control
window.simplePDF.openEditor({
  href: 'https://example.com/document.pdf',
  context: { customerId: '123', environment: 'production' }
});

// Let user pick file from their computer
window.simplePDF.openEditor({ href: null });

// Close the editor
window.simplePDF.closeEditor();

// Update configuration at runtime
window.simplePDF.setConfig({
  locale: 'de',
  autoOpen: false,  // Disable automatic PDF link interception
  companyIdentifier: 'yourcompany'
});
```

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

### GO_TO

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Navigates the editor to a specific page number within the loaded document.

```APIDOC
## GO_TO

### Description
Navigate to a specific page.

### Method
POST

### Endpoint
/simplepdf/simplepdf-embed

### Parameters
#### Request Body
- **page** (number) - Required - Page number to navigate to (1-indexed)

### Request Example
```json
{
  "event": "GO_TO",
  "data": {
    "page": 5
  }
}
```

### Response
#### Success Response (200)
No specific response body is detailed for success.

#### Response Example
(No example provided)
```

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

### Programmatically Setting SimplePDF to Viewer Mode

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Switch SimplePDF to viewer mode programmatically by calling `window.simplePDF.setConfig()` with `companyIdentifier: 'viewer'`, and then open a PDF using `openEditor()`.

```javascript
window.simplePDF.setConfig({ companyIdentifier: 'viewer' });
window.simplePDF.openEditor({ href: 'https://example.com/document.pdf' });
```

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

### TEXT Field Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Configuration for a single-line text field. Includes position (x, y), dimensions (width, height), page number, and initial value.

```json
{
  "type": "TEXT",
  "x": 100,
  "y": 700,
  "width": 200,
  "height": 20,
  "page": 1,
  "value": "John Doe"
}
```

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

### SUBMIT

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Submits the document for processing, with an option to trigger a download of the filled PDF.

```APIDOC
## SUBMIT

### Description
Submit the document for processing.

### Method
POST

### Endpoint
/simplepdf/simplepdf-embed

### Parameters
#### Request Body
- **download_copy** (boolean) - Required - Whether to trigger a download of the filled PDF.

### Request Example
```json
{
  "event": "SUBMIT",
  "data": {
    "download_copy": true
  }
}
```

### Response
#### Success Response (200)
No specific response body is detailed for success, but the submission process is initiated.

#### Response Example
(No example provided)
```

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

### Create Supabase Database Table for Submissions

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-supabase/README.md

Defines the SQL schema for the `simplepdf_submissions` table in Supabase. This table stores metadata about document submissions, including names, IDs, and storage paths.

```sql
create table
  public.simplepdf_submissions (
    id bigint generated by default as identity not null,
    document_name text not null,
    document_id text null,
    submission_id text null,
    submission_bucket_path text null,
    context jsonb null,
    constraint simplepdf - submissions_pkey primary key (id)
  ) tablespace pg_default;
```

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

### CHECKBOX Field Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Configuration for a checkbox field. Requires equal width and height for a square shape, along with its position, page, and checked state.

```json
{
  "type": "CHECKBOX",
  "x": 100,
  "y": 550,
  "width": 12,
  "height": 12,
  "page": 1,
  "value": true
}
```

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

### CREATE_FIELD

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Creates a new interactive field on the document at specified coordinates and dimensions.

```APIDOC
## CREATE_FIELD

### Description
Create a new field on the document.

### Method
POST

### Endpoint
/simplepdf/simplepdf-embed

### Parameters
#### Request Body
- **type** (string) - Required - The type of field to create. Accepts `"TEXT"`, `"BOXED_TEXT"`, `"CHECKBOX"`, `"SIGNATURE"`, or `"PICTURE"`.
- **page** (number) - Required - Page number (1-indexed) where the field will be created.
- **x** (number) - Required - X coordinate (PDF points from left).
- **y** (number) - Required - Y coordinate (PDF points from bottom).
- **width** (number) - Required - Field width in PDF points.
- **height** (number) - Required - Field height in PDF points.
- **value** (string) - Optional - Initial value for the field. Format depends on the field type:
    - `TEXT` / `BOXED_TEXT`: Plain text content
    - `CHECKBOX`: `"checked"` or `"unchecked"`
    - `PICTURE`: Data URL (base64)
    - `SIGNATURE`: Data URL (base64 image) or plain text (generates a typed signature)

### Request Example
```json
{
  "event": "CREATE_FIELD",
  "data": {
    "type": "TEXT",
    "page": 1,
    "x": 100,
    "y": 200,
    "width": 150,
    "height": 30,
    "value": "Enter text here"
  }
}
```

### Response
#### Success Response (200)
- **field_id** (string) - The unique identifier for the newly created field.

#### Response Example
```json
{
  "field_id": "f_kj8n2hd9x3m1p"
}
```
```

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

### PICTURE Field Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Configuration for an image field. Accepts image sources via URL, data URL, or local file path, along with position, dimensions, and page number.

```json
{
  "type": "PICTURE",
  "x": 100,
  "y": 300,
  "width": 150,
  "height": 150,
  "page": 1,
  "value": "https://example.com/photo.jpg"
}
```

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

### Submit Document for Processing using JavaScript

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Submits the current document for processing. The `download_copy` boolean determines if a filled PDF download should be triggered immediately.

```javascript
await sendEvent("SUBMIT", {
  download_copy: true,
});
```

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

### JavaScript Communication with SimplePDF Editor via PostMessage

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

Demonstrates how to programmatically interact with the SimplePDF editor embedded in an iframe using the `postMessage` API. It includes functions for sending commands and listening for editor events, handling responses and errors.

```javascript
const iframe = document.getElementById('simplepdf-iframe');

// Helper function to send events and receive responses
const sendEvent = (type, data = {}) => {
  return new Promise((resolve, reject) => {
    const requestId = `req_${Date.now()}_${Math.random().toString(36).slice(2)}`;

    const handleResponse = (event) => {
      try {
        const payload = JSON.parse(event.data);
        if (payload.type === 'REQUEST_RESULT' && payload.data.request_id === requestId) {
          window.removeEventListener('message', handleResponse);
          if (payload.data.result.success) {
            resolve(payload.data.result.data);
          } else {
            reject(payload.data.result.error);
          }
        }
      } catch { /* ignore non-JSON */ }
    };

    window.addEventListener('message', handleResponse);
    iframe.contentWindow.postMessage(
      JSON.stringify({ type, request_id: requestId, data }),
      '*'
    );

    setTimeout(() => {
      window.removeEventListener('message', handleResponse);
      reject({ code: 'timeout', message: 'Request timed out' });
    }, 30000);
  });
};

// Listen for editor events
window.addEventListener('message', (event) => {
  try {
    const payload = JSON.parse(event.data);
    switch (payload.type) {
      case 'EDITOR_READY':
        console.log('Editor ready');
        break;
      case 'DOCUMENT_LOADED':
        console.log('Document loaded:', payload.data.document_id);
        break;
      case 'PAGE_FOCUSED':
        console.log('Page:', payload.data.current_page, '/', payload.data.total_pages);
        break;
      case 'SUBMISSION_SENT':
        console.log('Submitted:', payload.data.submission_id);
        break;
    }
  } catch { /* ignore */ }
});

// Load a document
await sendEvent('LOAD_DOCUMENT', {
  data_url: 'https://example.com/document.pdf',
  name: 'my-document.pdf',
  page: 1
});

// Load from base64
await sendEvent('LOAD_DOCUMENT', {
  data_url: 'data:application/pdf;base64,JVBERi0xLjQK...', // Replace with actual base64 data
  name: 'document.pdf'
});

// Navigate to page
await sendEvent('GO_TO', { page: 3 });

// Select tool: TEXT, BOXED_TEXT, CHECKBOX, SIGNATURE, PICTURE, or null (cursor)
await sendEvent('SELECT_TOOL', { tool: 'SIGNATURE' });

// Create text field
const result = await sendEvent('CREATE_FIELD', {
  type: 'TEXT',
  page: 1,
  x: 100,       // PDF points from left
  y: 700,       // PDF points from bottom
  width: 200,
  height: 30,
  value: 'Initial text'
});
console.log('Created field:', result.field_id);

// Create checkbox
await sendEvent('CREATE_FIELD', {
  type: 'CHECKBOX',
  page: 1,
  x: 50,
  y: 650,
  width: 20,
  height: 20,
  value: 'checked'  // or 'unchecked'
});

// Create signature from text (generates typed signature)
await sendEvent('CREATE_FIELD', {
  type: 'SIGNATURE',
  page: 1,
  x: 100,
  y: 100,
  width: 200,
  height: 50,
  value: 'John Doe'
});

// Clear all fields
await sendEvent('CLEAR_FIELDS', {});

// Clear fields on specific page
await sendEvent('CLEAR_FIELDS', { page: 1 });

// Clear specific fields by ID
await sendEvent('CLEAR_FIELDS', {
  field_ids: ['f_kj8n2hd9x3m1p', 'f_q7v5c4b6a0wyz']
});

// Extract document content
const content = await sendEvent('GET_DOCUMENT_CONTENT', {
  extraction_mode: 'auto'  // or 'ocr' to force OCR
});
console.log('Document:', content.name);
content.pages.forEach(p => console.log(`Page ${p.page}:`, p.content));

// Submit document
await sendEvent('SUBMIT', { download_copy: true });

```

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

### Programmatically Opening SimplePDF Editor with a URL

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Invoke the SimplePDF editor directly using JavaScript by calling `window.simplePDF.openEditor()` with the `href` property set to a publicly available PDF URL.

```javascript
window.simplePDF.openEditor({ href: 'publicly_available_url_pdf' });
```

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

### CLEAR_FIELDS

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Removes fields from the document, either specific fields by ID or all fields on a given page.

```APIDOC
## CLEAR_FIELDS

### Description
Remove fields from the document.

### Method
POST

### Endpoint
/simplepdf/simplepdf-embed

### Parameters
#### Request Body
- **field_ids** (string[]) - Optional - An array of specific field IDs to remove. If omitted, all fields on the specified page (or all fields if no page is specified) will be cleared.
- **page** (number) - Optional - Only clear fields on this specific page.

### Request Example
```json
{
  "event": "CLEAR_FIELDS",
  "data": {
    "field_ids": ["f_abc123", "f_def456"],
    "page": 1
  }
}
```

### Response
#### Success Response (200)
- **cleared_count** (number) - The number of fields that were cleared.

#### Response Example
```json
{
  "cleared_count": 5
}
```
```

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

### Programmatically Updating SimplePDF Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/web/README.md

Modify SimplePDF's runtime configuration, such as changing the locale, enabling/disabling auto-open, or updating the company identifier, by calling `window.simplePDF.setConfig()` with the desired options.

```javascript
window.simplePDF.setConfig({
  locale: 'fr',
  autoOpen: false,
});
```

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

### Navigate to Specific Page using JavaScript

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/documentation/IFRAME.md

Navigates the PDF viewer to a specified page number. The page number is 1-indexed.

```javascript
await sendEvent("GO_TO", {
  page: 5,
});
```

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

### Create PDF Form Fields with SimplePDF Actions

Source: https://context7.com/simplepdf/simplepdf-embed/llms.txt

Demonstrates how to use the `actions.createField` function to add various form field types to a PDF. It covers TEXT, BOXED_TEXT, CHECKBOX, PICTURE, and SIGNATURE fields, specifying their properties and value formats.

```javascript
// TEXT / BOXED_TEXT - plain text content
await actions.createField({
  type: 'TEXT',  // or 'BOXED_TEXT' for bordered text
  page: 1,
  x: 100,
  y: 500,
  width: 200,
  height: 30,
  value: 'Your text here'
});

// CHECKBOX - 'checked' or 'unchecked'
await actions.createField({
  type: 'CHECKBOX',
  page: 1,
  x: 50,
  y: 450,
  width: 20,
  height: 20,
  value: 'checked'
});

// PICTURE - base64 data URL
await actions.createField({
  type: 'PICTURE',
  page: 1,
  x: 100,
  y: 300,
  width: 150,
  height: 100,
  value: 'data:image/png;base64,iVBORw0KGgo...'
});

// SIGNATURE - base64 image OR plain text (generates typed signature)
await actions.createField({
  type: 'SIGNATURE',
  page: 1,
  x: 100,
  y: 100,
  width: 200,
  height: 50,
  value: 'data:image/png;base64,iVBORw0KGgo...'
});

await actions.createField({
  type: 'SIGNATURE',
  page: 1,
  x: 100,
  y: 100,
  width: 200,
  height: 50,
  value: 'John Smith'
});
```

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

### BOXED_TEXT Field Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Configuration for a multi-line text field with a border. Specifies position, dimensions, page, and initial content.

```json
{
  "type": "BOXED_TEXT",
  "x": 100,
  "y": 600,
  "width": 300,
  "height": 100,
  "page": 1,
  "value": "Additional notes here..."
}
```

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

### SIGNATURE Field Configuration

Source: https://github.com/simplepdf/simplepdf-embed/blob/main/examples/with-playwright-automation/README.md

Configuration for a signature field. Supports various value formats including plain text for typed signatures, image URLs, data URLs, or local file paths for drawn signatures.

```json
{
  "type": "SIGNATURE",
  "x": 100,
  "y": 450,
  "width": 200,
  "height": 60,
  "page": 1,
  "value": "John Doe"
}
```