pdfme

https://pdfme.com/docs
Admin
pdfme is a TypeScript PDF generation library and UI editor for creating, viewing, and designing PDFs...
Tokens:16,946
Snippets:197
Trust Score:7.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install @pdfme/manipulator

Source: https://pdfme.com/docs/manipulator

Use npm to install the package in your project.

```bash
npm install @pdfme/manipulator
```

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

### Install @pdfme/cli

Source: https://pdfme.com/docs/cli

Install the CLI as a development dependency in your project.

```bash
npm install -D @pdfme/cli
```

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

### Install @pdfme/jsx

Source: https://pdfme.com/docs/jsx

Install the package via npm.

```bash
npm install @pdfme/jsx
```

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

### Install pdfme packages

Source: https://pdfme.com/docs/getting-started

Use these commands to install the necessary packages for PDF generation or UI components.

```bash
npm i @pdfme/generator @pdfme/common
```

```bash
npm i @pdfme/ui @pdfme/common
```

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

### Install @pdfme/schemas

Source: https://pdfme.com/docs/custom-schemas

Install the package containing built-in schema plugins.

```bash
npm install @pdfme/schemas
```

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

### Install @pdfme/converter

Source: https://pdfme.com/docs/converter

Use npm to install the converter package into your project.

```bash
npm install @pdfme/converter
```

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

### Implement template with plugins

Source: https://pdfme.com/docs/getting-started

Example demonstrating the registration of built-in and custom plugins for advanced schema types.

```typescript
import { Template, BLANK_PDF } from '@pdfme/common';  
import { text, barcodes, image } from '@pdfme/schemas';  
import myCustomPlugin from './custom-plugins';  

  

const template: Template = {  

  basePdf: BLANK_PDF,  

  schemas: [  

    [  

      {  

        name: 'example_text',  

        type: 'text',  

        position: { x: 0, y: 0 },  

        width: 40,  

        height: 10,  

      },  

      {  

        name: 'example_image',  

        type: 'image',  

        position: { x: 200, y: 200 },  

        width: 60,  

        height: 40,  

      },  

      {  

        name: 'example_qr_code',  

        type: 'qrcode',  

        position: { x: 100, y: 100 },  

        width: 50,  

        height: 50,  

      },  

    ],  

  ],  

};  

  

const plugins = {  

  Text: multiVariableText,  

  'QR Code': barcodes.qrcode,  

  Image: image,  

  MyCustomPlugin: myCustomPlugin,  

};  

  

const inputs = [  

  {  

    example_text: 'Hello, World!',  

    example_image: 'data:image/png;base64,iVBORw0KG....',  

    example_qr_code: 'https://pdfme.com/',  

  },  

];  

  

generate({ template, inputs, plugins }).then((pdf) => {  

  console.log(pdf);  

});  
```

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

### Manage templates with pdfme examples

Source: https://pdfme.com/docs/cli

Lists available templates or exports them to files, optionally including sample inputs and manifest metadata.

```bash
# List templates

pdfme examples --list



# Listing is also the default when no name is provided

pdfme examples



# Print a template to stdout

pdfme examples invoice



# Write a template to a file

pdfme examples invoice -o template.json



# Export a unified job with sample inputs

pdfme examples invoice --withInputs -o job.json



# Machine-readable manifest output

pdfme examples --list --json
```

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

### Install schema package

Source: https://pdfme.com/docs/getting-started

Command to install the package required for accessing non-default schema types.

```bash
npm install @pdfme/schemas  
```

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

### Common Expression Examples

Source: https://pdfme.com/docs/expression

Examples of expressions for calculating subtotals, taxes, and totals.

```text
subtotal: '{orders.reduce((sum, item) => sum + parseFloat(item[1] || 0) * parseFloat(item[2] || 0), 0)}'
```

```text
tax: '{Number(subtotalInput) * Number(tax.rate) / 100}'
```

```text
total: '${Number(subtotal) + Number(tax)}'
```

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

### Install QR Code Dependency

Source: https://pdfme.com/docs/custom-schemas

Install the required qrcode npm package to support the lightweight QR code plugin.

```bash
npm install qrcode -S
```

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

### Run CLI with npx

Source: https://pdfme.com/docs/cli

Execute the CLI directly without global installation using npx.

```bash
npx @pdfme/cli generate --help
```

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

### Generate PDFs via CLI

Source: https://pdfme.com/docs/cli

Various command-line examples for generating PDFs, including using unified job files, separate template/input files, and enabling image or grid outputs.

```bash
# Unified job file: { template, inputs, options? }  

pdfme generate job.json -o out.pdf  

  

# Template + inputs as separate files  

pdfme generate -t template.json -i inputs.json -o out.pdf  

  

# Render page images too  

pdfme generate job.json -o out.pdf --image  

  

# Overlay grid lines and schema bounds on generated images  

pdfme generate job.json -o out.pdf --grid  

  

# Override basePdf from the command line  

pdfme generate -t template.json -i inputs.json --basePdf invoice.pdf -o out.pdf  

  

# Structured output for CI or agents  

pdfme generate job.json -o out.pdf --image --json
```

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

### Unified Job File Structure

Source: https://pdfme.com/docs/cli

Example of a JSON structure containing the template, inputs, and options required for a unified job file.

