---
title: "JavaScript PDF Form Creator: Built-in UI | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui/"
md_url: "https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md"
last_updated: "2026-05-25T12:14:42.988Z"
description: "Use this guide for browser form authoring with the built-in Form Creator UI. Learn creation/editing flows and how to pair them with export and data format guides."
---

# JavaScript PDF Form Creator

Starting with [Nutrient Web SDK 2022.3](https://www.nutrient.io/blog/pspdfkit-web-2022-3-new-pdf-form-creator-ui/), the advanced JavaScript PDF Form Creator (formerly Form Designer) was updated to include a built-in UI. This new UI enables you to create, edit, and remove widget annotations.

Use this guide when building browser-based form authoring tools. For an end-to-end implementation (setup → authoring → export), refer to the [building a browser form template builder](https://www.nutrient.io/guides/web/forms/browser-form-template-builder.md) guide.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/pdf-form-creator)

Check out the video below for more information about creating forms using the built-in UI.

## License

You need the [Form Creator](https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md) component added to your license to use the features and APIs mentioned in this guide.

## Form Creator UI

The next sections outline the different steps required to enable Form Creator in the main toolbar and detail how you can use it to create, edit, and delete widget annotations.

### Main toolbar

To enable form creation using the toolbar, you have to add the form creator button to the toolbar, as it isn’t available in the toolbar by default:

```javascript

NutrientViewer.load({...baseOptions,
  toolbarItems: [...NutrientViewer.defaultToolbarItems,
    {
      type: "form-creator"
    }
  ]
});

```

You can also add it after the PDF document has been loaded:

```javascript

instance.setToolbarItems((items) => [...items,
  { type: "form-creator" }
]);

```

The `NutrientViewer.InteractionMode.FORM_CREATOR` mode is activated once you click this button. You’ll be able to create, edit, or delete widget annotations when you’re in this mode.

### Creation

Once you click the form creator button in the main toolbar, you can see the secondary toolbar. This toolbar contains the following buttons:

- **Text widget annotations** — Creates a text widget annotation.

- **Checkbox widget annotations** — Creates a checkbox widget annotation.

- **Radio button widget annotations** — Creates a radio button widget annotation.

- **Signature widget annotations** — Creates a signature widget annotation.

- **List widget annotations** — Creates a list widget annotation.

- **Combo box widget annotations** — Creates a combo box widget annotation.

- **Date and datetime widget annotations** — Creates a date or datetime widget annotation.

- **Button widget annotations** — Creates a button widget annotation.

You can create a widget annotation by clicking the button and then clicking on the page. The widget annotation will be created on the page where you clicked and created with the default settings. You can use [`NutrientViewer.Configuration#onWidgetAnnotationCreationStart`](https://www.nutrient.io/api/web/interfaces/Configuration.html#onwidgetannotationcreationstart) or [`NutrientViewer.Instance#setOnWidgetAnnotationCreationStart`](https://www.nutrient.io/api/web/classes/NutrientViewer.Instance.html#setonwidgetannotationcreationstart) to change the default properties with which the form field is created.

#### Widget initialization callback guidance

When initializing widget/form field defaults in creation callbacks, keep property names aligned between the widget and form field:

- Use `formFieldName` on the widget annotation.

- Use `name` on the form field.

- Ensure both values match.

- For combo box and list box fields, set `options` together with `values`/`defaultValues` consistently.

**Example of a misconfigured callback return value (names don’t match):**

```js

{
  widgetAnnotation: {
    formFieldName: "EmailField"
  },
  formField: {
    name: "Email"
  }
}

```

**Corrected callback return value (linked names):**

```js

{
  widgetAnnotation: {
    formFieldName: "Email"
  },
  formField: {
    name: "Email"
  }
}

```

For combo box and list box fields, keep `options`, `values`, and `defaultValues` aligned so initial selections map to defined options consistently:

```js

{
  formField: {
    options: NutrientViewer.Immutable.List([
      new NutrientViewer.FormOption({ label: "Option A", value: "option-a" }),
      new NutrientViewer.FormOption({ label: "Option B", value: "option-b" })
    ]),
    values: NutrientViewer.Immutable.List(["option-a"]),
    defaultValues: NutrientViewer.Immutable.List(["option-a"])
  }
}

```

For export strategy after authoring, refer to the [building a browser form template builder](https://www.nutrient.io/guides/web/forms/browser-form-template-builder.md) and [PDF form data formats](https://www.nutrient.io/guides/web/forms/introduction-to-forms/data-formats.md) guides.

### Editing

You can edit a widget annotation by clicking it. The widget annotation will be selected, and a popover to change the widget and form field properties will be shown. You’ll be able to see the changes in real time, but those changes will only be saved once you close the popover.

### Rotation

You can rotate widget annotations in 90-degree angles in the following ways:

- With the toolbar buttons.

- With the Form Creator popover window.

### Deletion

You can delete a widget annotation by clicking it and then clicking the delete button. You can also press the delete button on your keyboard to delete the widget annotation.

Go to our [Form Creator demo](https://www.nutrient.io/demo/pdf-form-creator/) to play with the built-in UI and see it in action.
---

## Related pages

- [Adding a signature field to a PDF form](/guides/web/forms/create-edit-and-remove/add-signature-field.md)
- [Build a browser form template builder](/guides/web/forms/browser-form-template-builder.md)
- [Create fillable PDF forms using JavaScript](/guides/web/forms/form-creation.md)
- [Edit PDF form fields using JavaScript](/guides/web/forms/create-edit-and-remove/edit-fields.md)
- [Remove form fields from PDFs using JavaScript](/guides/web/forms/create-edit-and-remove/remove-fields.md)
- [PDF form field flags](/guides/web/forms/create-edit-and-remove/form-field-flags.md)