Build a browser form template builder

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

Minimal runnable project structure

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

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

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)
• Programmatic API alternative — Create a fillable form

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).

Step 3 — Export templates and form data

Choose export format based on workflow requirements.

Export full PDF (template + embedded fields)

const pdfBuffer = await instance.exportPDF();

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

Export Instant JSON

const instantJSON = await instance.exportInstantJSON();

Use this for internal persistence and sync workflows.

Export XFDF

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.

Related guides

• Form Creator (built-in UI)
• Create a fillable form
• PDF form data formats
• Submit and save PDF forms using Document Engine
• Import data into PDF forms using Instant JSON
• Import data into PDF forms using XFDF