```json
{

  "template": {

    "basePdf": {

      "width": 210,

      "height": 297,

      "padding": [20, 20, 20, 20]

    },

    "schemas": [

      [

        {

          "name": "customerName",

          "type": "text",

          "position": { "x": 20, "y": 50 },

          "width": 80,

          "height": 10

        }

      ]

    ]

  },

  "inputs": [

    { "customerName": "John Doe" }

  ],

  "options": {

    "font": {

      "NotoSansJP": {

        "data": "https://fonts.gstatic.com/...",

        "fallback": false,

        "subset": true

      }

    }

  }

}
```

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

### Define a basic JSX template

Source: https://pdfme.com/docs/jsx

A simple example showing how to return a Page component with a Text element in the JSX playground.

```jsx
return (  

  <Page>  

    <Text>Hello from JSX</Text>  

  </Page>  

);
```

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

### Configure Font Object

Source: https://pdfme.com/docs/custom-fonts

Example of a font configuration object with a fallback font defined.

```typescript
const font: Font = {  

  serif: {  

    data: 'https://example.com/fonts/serif.ttf',  

    fallback: true,  

  },  

  sans_serif: {  

    data: 'https://example.com/fonts/sans_serif.ttf',  

  },  

};
```

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

### Generate and Diagnose PDF Jobs

Source: https://pdfme.com/docs/cli

Standard workflow for initializing a job from an example, diagnosing it, and generating the final PDF output.

```bash
pdfme examples invoice --withInputs -o job.json

pdfme doctor job.json --json

pdfme generate job.json -o out.pdf --image --grid
```

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

### Table Schema Template Structure

Source: https://pdfme.com/docs/tables

Example of a template JSON structure containing a table schema definition with styles and initial content.

```json
{
  "schemas": [
    [
      {
        "name": "mytable",
        "type": "table",
        "position": {
          "x": 28.92,
          "y": 51.36
        },
        "width": 150,
        "height": 57.5184,
        "content": "[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]",
        "showHead": true,
        "head": ["Name", "City", "Description"],
        "headWidthPercentages": [30, 30, 40],
        "tableStyles": {
          "borderWidth": 0.3,
          "borderColor": "#000000"
        },
        "headStyles": {
          "fontName": "NotoSerifJP-Regular",
          "fontSize": 13,
          "characterSpacing": 0,
          "alignment": "left",
          "verticalAlignment": "middle",
          "lineHeight": 1,
          "fontColor": "#ffffff",
          "borderColor": "",
          "backgroundColor": "#2980ba",
          "borderWidth": {
            "top": 0,
            "right": 0,
            "bottom": 0,
            "left": 0
          },
          "padding": {
            "top": 5,
            "right": 5,
            "bottom": 5,
            "left": 5
          }
        },
        "bodyStyles": {
          "fontName": "NotoSerifJP-Regular",
          "fontSize": 13,
          "characterSpacing": 0,
          "alignment": "left",
          "verticalAlignment": "middle",
          "lineHeight": 1,
          "fontColor": "#000000",
          "borderColor": "#888888",
          "backgroundColor": "",
          "alternateBackgroundColor": "#f5f5f5",
          "borderWidth": {
            "top": 0.1,
            "right": 0.1,
            "bottom": 0.1,
            "left": 0.1
          },
          "padding": {
            "top": 5,
            "right": 5,
            "bottom": 5,
            "left": 5
          }
        },
        "columnStyles": {},
        "required": false,
        "readOnly": false
      }
    ]
  ],
  "basePdf": {
    "width": 210,
    "height": 297,
    "padding": [20, 20, 20, 20]
  },
  "pdfmeVersion": "5.0.0"
}
```

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

### Create Template Directory

Source: https://pdfme.com/docs/template-contribution-guide

Command to create the required directory structure for new template assets.

```bash
mkdir -p playground/public/template-assets/my-new-template  

```

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

### Overlay Workflows for Existing PDFs

Source: https://pdfme.com/docs/cli

Commands for processing existing PDF files, including converting to images, checking dimensions, and generating templates.

```bash
pdfme pdf2img invoice.pdf --grid --gridSize 10

pdfme pdf2size invoice.pdf --json

pdfme doctor template.json -o out.pdf --image --json

pdfme generate -t template.json -i inputs.json -o out.pdf --image --grid
```

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

### Initialize UI with Fonts

Source: https://pdfme.com/docs/custom-fonts

Provide the font configuration during the initialization of the Designer, Form, or Viewer instance.

```typescript
import { Designer } from '@pdfme/ui';  

  

const domContainer = document.getElementById('container');  

const template = {  

  // skip...  

};  

const font = {  

  serif: {  

    data: 'https://example.com/fonts/serif.ttf',  

    fallback: true,  

  },  

  sans_serif: {  

    data: 'https://example.com/fonts/sans_serif.ttf',  

  },  

};  

  

const designer = new Designer({ domContainer, template, options: { font } });
```

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

### Commit and Push Changes

Source: https://pdfme.com/docs/template-contribution-guide

Commands to stage, commit, and push the new template files to the remote repository.

```bash
git add .  

git commit -m "feat: Add My New Template"  

```

```bash
git push origin add-my-new-template  

```

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

### Template Configuration Files

Source: https://pdfme.com/docs/template-contribution-guide

JSON structure for template configuration and metadata files.

