Creating and filling PDF forms programmatically in JavaScript

Teja Tatimatla

Hulya Masharipov

Updated: December 18, 2025

Creating and filling PDF forms programmatically in JavaScript

Summary

Create PDF forms with text fields, checkboxes, radio buttons, and signatures using Nutrient Web SDK. Fill forms programmatically from Instant JSON, XFDF, or a database.

PDF forms automate data collection for applications, contracts, surveys, and onboarding workflows. This tutorial shows how to create form fields programmatically and populate them with data.

What you’ll build:

Text inputs, checkboxes, radio buttons, and a signature field
Prefilled forms using JSON or XFDF
Database-driven form population

Display a PDF

Create a project directory:
Terminal window
```
mkdir CreatingPdfForms
cd CreatingPdfForms
npm init -y
```
Install Nutrient and Vite:
Terminal window
```
npm install @nutrient-sdk/viewer
npm install -D vite
```

The useCDN: true option loads SDK assets from Nutrient's CDN, so no manual asset copying is required.

Add a PDF document named document.pdf to your project’s root directory.
Create index.html and index.js:
Terminal window
```
touch index.html index.js
```
Add this to index.js:
```
(async () => {
  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
  const container = document.getElementById("pspdfkit");

  NutrientViewer.load({
    container,
    document: "document.pdf",
    useCDN: true,
  })
    .then((instance) => {
      console.log("Nutrient loaded", instance);
    })
    .catch((error) => {
      console.error(error.message);
    });
})();
```
Add this to index.html:
```
<!DOCTYPE html>
<html>
  <head>
    <title>PDF Forms</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="pspdfkit" style="width: 100%; height: 100vh;"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>
```
Start the dev server:
Terminal window
```
npx vite
```

Add form fields

Each form field needs two parts: a widget annotation (position and size) and a form field (type and behavior).

The widget annotation defines where the field appears:

const firstNameWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "First Name",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 115,
    top: 98,
    width: 200,
    height: 25,
  }),
});

The form field defines the field type and links to the widget:

const firstNameFormField = new NutrientViewer.FormFields.TextFormField({
  name: "First Name",
  annotationIds: new NutrientViewer.Immutable.List([firstNameWidget.id]),
});

Create both together:

await instance.create([firstNameWidget, firstNameFormField]);

This is the signature field:

const signatureWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 43,
    top: 325,
    width: 150,
    height: 75,
  }),
  formFieldName: "Signature",
});

const signatureFormField = new NutrientViewer.FormFields.SignatureFormField({
  name: "Signature",
  annotationIds: new NutrientViewer.Immutable.List([signatureWidget.id]),
});

await instance.create([signatureWidget, signatureFormField]);

Radio buttons and checkboxes use multiple widget annotations for different values:

// Radio button widgets.
const yesRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "Human",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 80, top: 188, width: 20, height: 20,
  }),
});

const noRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "Human",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 80, top: 214, width: 20, height: 20,
  }),
});

const maybeRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "Human",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 80, top: 240, width: 20, height: 20,
  }),
});

const radioFormField = new NutrientViewer.FormFields.RadioButtonFormField({
  name: "Human",
  annotationIds: new NutrientViewer.Immutable.List([
    yesRadioWidget.id,
    noRadioWidget.id,
    maybeRadioWidget.id,
  ]),
  options: new NutrientViewer.Immutable.List([
    new NutrientViewer.FormOption({ label: "Yes", value: "1" }),
    new NutrientViewer.FormOption({ label: "No", value: "2" }),
    new NutrientViewer.FormOption({ label: "Maybe", value: "3" }),
  ]),
  defaultValue: "Maybe",
});

// Checkbox
const checkBoxWidget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "Fun",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 128, top: 269.5, width: 20, height: 20,
  }),
});

const checkBoxFormField = new NutrientViewer.FormFields.CheckBoxFormField({
  name: "Fun",
  annotationIds: new NutrientViewer.Immutable.List([checkBoxWidget.id]),
  options: new NutrientViewer.Immutable.List([
    new NutrientViewer.FormOption({ label: "FunCheck", value: "1" }),
  ]),
});

await instance.create([
  yesRadioWidget, noRadioWidget, maybeRadioWidget, radioFormField,
  checkBoxWidget, checkBoxFormField,
]);

Here’s a complete example for creating all form fields:

