---
title: "Build a browser form template builder | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/forms/browser-form-template-builder/"
md_url: "https://www.nutrient.io/guides/web/forms/browser-form-template-builder.md"
last_updated: "2026-05-23T00:08:18.171Z"
description: "Canonical end-to-end guide for browser form authoring: enable Form Creator, edit fields, and export templates as PDF, Instant JSON, or XFDF."
---

# Build a browser form template builder

Use this guide when you want one canonical browser-based workflow for authoring reusable PDF form templates.

Recommendation summary:

- Use this guide for end-to-end browser form authoring.

- Use [Instant JSON](https://www.nutrient.io/guides/web/importing-exporting/instant-json.md) as the default internal format for persistence and syncing.

- Use [XFDF](https://www.nutrient.io/guides/web/importing-exporting/xfdf-support.md) when interoperability with external PDF tools is required.

- Use [Document Engine with Instant synchronization](https://www.nutrient.io/guides/web/forms/submit-or-save/to-server-backed.md) for collaborative, multiuser form workflows.

## Minimal runnable project structure

```text

form-template-builder/
├─ index.html
├─ app.js
└─ assets/
   └─ form-template.pdf

```

```html

<div id="nutrient" style="height: 100vh"></div>
<script type="module" src="./app.js"></script>

```

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const instance = await NutrientViewer.load({
  container: "#nutrient",

  document: "/assets/form-template.pdf",
  useCDN: true,
  toolbarItems: [...NutrientViewer.defaultToolbarItems,
    { type: "form-creator" }
  ],
  initialViewState: new NutrientViewer.ViewState({
    formDesignMode: true
  })
});

```

## Step 1 — Enable the built-in Form Creator

Add the `form-creator` toolbar item and enable `formDesignMode`.

- Guide — [Form Creator (built-in UI)](https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md)

- Programmatic API alternative — [Create a fillable form](https://www.nutrient.io/guides/web/forms/form-creation.md)

## Step 2 — Author and edit fields in the browser

Use Form Creator mode to:

- Add text, checkbox, radio, signature, list, combo box, date, and button widgets.

- Edit properties in the popover.

- Move/resize fields directly on the page.

For callback defaults and property alignment guidance, refer to [Form Creator (built-in UI)](https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md).

## Step 3 — Export templates and form data

Choose export format based on workflow requirements.

### Export full PDF (template + embedded fields)

```js

const pdfBuffer = await instance.exportPDF();

```

Use this when you want a standalone artifact with form structure embedded in the PDF.

### Export Instant JSON

```js

const instantJSON = await instance.exportInstantJSON();

```

Use this for internal persistence and sync workflows.

### Export XFDF

```js

const xfdf = await instance.exportXFDF();

```

Use this for interoperability with XFDF-compatible third-party systems.

## When to use each format

Use this table to choose the export format based on your workflow requirements.

| Format                                                       | Use when                                                                         |
| ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| Instant JSON                                                 | You need compact internal storage and syncing data and app-controlled workflows. |
| XFDF                                                         | You need to exchange data with external PDF tools.                               |
| Server-backed (Document Engine with Instant synchronization) | You need collaborative authoring/review across users, sessions, and devices.     |

## Related guides

- [Form Creator (built-in UI)](https://www.nutrient.io/guides/web/forms/create-edit-and-remove/built-in-ui.md)

- [Create a fillable form](https://www.nutrient.io/guides/web/forms/form-creation.md)

- [PDF form data formats](https://www.nutrient.io/guides/web/forms/introduction-to-forms/data-formats.md)

- [Submit and save PDF forms using Document Engine](https://www.nutrient.io/guides/web/forms/submit-or-save/to-server-backed.md)

- [Import data into PDF forms using Instant JSON](https://www.nutrient.io/guides/web/forms/fill-form-fields/import-from-instant-json.md)

- [Import data into PDF forms using XFDF](https://www.nutrient.io/guides/web/forms/fill-form-fields/import-from-xfdf.md)
---

## Related pages

- [Adding a signature field to a PDF form](/guides/web/forms/create-edit-and-remove/add-signature-field.md)
- [JavaScript PDF Form Creator](/guides/web/forms/create-edit-and-remove/built-in-ui.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)