```json
{

  "author": "YOUR-GITHUB-USERNAME",

  "basePdf": ...

}

```

```json
{

  "description": "A short description of what this template is useful for.",

  "tags": ["Invoice", "Business"]

}

```

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

### Clone and Branch Repository

Source: https://pdfme.com/docs/template-contribution-guide

Commands to clone the repository and create a new feature branch for the template contribution.

```bash
git clone git@github.com:YOUR-GITHUB-USERNAME/pdfme.git  

cd pdfme  

```

```bash
git checkout -b add-my-new-template  

```

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

### Integrate the Form

Source: https://pdfme.com/docs/getting-started

Initializes the Form UI component for user input and demonstrates generating a PDF from that input.

```typescript
import type { Template } from '@pdfme/common';  

import { Form } from '@pdfme/ui';  

  

const domContainer = document.getElementById('container');  

const template: Template = {  

  // skip...  

};  

// This is initial data.  

const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];  

  

const form = new Form({ domContainer, template, inputs });
```

```typescript
generate({ template, inputs: form.getInputs() }).then((pdf) => {  

  const blob = new Blob([pdf.buffer], { type: 'application/pdf' });  

  window.open(URL.createObjectURL(blob));  

});
```

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

### Create a minimal template

Source: https://pdfme.com/docs/getting-started

Basic template structure using the default text schema type and a blank PDF background.

```typescript
import { Template, BLANK_PDF } from '@pdfme/common';  

  

const template: Template = {  

  basePdf: BLANK_PDF,  

  schemas: [  

    [  

      {  

        name: 'a',  

        type: 'text',  

        position: { x: 0, y: 0 },  

        width: 10,  

        height: 10,  

      },  

      {  

        name: 'b',  

        type: 'text',  

        position: { x: 10, y: 10 },  

        width: 10,  

        height: 10,  

      },  

      {  

        name: 'c',  

        type: 'text',  

        position: { x: 20, y: 20 },  

        width: 10,  

        height: 10,  

      },  

    ],  

  ],  

};  
```

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

### Configure Language and Labels

Source: https://pdfme.com/docs/custom-ui

Set the UI language and override default labels using the lang and labels properties in options.

```javascript
new Designer({  

  domContainer,  

  template,  

  options: {  

    lang: 'ja',  

    labels: {  

      fieldsList: '入力項目一覧ビュー', // override the label for the edit button  

      youCanCreateYourOwnLabel: '独自のラベルを作成できます', // add a new label for the custom plugin  

    },  

  },  

});  
```

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

### Define a document with Header and Footer

Source: https://pdfme.com/docs/jsx

Demonstrates using the Document component to manage page size, margins, and repeated content like headers and footers.

```jsx
return (  

  <Document size="A4" margin={{ x: 16, y: 18 }}>  

    <Header>  

      <Text>Report</Text>  

    </Header>  

    <Footer>  

      <Text align="right">  

        {'Page {currentPage} of {totalPages}'}  

      </Text>  

    </Footer>  

    <Page>  

      <Text>Body</Text>  

    </Page>  

  </Document>  

);
```

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

### Define a Footer using staticSchema

Source: https://pdfme.com/docs/headers-and-footers

Configures a template with a static footer containing lines, invoice information, and page numbering.

```json
{
  "width": 210,
  "height": 297,
  "padding": [20, 20, 20, 20],
  "staticSchema": [
    {
      "name": "line",
      "type": "line",
      "position": {
        "x": 20,
        "y": 279
      },
      "width": 170,
      "height": 0.2,
      "rotate": 0,
      "opacity": 1,
      "color": "#999999",
      "required": false,
      "readOnly": true,
      "content": ""
    },
    {
      "name": "footerInfo",
      "type": "text",
      "content": "Invoice No.{info.InvoiceNo} • {totalInput} USD due {date}",
      "position": {
        "x": 20,
        "y": 282
      },
      "width": 122.51,
      "height": 10,
      "rotate": 0,
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "opacity": 1,
      "strikethrough": false,
      "underline": false,
      "required": false,
      "readOnly": true
    },
    {
      "name": "pageNumber",
      "type": "text",
      "content": "Page {currentPage} of {totalPages}",
      "position": {
        "x": 145,
        "y": 282
      },
      "width": 45,
      "height": 10,
      "rotate": 0,
      "alignment": "right",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "opacity": 1,
      "strikethrough": false,
      "underline": false,
      "required": false,
      "readOnly": true
    }
  ]
}
```

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

### Diagnose environment and files

Source: https://pdfme.com/docs/cli

Use the doctor command to troubleshoot environment settings, font configurations, and file compatibility.

```bash
# Environment diagnosis

pdfme doctor
```

```bash
# Diagnose a template or job

pdfme doctor job.json --json
```

```bash
# Diagnose from stdin

cat job.json | pdfme doctor - --json
```

```bash
# Font-focused diagnosis

pdfme doctor fonts job.json --json
```

```bash
# Simulate generate with automatic CJK font resolution disabled

pdfme doctor job.json --noAutoFont --json
```

```bash
# Preview runtime output and image targets

pdfme doctor job.json -o artifacts/out.pdf --image --imageFormat jpeg --json
```

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

### organize(pdf: ArrayBuffer, actions: OrganizeAction[])

