Building a Document Template System with React

What is a document template system?

A document template system lets you:

1. Create a DOCX template with placeholders like {customer_name} or {invoice_date}
2. Fill those placeholders with real data from your application
3. Generate completed documents ready for download or email

This pattern is common in legal, HR, finance, and other teams that generate standardized documents from application data.

Why build it in the browser?

Many template engines run on the server: upload a template, send data via API, and receive a filled PDF or DOCX. That works, but it adds trade-offs:

• Server processing for every generated document
• Extra latency from the API round trip
• Data handling requirements when sensitive values are uploaded
• Backend infrastructure for processing and storage

With docx-js-editor, templates can be parsed and filled client-side. Data only leaves the browser if your app uploads it.

Setting up the template editor

First, install the package:

npm install @eigenpal/docx-js-editor

Create a template editor component:

import { useState } from "react";
import { DocxEditor } from "@eigenpal/docx-js-editor";
 
export function TemplateEditor() {
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
 
  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => setBuffer(reader.result as ArrayBuffer);
    reader.readAsArrayBuffer(file);
  };
 
  return (
    <div>
      <input type="file" accept=".docx" onChange={handleUpload} />
      {buffer && (
        <DocxEditor
          documentBuffer={buffer}
          onSave={(blob) => {
            // Save the template
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "template.docx";
            a.click();
            URL.revokeObjectURL(url);
          }}
        />
      )}
    </div>
  );
}

Defining template variables

docx-js-editor uses docxtemplater under the hood. Placeholders use single curly braces:

Dear {recipient_name},

This agreement is entered into on {agreement_date} between
{company_name} ("Company") and {client_name} ("Client").

The total value of this agreement is {currency}{amount}.

You can detect all variables in a template programmatically using the detectVariables() utility, which scans the document body, headers, footers, footnotes, and text boxes.

Use cases

Legal documents

Law firms generate hundreds of contracts, NDAs, and agreements. Template variables typically include:

• Party names and addresses
• Dates (execution, effective, expiration)
• Financial terms (amounts, percentages)
• Jurisdiction-specific clauses

HR and onboarding

HR departments use templates for:

• Offer letters
• Employment contracts
• Benefits enrollment forms
• Policy acknowledgments

Finance and invoicing

Finance teams template:

• Invoices with line items
• Purchase orders
• Financial reports
• Tax documents

Best practices

Keep templates simple

Templates should be maintainable. Avoid deeply nested conditionals. If a template gets too complex, split it into multiple templates.

Version your templates

Store templates in version control or a document management system. When regulations change or terms update, you need to know which version was used for each generated document.

Validate before generating

Check that all required variables have values before generating a document. Missing placeholders in a final document look unprofessional and can have legal implications.

Test with edge cases

Test templates with:

• Very long names that might break table layouts
• Special characters (accents, symbols)
• Empty optional fields
• Multiple pages of repeated data

Next steps

• Try the live editor demo
• Read the React integration guide
• See the source on GitHub