Documents Template Studio is a React functional sample that provides a centralized workspace for creating, managing, and editing DOCX document templates using the Syncfusion® React DOCX Editor (Document Editor).
The sample is designed for organizations that need reusable templates for donor communications, receipts, reminders, and impact letters.
The interface features:
- Sidebar with Syncfusion Docx Editor branding and navigation
- Template list displaying available templates in a searchable table
- Create Template dialog for creating blank templates, uploading DOCX files, and configuring signer roles
- Full-screen document editor with merge fields panel on the right side
- Seamless navigation between the template list and editor using back button or sidebar
Users can:
- Search and browse available document templates in a table view.
- Click any template to open it in the Syncfusion Word-like Document Editor.
- View and insert merge fields from the right-side panel.
- Add custom merge fields either to the current template or to the common catalog.
- Create a new blank template with customizable signer roles.
- Upload an existing DOCX template with metadata and role configuration.
- Customize templates with full Word-like editing capabilities.
- Execute mail merge with a JSON data source and preview the merged document.
- Save and publish templates for reuse.
- Remove templates from the application.
The main interface displays templates in a clean, searchable table with the following features:
- Template List — Shows all available templates with name, roles, and creation date.
- Search Functionality — Filter templates by name, type, or description in real-time.
- Sidebar Navigation — Dark-themed sidebar with Syncfusion Docx Editor branding for easy access.
- Quick Actions — Edit and delete buttons for each template in the table.
A unified dialog for creating new templates and uploading existing ones:
- Template Name (required) — User-defined name for the template.
- Description (optional) — Brief description of the template's purpose.
- Signer Roles — Add multiple signing roles (e.g., "Broker", "Client", "Witness") via chips.
- Editable Body (optional) — Upload a
.docxfile or create a blank template.
Selecting a template opens it in a full-screen editor view with:
- Syncfusion DOCX Editor on the left for Word-like document editing.
- Merge Fields Panel on the right displaying available fields for insertion.
- Toolbar with formatting options, including font, size, styles, tables, images, and more.
- Back Button to return to the template list at any time.
The right-side merge-field panel includes:
- Field Chips — Display all available fields (built-in and custom) for the template.
- Insert Fields — Click a field chip to insert it into the document at the cursor position.
- Custom Fields — Add template-specific or common (global) custom fields.
- Field Synchronization — New common fields are immediately visible across all templates.
The Save and Publish action:
- Saves the current document content as a DOCX template through the ASP.NET Core server.
- Stores the template under:
Server-side/wwwroot/Templates/ - Updates the template metadata (name, description, roles) in the catalog.
The Preview with Mail Merge action:
- Opens a dialog for pasting JSON merge data.
- Sends the current DOCX content and JSON data to the ASP.NET Core server.
- Executes mail merge using Syncfusion Word Library (DocIO).
- Displays the merged result in the editor for preview.
- Node.js
- npm
- .NET 10 SDK
- ASP.NET Core runtime
- Syncfusion ASP.NET Core and DocIO packages referenced by the project
The sample consists of two applications:
- ASP.NET Core Web API – provides the server-side APIs required by the Syncfusion Document Editor.
- React application – provides the client-side application.
Start the ASP.NET Core Web API server first because the React application uses the server for DOCX import, save, and Mail Merge operations.
Open a terminal in:
Server-side/
Run:
dotnet restore
dotnet runThe configured development URL is:
http://localhost:5212
The Document Editor service URL used by the React application is:
http://localhost:5212/api/documenteditor/
Keep this terminal running while using the React application.
Before installing the React dependencies or starting the React application, open:
src/data/sampleTemplates.js
Locate the following configuration:
export const DOCUMENT_EDITOR_BASE_URL = 'http://localhost:5212';Update DOCUMENT_EDITOR_BASE_URL to match the URL where your ASP.NET Core Web API is running.
For example:
export const DOCUMENT_EDITOR_BASE_URL = 'http://localhost:5212';Open another terminal in:
Client-side/
Install dependencies:
npm installStart the development server:
npm run devOpen the URL shown by Vite in the terminal, normally:
http://localhost:5173
The sample uses a JSON string for Mail Merge data.
For example, a Pledge Payment Reminder template can use:
{
"Organization": [
{
"OrgName": "ABC Foundation",
"OrgAddress": "123 Main Street, New York, NY 10001",
"ReminderDate": "August 20, 2026",
"DonorName": "Nancy",
"DonorAddress": "45 Oak Street, New York, NY 10002"
}
]
}The main Document Editor endpoints used by the sample are:
| Endpoint | Purpose |
|---|---|
POST /api/documenteditor/Import |
Imports a DOCX and converts it to SFDT. |
POST /api/documenteditor/Save |
Saves the edited SFDT content as a DOCX template. |
POST /api/documenteditor/MailMerge |
Executes Mail Merge using the supplied JSON data and returns SFDT. |
-
Product page: Syncfusion® React DOCX Editor
-
Documentation: Syncfusion® React DOCX Editor - Documentation
-
Online demo: Syncfusion® React DOCX Editor - Online demo
For any other queries, reach our Syncfusion® support team or post the queries through the community forums.
Request new feature through Syncfusion® feedback portal.
This is a commercial product and requires a paid license for possession or use Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a licnense here or start a free 30-day trial here.