Source: https://pdfme.com/docs/manipulator

Performs multiple PDF operations in sequence.

```APIDOC
## organize(pdf: ArrayBuffer, actions: OrganizeAction[])

### Description
Performs multiple PDF operations (remove, insert, replace, rotate, move) in sequence.

### Parameters
- **pdf** (ArrayBuffer) - Required - The source PDF.
- **actions** (OrganizeAction[]) - Required - Array of operation objects to perform.
```

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

### Regenerate Gallery Metadata

Source: https://pdfme.com/docs/template-contribution-guide

Command to update the template manifest after adding new files.

```bash
npm --prefix playground run generate-template-assets  

```

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

### Import pdfme modules

Source: https://pdfme.com/docs/getting-started

Import the required types and functions for your specific environment, such as when using webpack.

```typescript
import type { Template } from '@pdfme/common';

import { generate } from '@pdfme/generator';
```

```typescript
import type { Template } from '@pdfme/common';

import { Designer, Form, Viewer } from '@pdfme/ui';
```

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

### Integrate the Viewer

Source: https://pdfme.com/docs/getting-started

Initializes the Viewer UI component to display a read-only preview of a PDF.

```typescript
import type { Template } from '@pdfme/common';  

import { Viewer } from '@pdfme/ui';  

  

const domContainer = document.getElementById('container');  

const template: Template = {  

  // skip...  

};  

const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];  

  

const viewer = new Viewer({ domContainer, template, inputs });
```

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

### md2pdf

Source: https://pdfme.com/docs/converter

Converts GitHub Flavored Markdown into a pdfme Template and inputs pair.

```APIDOC
## md2pdf(markdown: string, options?: { style: { fontName: string }, basePdf?: any })

### Description
Converts GitHub Flavored Markdown into a pdfme Template and inputs pair.

### Parameters
- **markdown** (string) - The Markdown content to convert.
- **options** (Object, optional) - Configuration for the conversion.
  - **style** (Object) - Styling options, such as fontName.
  - **basePdf** (Object) - Optional base PDF object to use instead of creating a blank one.
```

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

### Registering the Table Plugin

Source: https://pdfme.com/docs/tables

Import the table schema and register it as a plugin within the Designer and generator instances.

```typescript
import { table } from '@pdfme/schemas';  

import { Designer } from '@pdfme/ui';  

import { generate } from '@pdfme/generator';  

  

new Designer({  

  domContainer,  

  template,  

  plugins: { Table: table },  

});  

  

generate({  

  template,  

  inputs,  

  plugins: { Table: table },  

});
```

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

### Import and Register QR Code Plugin

Source: https://pdfme.com/docs/custom-schemas

Register the custom QR code plugin within the pdfme generator configuration.

```typescript
import qrCode from "./plugins/qrCode.js";

// In your generator
const pdf = await generate({
  template, 
  inputs, 
  options: { font },
  plugins: {
    // Your other plugins
    NodeQRCode: qrCode
  }
});
```

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

### Register Plugins in @pdfme/ui

Source: https://pdfme.com/docs/custom-schemas

Configure plugins within the Designer, Form, or Viewer instances to support additional schema types.

```typescript
import type { Template } from '@pdfme/common';

import { text, image, signature, barcodes } from '@pdfme/schemas';

import { Designer } from '@pdfme/ui';



const domContainer = document.getElementById('container');

const template: Template = {

  // skip... you can use text, image, signature, qrcode schema type in template.

};



const designer = new Designer({

  domContainer,

  template,

  // ↓ You can use plugins in Designer like this.

  plugins: {

    text,

    image,

    signature,

    qrcode: barcodes.qrcode,

  },

});
```

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

### Customize UI Theme

Source: https://pdfme.com/docs/custom-ui

Apply an Ant Design theme to the pdfme UI by passing a theme object within the options.

```javascript
new Designer({  

  domContainer,  

  template,  

  options: {  

    theme: {  

      token: {  

        colorPrimary: 'red',  

      },  

    },  

  },  

});  
```

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

### Convert Markdown to PDF Template

Source: https://pdfme.com/docs/converter

Converts GitHub Flavored Markdown into a template and inputs pair for use with the pdfme generator.

```typescript
import { md2pdf } from '@pdfme/converter/md2pdf';  

  

const { template, inputs } = await md2pdf('# Hello

Visit [pdfme](https://pdfme.com).');
```

```typescript
import { md2pdf } from '@pdfme/converter/md2pdf';  
import { generate } from '@pdfme/generator';  
import { image, line, list, table, text } from '@pdfme/schemas';  

  

const { template, inputs } = await md2pdf(`  

# Release notes  

  

- Markdown becomes pdfme schemas.  

- Horizontal rules become line schemas.  

  

---  

  

| Feature | Status |  

| --- | --- |  

| Tables | Supported |  

`);  

  

const pdf = await generate({  

  template,  

  inputs,  

  plugins: {  

    Text: text,  

    List: list,  

    Table: table,  

    Image: image,  

    Line: line,  

  },  

});
```

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

### Convert PDF to images with pdfme pdf2img

Source: https://pdfme.com/docs/cli

Converts PDF pages into image files with options for grid overlays, page ranges, output directories, and JSON metadata.

