How to customize track changes color in React DOCX Editor?

You can customize the color used to display tracked changes such as insertions and deletions using the Syncfusion® React DOCX Editor. This dedicated UI tool provides a rich, Word-like editing experience within a web application, allowing users to create, edit, view, and print Word documents (DOCX, WordML, DOC, RTF, TXT) directly in the browser.

Custom colors for track changes

You can set an array of colors to show track changes such as insertions and deletions in the DOCX Editor.

Each author is assigned a color in order:

• The first author gets the first color.
• The second author gets the next color.
• Subsequent authors continue receiving colors in sequence.
• If there are more authors than colors, the assignment starts again from the beginning of the array.

This helps visually distinguish revisions made by different collaborators and provides a better document review experience.

Prerequisites

Before starting, ensure your development environment meets the following requirements:

• Node.js: Version 14.0.0 or above
• React: Version 15.5.4 or higher

For detailed system requirements, refer to the https://ej2.syncfusion.com/react/documentation/system-requirement.

Step-by-step guide to customize track change colors in DOCX Editor

Step 1: Create a React app

Start creating a React application and integrating the Syncfusion® React DOCX Editor. This integration enables you to configure and customize track changes features within your application.

Step 2: Configure custom colors for track changes

Update the src/App.js file to define the color sequence used for tracked changes.

Code

  let container = useRef<DocumentEditorContainerComponent>(null);
  containerRef.current.documentEditorSettings.revisionSettings.revisionColors = [ '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'];

Step 3: Understanding color assignment

The configured colors are assigned to authors in the order they appear.

For example, if the following colors are configured:

[
  '#FF6B6B',
  '#4ECDC4',
  '#45B7D1',
  '#96CEB4',
  '#FFEAA7'
]

The assignment order will be:

This ensures every author’s tracked revisions are displayed consistently, even when the number of collaborators exceeds the number of configured colors.

Step 4: Add the license key

From v20.1.047 onwards, it is necessary to register a license key for Syncfusion® React components. For more information on obtaining and registering your license key, please refer to the https://ej2.syncfusion.com/react/documentation/licensing/license-key-registration.

Step 5: Run the application

To see the Syncfusion® React DOCX Editor in action, run your React application.

Run the following command from your React project directory:

Code

npm start

Step 6: Verify the track change colors

Enable Track Changes and make revisions using multiple authors.

The DOCX Editor automatically applies the configured color sequence to tracked insertions and deletions. As new authors contribute to the document, colors are assigned sequentially from the configured collection and reused when necessary.

You can download a complete working sample demonstrating custom colors for track changes in React DOCX Editor from GitHub.

Conclusion

We hope this guide helped you understand how to customize track change colors for authors in Syncfusion® React DOCX Editor. By configuring a custom color sequence, you can improve document collaboration and easily identify revisions made by different contributors.

You can refer to our React DOCX Editor feature tour page to learn about its other features and refer Getting started, how to quickly get started for configuration specifications. You can also explore Online demo to understand how to create and manipulate data.

If you are new to Syncfusion®, you can try our 30-day Trial to check out DOCX Editor.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Ticket, or Feedback. We are always happy to assist you!