1
(async () => {
2
  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
3
  const container = document.getElementById("pspdfkit");
4

5
  NutrientViewer.load({
6
    container,
7
    document: "document.pdf",
8
    useCDN: true,
9
  })
10
    .then(async (instance) => {
11
      console.log("Nutrient loaded", instance);
12

164 collapsed lines
13
    // Creating the first name text form field.
14
    const firstNameWidget = new NutrientViewer.Annotations.WidgetAnnotation(
15
      {
16
        id: NutrientViewer.generateInstantId(),
17
        pageIndex: 0,
18
        formFieldName: 'First Name',
19
        boundingBox: new NutrientViewer.Geometry.Rect({
20
          left: 115,
21
          top: 98,
22
          width: 200,
23
          height: 25,
24
        }),
25
      },
26
    );
27

28
    const firstNameFormField = new NutrientViewer.FormFields.TextFormField({
29
      name: 'First Name',
30
      annotationIds: new NutrientViewer.Immutable.List([
31
        firstNameWidget.id,
32
      ]),
33
    });
34

35
    // Creating the last name text form field.
36
    const lastNameWidget = new NutrientViewer.Annotations.WidgetAnnotation({
37
      id: NutrientViewer.generateInstantId(),
38
      pageIndex: 0,
39
      formFieldName: 'Last Name',
40
      boundingBox: new NutrientViewer.Geometry.Rect({
41
        left: 115,
42
        top: 128,
43
        width: 200,
44
        height: 25,
45
      }),
46
    });
47

48
    const lastNameFormField = new NutrientViewer.FormFields.TextFormField({
49
      name: 'Last Name',
50
      annotationIds: new NutrientViewer.Immutable.List([
51
        lastNameWidget.id,
52
      ]),
53
    });
54

55
    // Creating a new radio button form field.
56
    const yesRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation({
57
      id: NutrientViewer.generateInstantId(),
58
      pageIndex: 0,
59
      formFieldName: 'Human',
60
      boundingBox: new NutrientViewer.Geometry.Rect({
61
        left: 80,
62
        top: 188,
63
        width: 20,
64
        height: 20,
65
      }),
66
    });
67

68
    const noRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation({
69
      id: NutrientViewer.generateInstantId(),
70
      pageIndex: 0,
71
      formFieldName: 'Human',
72
      boundingBox: new NutrientViewer.Geometry.Rect({
73
        left: 80,
74
        top: 214,
75
        width: 20,
76
        height: 20,
77
      }),
78
    });
79

80
    const maybeRadioWidget = new NutrientViewer.Annotations.WidgetAnnotation(
81
      {
82
        id: NutrientViewer.generateInstantId(),
83
        pageIndex: 0,
84
        formFieldName: 'Human',
85
        boundingBox: new NutrientViewer.Geometry.Rect({
86
          left: 80,
87
          top: 240,
88
          width: 20,
89
          height: 20,
90
        }),
91
      },
92
    );
93

94
    const radioFormField = new NutrientViewer.FormFields.RadioButtonFormField(
95
      {
96
        name: 'Human',
97
        annotationIds: new NutrientViewer.Immutable.List([
98
          yesRadioWidget.id,
99
          noRadioWidget.id,
100
          maybeRadioWidget.id,
101
        ]),
102
        options: new NutrientViewer.Immutable.List([
103
          new NutrientViewer.FormOption({
104
            label: 'Yes',
105
            value: '1',
106
          }),
107
          new NutrientViewer.FormOption({
108
            label: 'No',
109
            value: '2',
110
          }),
111
          new NutrientViewer.FormOption({
112
            label: 'Maybe',
113
            value: '3',
114
          }),
115
        ]),
116
        defaultValue: 'Maybe',
117
      },
118
    );
119

120
    // Creating a new checkbox form field.
121
    const checkBoxWidget = new NutrientViewer.Annotations.WidgetAnnotation({
122
      id: NutrientViewer.generateInstantId(),
123
      pageIndex: 0,
124
      formFieldName: 'Fun',
125
      boundingBox: new NutrientViewer.Geometry.Rect({
126
        left: 128,
127
        top: 269.5,
128
        width: 20,
129
        height: 20,
130
      }),
131
    });
132

133
    const checkBoxFormField = new NutrientViewer.FormFields.CheckBoxFormField(
134
      {
135
        name: 'Fun',
136
        annotationIds: new NutrientViewer.Immutable.List([
137
          checkBoxWidget.id,
138
        ]),
139
        options: new NutrientViewer.Immutable.List([
140
          new NutrientViewer.FormOption({
141
            label: 'FunCheck',
142
            value: '1',
143
          }),
144
        ]),
145
      },
146
    );
147

148
    // Creating a new signature form field.
149
    const signatureWidget = new NutrientViewer.Annotations.WidgetAnnotation(
150
      {
151
        id: NutrientViewer.generateInstantId(),
152
        pageIndex: 0,
153
        boundingBox: new NutrientViewer.Geometry.Rect({
154
          left: 43,
155
          top: 325,
156
          width: 150,
157
          height: 75,
158
        }),
159
        formFieldName: 'Signature',
160
      },
161
    );
162

163
    const signatureFormField = new NutrientViewer.FormFields.SignatureFormField(
164
      {
165
        name: 'Signature',
166
        annotationIds: new NutrientViewer.Immutable.List([
167
          signatureWidget.id,
168
        ]),
169
      },
170
    );
171

172
    await instance.create([
173
      firstNameWidget,
174
      firstNameFormField,
175
      lastNameWidget,
176
      lastNameFormField,
177
      yesRadioWidget,
178
      noRadioWidget,
179
      maybeRadioWidget,
180
      radioFormField,
181
      checkBoxWidget,
182
      checkBoxFormField,
183
      signatureWidget,
184
      signatureFormField,
185
    ]);
186
    })
187
    .catch((error) => {
188
      console.error(error.message);
189
    });
190
})();