```bash
pdfme pdf2img invoice.pdf

pdfme pdf2img invoice.pdf --grid --gridSize 10

pdfme pdf2img invoice.pdf --pages 1-3

pdfme pdf2img invoice.pdf -o ./images --imageFormat jpeg

pdfme pdf2img invoice.pdf -o ./images --json
```

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

### Inspect PDF page sizes with pdfme pdf2size

Source: https://pdfme.com/docs/cli

Retrieves page dimensions in millimeters, supporting both human-readable output and machine-readable JSON.

```bash
pdfme pdf2size invoice.pdf

pdfme pdf2size invoice.pdf --json
```

```json
{

  "ok": true,

  "command": "pdf2size",

  "pageCount": 1,

  "pages": [

    { "pageNumber": 1, "width": 210, "height": 297 }

  ]

}
```

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

### Configure TypeScript JSX Runtime

Source: https://pdfme.com/docs/jsx

Set the compiler options in tsconfig.json to support the @pdfme/jsx runtime.

```json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@pdfme/jsx"
  }
}
```

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

### Template Schema with Expression

Source: https://pdfme.com/docs/expression

Demonstrates using an expression in a read-only field to reference another field's value.

```json
{

    "schemas": [  

        [  

            {  

                "name": "field1",  

                "type": "text",  

                "content": "Hello world",  

                ...  

                "readOnly": false,  

            },  

            {  

                "name": "field2",  

                "type": "text",  

                "content": "{field1} !", // Expression!  

                ...  

                "readOnly": true,  

            }  

        ]  

    ],  

    "basePdf": { "width": 210, "height": 297, "padding": [20, 10, 20, 10] },  

    "pdfmeVersion": "5.0.0"  

}
```

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

### Generate a PDF

Source: https://pdfme.com/docs/getting-started

Uses the generate function to create a PDF from a template and input data. Works in both Node.js and browser environments.

```typescript
import type { Template } from '@pdfme/common';  

import { generate } from '@pdfme/generator';  

  

const template: Template = {  

  // skip...　Check the Template section.  

};  

const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];  

  

generate({ template, inputs }).then((pdf) => {  

  console.log(pdf);  

  

  // Browser  

  // const blob = new Blob([pdf.buffer], { type: 'application/pdf' });  

  // window.open(URL.createObjectURL(blob));  

  

  // Node.js  

  // fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);  

});
```

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

### Migrate CommonJS to ESM

Source: https://pdfme.com/docs/migration-v6

Replace require statements with import syntax for package modules.

```javascript
const { BLANK_PDF } = require('@pdfme/common');  

const { generate } = require('@pdfme/generator');  
```

```javascript
import { BLANK_PDF } from '@pdfme/common';  

import { generate } from '@pdfme/generator';  
```

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

### Manage UI State

Source: https://pdfme.com/docs/custom-ui

Control UI states like zoom level and sidebar visibility during initialization or via the updateOptions method.

```javascript
// Initialize with specific states (also works for Form and Viewer):  

const designer = new Designer({  

  domContainer,  

  template,  

  options: {  

    zoomLevel: 1.5,  

    sidebarOpen: false,  // (Designer only)  

  }  

});  

  

// Update states after initialization:  

designer.updateOptions({  

  zoomLevel: 2,  

  sidebarOpen: true  

});  
```

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

### Organize PDF operations

Source: https://pdfme.com/docs/manipulator

Execute a sequence of multiple manipulation operations on a PDF.

```typescript
import { organize } from '@pdfme/manipulator';  

  

const pdf = new ArrayBuffer(...); // Source PDF  

const insertPdf = new ArrayBuffer(...); // PDF to insert  

const result = await organize(pdf, [  

  { type: 'remove', data: { position: 1 } },  

  { type: 'insert', data: { pdf: insertPdf, position: 0 } },  

  { type: 'rotate', data: { position: 0, degrees: 90 } },  

]);
```

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

### Register Plugins Explicitly

Source: https://pdfme.com/docs/migration-v6

Pass non-text plugins explicitly to the generator to support schema types beyond text.

```javascript
import { generate } from '@pdfme/generator';  

  

await generate({ template, inputs });  
```

```javascript
import { generate } from '@pdfme/generator';  

import { text, image, signature, table, barcodes } from '@pdfme/schemas';  

  

await generate({  

  template,  

  inputs,  

  plugins: {  

    text,  

    image,  

    signature,  

    table,  

    qrcode: barcodes.qrcode,  

  },  

});  
```

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

### Retrieve PDF Page Sizes

Source: https://pdfme.com/docs/converter

Retrieves the width and height of each page in a PDF document.

```typescript
import { pdf2size } from '@pdfme/converter';  

  

const pdf = new ArrayBuffer(...); // Source PDF  

const sizes = await pdf2size(pdf, {  

  scale: 1, // Scale factor (default: 1)  

});  

// sizes: Array<{ width: number, height: number }>
```

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

### pdfme generate

Source: https://pdfme.com/docs/cli

Generates a PDF document from a unified job file or a combination of template and input files.

