Add fields to a DOCX template

Use an inline field for content inside a paragraph. Use a block field for one or more whole paragraphs, such as a clause slot.

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.

Add template fieldsOpening document...

Create the fields

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:

Property	This example	Meaning
`kind`	`inline`, `block`	Where the control sits in the document structure
`controlType`	`text`, `richText`	Which content-control operations apply
`tag`	`client.legalName`	Application lookup and grouping key
`alias`	`Client legal name`	Readable title stored in the DOCX
`id`	Assigned on creation	One control occurrence in the document

The content-controls example contains the complete Vanilla TypeScript workflow and verifies both fields after export and reopen.

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

Add both field shapes

Create the fields

On this page