Form field creation result

Now, export the resulting document and use it in the next section to fill out the form fields. To do that, add the following after instance.create();:

instance.exportPDF().then((buffer) => {
  const blob = new Blob([buffer], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "document.pdf";
  a.click();
  URL.revokeObjectURL(url);
});

Refresh your app in the browser to get a copy of the document with the form fields.

gif showing the result of 'instance.exportPDF()'

Fill forms with Instant JSON

Now that you have a form with fields, let's explore how to populate them programmatically with data.

Use the exported PDF from the previous section. First, check what fields exist:

const formFieldValues = instance.getFormFieldValues();
console.log(formFieldValues);

image showing the result of 'console.log(formFieldValues);'

Keys are field names, and values are null, string, or Array<string>.

Pass form values in the instantJSON option:

instantJSON: {
  format: "https://pspdfkit.com/instant-json/v1",
  formFieldValues: [
    {
      name: "First Name",
      value: "John",
      type: "pspdfkit/form-field-value",
      v: 1,
    },
    {
      name: "Last Name",
      value: "Appleseed",
      type: "pspdfkit/form-field-value",
      v: 1,
    },
    {
      name: "Human",
      value: "3",
      type: "pspdfkit/form-field-value",
      v: 1,
    },
    {
      name: "Fun",
      value: "1",
      type: "pspdfkit/form-field-value",
      v: 1,
    },
  ],
}

Signature fields require an ink annotation instead of a value. The code below draws a simple “X” signature by creating two diagonal lines within the signature field's boundaries:

// The name of the signature field you want.
//
const formFieldName = 'Signature';

// First, get all `FormFields` in the `Document`.
//
const formFields = await instance.getFormFields();

// Get a signature form with the specific name you want.
//
const field = formFields.find(
  (formField) =>
    formField.name === formFieldName &&
    formField instanceof NutrientViewer.FormFields.SignatureFormField,
);

// In this example, assume the widget you need is on the first page.
//
const annotations = await instance.getAnnotations(0);

// Find that widget.
//
const widget = annotations.find(
  (annotation) =>
    annotation instanceof NutrientViewer.Annotations.WidgetAnnotation &&
    annotation.formFieldName === field.name,
);

// Make a new ink annotation.
//
const annotation = new NutrientViewer.Annotations.InkAnnotation({
  pageIndex: 0,
  lines: NutrientViewer.Immutable.List([
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 10,
        y: widget.boundingBox.top + 10,
      }),
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + widget.boundingBox.height - 10,
      }),
    ]),
    NutrientViewer.Immutable.List([
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + widget.boundingBox.width - 10,
        y: widget.boundingBox.top + 10,
      }),
      new NutrientViewer.Geometry.DrawingPoint({
        x: widget.boundingBox.left + 10,
        y: widget.boundingBox.top + widget.boundingBox.height - 10,
      }),
    ]),
  ]),
  boundingBox: widget.boundingBox,
  isSignature: true,
});

instance.create(annotation);

Here’s a complete example for filling form fields and adding a signature:

1
(async () => {
2
  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
3
  const container = document.getElementById("pspdfkit");
4

5
  NutrientViewer.load({
6
    container,
7
    document: "document.pdf",
8
    useCDN: true,
9
    instantJSON: {
10
      format: "https://pspdfkit.com/instant-json/v1",
11
      formFieldValues: [
12
        { name: "First Name", value: "John", type: "pspdfkit/form-field-value", v: 1 },
13
        { name: "Last Name", value: "Appleseed", type: "pspdfkit/form-field-value", v: 1 },
14
        { name: "Human", value: "3", type: "pspdfkit/form-field-value", v: 1 },
15
        { name: "Fun", value: "1", type: "pspdfkit/form-field-value", v: 1 },
16
      ],
17
    },
18
  })
19
    .then(async (instance) => {
20
      console.log("Nutrient loaded", instance);
21

31 collapsed lines
22
      // Get the signature field.
23
      const formFields = await instance.getFormFields();
24
      const field = formFields.find(
25
        (f) => f.name === "Signature" && f instanceof NutrientViewer.FormFields.SignatureFormField
26
      );
27
      if (!field) return;
28

29
      // Get the widget annotation.
30
      const annotations = await instance.getAnnotations(0);
31
      const widget = annotations.find(
32
        (a) => a instanceof NutrientViewer.Annotations.WidgetAnnotation && a.formFieldName === field.name
33
      );
34
      if (!widget) return;
35

36
      // Create an ink annotation as the signature.
37
      const annotation = new NutrientViewer.Annotations.InkAnnotation({
38
        pageIndex: 0,
39
        lines: NutrientViewer.Immutable.List([
40
          NutrientViewer.Immutable.List([
41
            new NutrientViewer.Geometry.DrawingPoint({ x: widget.boundingBox.left + 10, y: widget.boundingBox.top + 10 }),
42
            new NutrientViewer.Geometry.DrawingPoint({ x: widget.boundingBox.left + widget.boundingBox.width - 10, y: widget.boundingBox.top + widget.boundingBox.height - 10 }),
43
          ]),
44
          NutrientViewer.Immutable.List([
45
            new NutrientViewer.Geometry.DrawingPoint({ x: widget.boundingBox.left + widget.boundingBox.width - 10, y: widget.boundingBox.top + 10 }),
46
            new NutrientViewer.Geometry.DrawingPoint({ x: widget.boundingBox.left + 10, y: widget.boundingBox.top + widget.boundingBox.height - 10 }),
47
          ]),
48
        ]),
49
        boundingBox: widget.boundingBox,
50
        isSignature: true,
51
      });
52

53
      instance.create(annotation);
54
    })
55
    .catch((error) => {
56
      console.error(error.message);
57
    });
58
})();

Form fields filled with Instant JSON

Fill forms with XFDF

XFDF is an XML format for form data:

(async () => {
  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
  const container = document.getElementById("pspdfkit");

  const XFDF = `<?xml version="1.0" encoding="UTF-8"?>
<xfdf xml:space="preserve" xmlns="http://ns.adobe.com/xfdf/">
  <annots></annots>
  <fields>
    <field name="First Name"><value>John</value></field>
    <field name="Last Name"><value>Appleseed</value></field>
    <field name="Human"><value>3</value></field>
    <field name="Fun"><value>1</value></field>
  </fields>
</xfdf>`;

  NutrientViewer.load({
    container,
    document: "document.pdf",
    useCDN: true,
    XFDF,
  });
})();

Form fields filled with XFDF

Fill forms from a database

Fetch user data from your API and convert it to Instant JSON:

// Example response from `/user` endpoint.
{ "firstName": "John", "lastName": "Appleseed", "human": "3", "fun": "1" }

(async () => {
  const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
  const container = document.getElementById("pspdfkit");

  // Fetch user data from your server.
  const response = await fetch("https://[YOUR-SERVER]/user");
  const { firstName, lastName, human, fun } = await response.json();

  // Convert to Instant JSON format.
  const instantJSON = {
    format: "https://pspdfkit.com/instant-json/v1",
    formFieldValues: [
      { v: 1, type: "pspdfkit/form-field-value", name: "First Name", value: firstName },
      { v: 1, type: "pspdfkit/form-field-value", name: "Last Name", value: lastName },
      { v: 1, type: "pspdfkit/form-field-value", name: "Human", value: human },
      { v: 1, type: "pspdfkit/form-field-value", name: "Fun", value: fun },
    ],
  };

  NutrientViewer.load({
    container,
    document: "document.pdf",
    useCDN: true,
    instantJSON,
  });
})();

Form fields filled from database

FAQ

What form field types does Nutrient support?

Nutrient supports text fields, checkboxes, radio buttons, signature fields, combo boxes (dropdowns), and list boxes. Each type has a corresponding class like TextFormField, CheckBoxFormField, and SignatureFormField.

How do I read form field values?

Use instance.getFormFieldValues() to get all values as an object where keys are field names and values are the current entries. For individual fields, use instance.getFormFields() to access field properties.

What’s the difference between Instant JSON and XFDF?

Instant JSON is Nutrient’s native format — it’s compact and supports all Nutrient features, including annotations. XFDF is an Adobe standard XML format with broader compatibility across PDF tools. Use Instant JSON for Nutrient-only workflows and XFDF when exchanging data with other PDF software.

Can I make form fields required?

Yes. Set the required property to true when creating a form field:

const field = new NutrientViewer.FormFields.TextFormField({
  name: "Email",
  required: true,
  annotationIds: new NutrientViewer.Immutable.List([widget.id]),
});

How do I export a filled PDF form?

Use instance.exportPDF() to get the PDF as an ArrayBuffer. You can then create a download link or send it to your server:

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

Conclusion

You now have a PDF form with text fields, checkboxes, radio buttons, and signatures that can be prefilled from JSON, XFDF, or your database. Use this to build document workflows, onboarding forms, or contract signing apps.

Try the forms demo or explore the forms documentation.