```APIDOC
## pdfme generate

### Description
Generates a PDF from a unified job file or a template file plus a separate inputs file. Supports additional options for image rendering, grid overlays, and custom font resolution.

### Parameters
#### Positional Arguments
- **[file]** (string) - Optional - Unified job file containing { template, inputs, options? }

#### Options
- **-t, --template** (string) - Optional - Template JSON file
- **-i, --inputs** (string) - Optional - Input JSON file
- **-o, --output** (string) - Optional - Output PDF path (default: output.pdf)
- **--force** (boolean) - Optional - Allow overwriting the implicit default output.pdf
- **--image** (boolean) - Optional - Write one image per generated page
- **--imageFormat** (string) - Optional - png or jpeg (default: png)
- **--scale** (number) - Optional - Render scale for image output (default: 1)
- **--grid** (boolean) - Optional - Draw grid lines and schema bounds on generated images
- **--gridSize** (number) - Optional - Grid spacing in millimeters (default: 10)
- **--font** (string) - Optional - Local custom fonts as Name=path.ttf, comma-separated
- **--basePdf** (string) - Optional - Override template.basePdf with a PDF file path
- **--noAutoFont** (boolean) - Optional - Disable automatic NotoSansJP resolution for CJK text
- **-v, --verbose** (boolean) - Optional - Print input/output/render details to stderr
- **--json** (boolean) - Optional - Print JSON only to stdout

### Usage Examples
# Unified job file
pdfme generate job.json -o out.pdf

# Template + inputs as separate files
pdfme generate -t template.json -i inputs.json -o out.pdf

### Response (when --json is enabled)
- **ok** (boolean) - Status of the operation
- **command** (string) - Executed command name
- **mode** (string) - Execution mode (e.g., job)
- **templatePageCount** (number) - Number of pages in the template
- **inputCount** (number) - Number of inputs processed
- **pageCount** (number) - Total pages generated
- **outputPath** (string) - Path to the generated PDF
- **outputBytes** (number) - Size of the output file in bytes
- **imagePaths** (array) - List of generated image paths
```

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

### Register Plugins in @pdfme/generator

Source: https://pdfme.com/docs/custom-schemas

Import and pass schema plugins to the generate function to enable non-text schema types.

```typescript
import type { Template } from '@pdfme/common';

import { text, image, signature, barcodes } from '@pdfme/schemas';

import { generate } from '@pdfme/generator';



const template: Template = {

  // skip... you can use text, image, signature, qrcode schema type in template.

};

const inputs = [

  // skip...

];



const pdf = await generate({

  template,

  inputs,

  // ↓ You can use plugins in Generator like this.

  plugins: {

    text,

    image,

    signature,

    qrcode: barcodes.qrcode,

  },

});
```

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

### pdf2size

Source: https://pdfme.com/docs/converter

Retrieves the width and height of each page in a PDF.

```APIDOC
## pdf2size(pdf: ArrayBuffer, options: { scale: number })

### Description
Retrieves the width and height of each page in a PDF.

### Parameters
- **pdf** (ArrayBuffer) - The source PDF data.
- **options** (Object) - Configuration for the conversion.
  - **scale** (number) - The scale factor (default: 1).
```

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

### Validate templates and jobs

Source: https://pdfme.com/docs/cli

Use the validate command to check template structures or unified job files for errors and warnings.

```bash
pdfme validate template.json
```

```bash
pdfme validate job.json --json
```

```bash
cat job.json | pdfme validate - --json
```

```bash
pdfme validate template.json --strict
```

```bash
pdfme validate template.json -v --json
```

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

### Configuring Table Input Data

Source: https://pdfme.com/docs/tables

Define the input data for the generator to populate the table. The input can be updated dynamically to modify table content.

```json
[
  {
    "mytable": [
      ["Alice", "New York", "Alice is a freelance web designer and developer"],
      ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"]
    ]
  }
]
```

```json
[
  {
    "mytable": [
      ["Alice", "New York", "Alice is a freelance web designer and developer"],
      ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
      ["Charlie", "London", "Charlie is a freelance photographer"]
    ]
  }
]
```

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

### Update Internal Package Imports

Source: https://pdfme.com/docs/migration-v6

Import modules directly from the package root instead of internal paths.

```javascript
import { generate } from '@pdfme/generator/cjs/src/index.js';  

import { pdf2img } from '@pdfme/converter/cjs/src/index.node.js';  
```

```javascript
import { generate } from '@pdfme/generator';  

import { pdf2img } from '@pdfme/converter';  
```

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

### Integrate the Designer

Source: https://pdfme.com/docs/getting-started

Initializes the Designer UI component within a DOM container to allow template editing.

```typescript
import type { Template } from '@pdfme/common';  

import { Designer } from '@pdfme/ui';  

  

const domContainer = document.getElementById('container');  

const template: Template = {  

  // skip...　Check the Template section.  

};  

  

// configure some or all of the UI state (optional, defaults shown below)  

 const options = {  

   zoomLevel: 1,  

   sidebarOpen: true  

 };  

  

const designer = new Designer({ domContainer, template, options });
```

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

### Render JSX to Template

Source: https://pdfme.com/docs/jsx

Define a document structure using JSX components and render it into a template and inputs for use with pdfme generators.

