Skip to main content
A React component for creating document templates with dynamic fields that can be populated with data at merge time.

​
What it does

  • Load Word documents and convert them into reusable templates
  • Insert dynamic fields using a simple trigger pattern ({{)
  • Distinguish field types (owner vs signer) with visual color-coding
  • Link fields into groups that stay in sync
  • Let users create custom fields inline
  • Export templates with embedded field definitions
  • Navigate between fields using keyboard shortcuts

​
Common use cases

  • Contract templates - Customer names, dates, terms that change per agreement
  • Invoice templates - Line items, totals, and customer information
  • Form letters - Personalized content with consistent structure
  • Report templates - Dynamic data sections with repeating groups
  • Signing workflows - Distinguish owner-filled vs signer-filled fields

​
How it works

import SuperDocTemplateBuilder from "@superdoc-dev/template-builder";
import "superdoc/style.css";

function TemplateEditor() {
  return (
    <SuperDocTemplateBuilder
      document={{
        source: "contract-template.docx",
        mode: "editing",
      }}
      fields={{
        available: [
          { id: "1", label: "Customer Name" },
          { id: "2", label: "Contract Date" },
          { id: "3", label: "Signature", mode: "block", fieldType: "signer" },
        ],
      }}
      list={{ position: "right" }}
      onFieldInsert={(field) => console.log("Inserted:", field.alias, field.fieldType)}
    />
  );
}
Users type {{ anywhere in the document to insert fields. The sidebar shows all fields in the template.

​
Key concepts

Fields - Placeholders in the document that get replaced with actual data during merge operations. Each field has a unique identifier. Field types - Fields can be tagged with a type like 'owner' or 'signer'. Think of owner fields as those that get prepopulated with known data (company name, address, contract terms), while signer fields are filled dynamically by the recipient (signature, date signed, initials). The default type is 'owner'. Inside the document, both types are identical — the distinction is a metadata label so you can filter and route fields on your side during export and merge. Structured Document Tags (SDT) - The underlying Word standard used to mark field locations. Ensures compatibility with Microsoft Word. Linked fields (groups) - When you insert a copy of an existing field, both instances share a group ID and stay in sync. Useful for repeating the same value in multiple places. Trigger pattern - The character sequence (default {{) that opens the field insertion menu.

​
Next steps

Quick Start

Get running in 5 minutes

Configuration

Learn all available options

API Reference

Complete technical reference