Add fields to a DOCX template

Use this workflow when your DOCX does not yet have fields your application can find. Wrap a client name in an inline field, then create a block field for a confidentiality clause. If your template already has fields, start with Fill a DOCX template.

Add both field shapes

Select the client name and add the inline field. Then place the caret on the empty line below Confidentiality and add the block field.

Create the fields

Use the complete Vanilla TypeScript example and choose Add fields. It includes the untagged agreement, selection controls, Editor setup, and export button.

Pass the current selection target to create.contentControl(). Here, the inline call wraps a text selection. The block call targets an empty paragraph and replaces it with the supplied HTML content:

import type { BrowserDocumentApi, SelectionTarget } from 'superdoc/ui';

export async function addClientNameField(doc: BrowserDocumentApi, selection: SelectionTarget) {
  return doc.create.contentControl({
    kind: 'inline',
    controlType: 'text',
    tag: 'client.legalName',
    alias: 'Client legal name',
    at: selection,
  });
}

export async function addConfidentialityField(doc: BrowserDocumentApi, caret: SelectionTarget) {
  return doc.create.contentControl({
    kind: 'block',
    controlType: 'richText',
    tag: 'agreement.confidentiality',
    alias: 'Confidentiality clause',
    html: '<p>Each party will protect confidential information with reasonable care.</p>',
    at: caret,
  });
}

kind controls placement. controlType controls field behavior:

The example obtains the selection from the Editor-owned UI controller after readiness. The helper needs a current selection target, not the selected text alone. Check the creation receipt before treating the field as available.

Keep the fields in your template

Export the DOCX from the standalone example and reopen it. Confirm that the client name is an inline text control and the confidentiality clause is a block rich-text control, with the tags and titles shown above. Keep this file as the template you fill later; reopening the original draft will not include the fields you just added.

Continue with Fill a DOCX template to update fields from application data. Use the create.contentControl() reference for every input shape.