```typescript
import { generate } from '@pdfme/generator';
import { text, table } from '@pdfme/schemas';
import { Document, Page, Stack, Text, Table, renderToTemplate } from '@pdfme/jsx';

const { template, inputs } = await renderToTemplate(
  <Document size="A4" margin={{ x: 16, y: 18 }}>
    <Page>
      <Stack gap={6}>
        <Text size={24}>
          Invoice
        </Text>
        <Text color="#64748b">
          Generated from JSX, rendered by pdfme.
        </Text>
        <Table
          head={['Item', 'Qty', 'Price']}
          rows={[
            ['Design', 1, '$800'],
            ['Automation', 2, '$1,200'],
          ]}
        />
      </Stack>
    </Page>
  </Document>,
);

const pdf = await generate({
  template,
  inputs,
  plugins: { text, table },
});
```

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

### Convert Images to PDF

Source: https://pdfme.com/docs/converter

Converts one or more JPEG or PNG images into a single PDF file.

```typescript
import { img2pdf } from '@pdfme/converter';  

  

const image1 = new ArrayBuffer(...); // First image  

const image2 = new ArrayBuffer(...); // Second image  

const pdf = await img2pdf([image1, image2], {  

  scale: 1,  

  imageType: 'jpeg',  

  size: { width: 210, height: 297 },  

  margin: [10, 10, 10, 10],  

});
```

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

### Import Font Type

Source: https://pdfme.com/docs/custom-fonts

Import the Font type definition from the @pdfme/common package.

```typescript
import type { Font } from '@pdfme/common';
```

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

### Define QR Code Schema

Source: https://pdfme.com/docs/custom-schemas

Configure the QR code schema object within your pdfme template definition.

```json
{
  "type": "node-qrCode",
  "content": "https://pdfme.com/",
  "position": { "x": 178, "y": 20 },
  "backgroundColor": "#ffffff",
  "barColor": "#000000",
  "width": 16,
  "height": 16,
  "rotate": 0,
  "opacity": 1,
  "required": false,
  "readOnly": false,
  "name": "qrCode"
}
```

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

### Override Default Plugins

Source: https://pdfme.com/docs/custom-schemas

Customize the plugin registry to rename labels, remove default schemas, or replace them with custom implementations.

```typescript
  plugins: {

    QR: barcodes.qrcode,

    Image: image,

  },
```

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

### Split PDF files

Source: https://pdfme.com/docs/manipulator

Divide a PDF into multiple parts based on specified page ranges.

```typescript
import { split } from '@pdfme/manipulator';  

  

const pdf = new ArrayBuffer(...); // Source PDF  

const splits = await split(pdf, [  

  { start: 0, end: 1 }, // Pages 1-2  

  { start: 2, end: 4 }, // Pages 3-5  

]);
```

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

### Replace __dirname in ESM

Source: https://pdfme.com/docs/migration-v6

Use fileURLToPath to replicate __dirname functionality in ESM environments.

```javascript
import fs from 'node:fs';  

import path from 'node:path';  

import { fileURLToPath } from 'node:url';  

  

const __filename = fileURLToPath(import.meta.url);  

const __dirname = path.dirname(__filename);  
```

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

### move(pdf: ArrayBuffer, move: { from: number, to: number })

Source: https://pdfme.com/docs/manipulator

Moves a page from one position to another within the PDF.

```APIDOC
## move(pdf: ArrayBuffer, move: { from: number, to: number })

### Description
Moves a page from one position to another within the PDF.

### Parameters
- **pdf** (ArrayBuffer) - Required - The source PDF.
- **move** (Object) - Required - Object containing 'from' and 'to' indices.
```

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

### Define Converter Types and Interfaces

Source: https://pdfme.com/docs/converter

TypeScript interfaces and types used for configuring PDF conversion operations, including options for scaling, image formats, page ranges, and Markdown styling.

```typescript
import type { BlankPdf, PageOrientation, PageSize } from '@pdfme/common';  

  

type ImageType = 'jpeg' | 'png';  

  

interface PageRange {  

  start?: number;  

  end?: number;  

}  

  

interface Pdf2ImgOptions {  

  scale?: number;  

  imageType?: ImageType;  

  range?: PageRange;  

}  

  

interface Pdf2SizeOptions {  

  scale?: number;  

}  

  

interface Img2PdfOptions {  

  scale?: number;  

  imageType?: ImageType;  

  size?: { height: number, width: number }; // in millimeters  

  margin?: [number, number, number, number]; // in millimeters [top, right, bottom, left]  

}  

  

type BoxSides = { top?: number, right?: number, bottom?: number, left?: number, x?: number, y?: number };  

type MarkdownMargin = number | [number, number, number, number] | BoxSides;  

  

interface Md2PdfOptions {  

  page?: {  

    size?: PageSize;  

    orientation?: PageOrientation;  

    margin?: MarkdownMargin;  

  };  

  basePdf?: BlankPdf;  

  style?: {  

    fontName?: string;  

    fontSize?: number;  

    lineHeight?: number;  

    fontColor?: string;  

    headingScale?: Partial<Record<1 | 2 | 3 | 4 | 5 | 6, number>>;  

  };  

}  
```

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

### JSON Output Format

Source: https://pdfme.com/docs/cli

The structure of the JSON output returned when the --json flag is enabled.

```json
{

  "ok": true,

  "command": "generate",

  "mode": "job",

  "templatePageCount": 1,

  "inputCount": 1,

  "pageCount": 1,

  "outputPath": "out.pdf",

  "outputBytes": 12345,

  "imagePaths": ["out-1.png"]

}
```

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

### Update UI Fonts Dynamically

