How to perform mail merge in React Document Editor

22 Jul 20261 minute to read

You can perform mail merge in the React Document Editor (Document Editor) using the following approaches:

  1. Insert merge fields programmatically using Document Editor APIs.

  2. Execute the mail merge on the Word document using the server-side Word Library (DocIO).

  3. Finally, view the merged document in the Document Editor.

Insert merge fields

A field can be added to the document using the insertField method in the Editor module.

The following example demonstrates how to insert a merge field programmatically by providing the field code and field result.

let fieldCode: string = 'MERGEFIELD  First Name  \\* MERGEFORMAT ';
let fieldResult: string = '«First Name»';
container.documentEditor.editor.insertField(fieldCode, fieldResult);

For more information about Fields, refer to this page.

Perform the mail merge

Once the necessary merge fields are inserted, the template is ready for mail merge. Perform the mail merge on the template using the supported data sources on the server side with DocIO. After the mail merge operation is completed, the merged document can be loaded into the Document Editor for viewing. The Document Editor also supports exporting the mail-merged document to supported formats.

For detailed information about mail merge functionality in DocIO, refer to this page.

Online Demo

Explore how to insert merge fields in the Document Editor and execute the mail merge using DocIO through the live demo provided here.