Source: https://pdfme.com/docs/custom-fonts

Use the updateOptions method to change or update font configurations after the UI instance has been initialized.

```typescript
const font = {  

  serif: {  

    data: 'https://example.com/fonts/serif.ttf',  

  },  

  sans_serif: {  

    data: 'https://example.com/fonts/sans_serif.ttf',  

    fallback: true,  

  },  

};  

  

designer.updateOptions({ font });
```

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

### Define a basePdf with dynamic layout

Source: https://pdfme.com/docs/getting-started

Use this object format for basePdf when utilizing schemas that require dynamic layout or page breaks.

```json
basePdf: { "width": 210, "height": 297, "padding": [10, 10, 10, 10] }  
```

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

### Insert PDF pages

Source: https://pdfme.com/docs/manipulator

Add pages from another PDF into a base PDF at a specific position.

```typescript
import { insert } from '@pdfme/manipulator';  

  

const basePdf = new ArrayBuffer(...); // Base PDF  

const insertPdf = new ArrayBuffer(...); // PDF to insert  

const result = await insert(basePdf, [  

  { pdf: insertPdf, position: 1 } // Insert after first page  

]);
```

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

### img2pdf

Source: https://pdfme.com/docs/converter

Converts one or more images (JPEG or PNG) into a single PDF file.

```APIDOC
## img2pdf(images: ArrayBuffer[], options: { scale: number, imageType: 'png' | 'jpeg', size: { width: number, height: number }, margin: [number, number, number, number] })

### Description
Converts one or more images (JPEG or PNG) into a single PDF file.

### Parameters
- **images** (ArrayBuffer[]) - An array of image data.
- **options** (Object) - Configuration for the conversion.
  - **scale** (number) - The scale factor.
  - **imageType** ('png' | 'jpeg') - The image format.
  - **size** (Object) - The dimensions of the PDF page.
  - **margin** (number[]) - The margins for the PDF page.
```

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

### merge(pdfs: ArrayBuffer[])

Source: https://pdfme.com/docs/manipulator

Combines multiple PDF files into a single PDF.

```APIDOC
## merge(pdfs: ArrayBuffer[])

### Description
Combines multiple PDF files into a single PDF.

### Parameters
- **pdfs** (ArrayBuffer[]) - Required - An array of PDF files as ArrayBuffers.

### Returns
- **Promise<ArrayBuffer>** - The merged PDF.
```

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

### split(pdf: ArrayBuffer, ranges: PageRange[])

Source: https://pdfme.com/docs/manipulator

Splits a PDF into multiple PDFs based on page ranges.

```APIDOC
## split(pdf: ArrayBuffer, ranges: PageRange[])

### Description
Splits a PDF into multiple PDFs based on page ranges.

### Parameters
- **pdf** (ArrayBuffer) - Required - The source PDF.
- **ranges** (PageRange[]) - Required - An array of objects defining start and end page indices.

### Returns
- **Promise<ArrayBuffer[]>** - An array of split PDF files.
```

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

### Convert Markdown with CJK Fonts

Source: https://pdfme.com/docs/converter

Configures CJK-capable fonts for Markdown conversion to ensure proper rendering of non-Latin characters.

```typescript
import { readFile } from 'node:fs/promises';  
import { md2pdf } from '@pdfme/converter/md2pdf';  
import { generate } from '@pdfme/generator';  
import { image, line, list, table, text } from '@pdfme/schemas';  

  

const fontData = await readFile('./fonts/NotoSansJP-Regular.ttf');  
const { template, inputs } = await md2pdf('# 日本語

これはPDF生成のテストです。', {  

  style: { fontName: 'NotoSansJP' },  

});  

  

const pdf = await generate({  

  template,  

  inputs,  

  plugins: { Text: text, List: list, Table: table, Image: image, Line: line },  

  options: {  

    font: {  

      NotoSansJP: { data: fontData, fallback: true, subset: false },  

    },  

  },  

});
```

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

### insert(basePdf: ArrayBuffer, operations: InsertOperation[])

Source: https://pdfme.com/docs/manipulator

Inserts PDF pages at specified positions.

```APIDOC
## insert(basePdf: ArrayBuffer, operations: InsertOperation[])

### Description
Inserts PDF pages at specified positions within the base PDF.

### Parameters
- **basePdf** (ArrayBuffer) - Required - The base PDF.
- **operations** (InsertOperation[]) - Required - Array of objects containing the PDF to insert and the target position.
```

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

### Convert PDF to Images

Source: https://pdfme.com/docs/converter

Converts PDF pages into JPEG or PNG format using the pdf2img function.

```typescript
import { pdf2img } from '@pdfme/converter';  

  

const pdf = new ArrayBuffer(...); // Source PDF  

const images = await pdf2img(pdf, {  

  imageType: 'png',  

  scale: 1,  

  range: { start: 0, end: 1 },  

});
```

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

### Merge PDF files

Source: https://pdfme.com/docs/manipulator

Combine multiple PDF ArrayBuffers into a single PDF.

```typescript
import { merge } from '@pdfme/manipulator';  

  

const pdf1 = new ArrayBuffer(...); // First PDF  

const pdf2 = new ArrayBuffer(...); // Second PDF  

const merged = await merge([pdf1, pdf2]);
```
Tokens:
Raw