How to customize track changes color in Blazor DOCX Editor?

You can customize the colors used to display tracked changes such as insertions and deletions using the Syncfusion® Blazor 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.

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

Step 1: Create a Blazor application

Start creating a Blazor application and integrating the Syncfusion® Blazor 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 Home.razor file to define the color sequence used for tracked changes.

Code

<SfDocumentEditorContainer @ref="Container" Width="100%" Height="100%" 
    DocumentEditorSettings="Settings" EnableToolbar="true" ShowPropertiesPane="false" LayoutType="LayoutType.Pages">
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
    private SfDocumentEditorContainer? Container;

    // Define settings with revision colors
    private DocumentEditorSettingsModel Settings = new DocumentEditorSettingsModel()
    {
        RevisionSettings = new RevisionSettingsModel() 
        { 
            RevisionColors = new string[] 
            {
                "#FF6B6B",
                "#4ECDC4",
                "#45B7D1",
                "#96CEB4",
                "#FFEAA7"
            }
        }
    };

    public async void OnCreated(object args)
    {
        if (Container != null)
        {
            SfDocumentEditor documentEditor = Container.DocumentEditor;
            if (documentEditor != null)
            {
                await documentEditor.OpenAsync(TrackChangesSfdt);
            }
        }
    }
}

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:

new string[]
{
    "#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® Blazor components. For more information on obtaining and registering your license key, please refer to the https://blazor.syncfusion.com/documentation/getting-started/license-key/how-to-register-in-an-application.

Step 5: Run the application

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

Run the following command from your project directory:

Code

dotnet run

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 Blazor from GitHub.

Conclusion

We hope this guide helped you understand how to customize track change colors for authors in Syncfusion® Blazor 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 Blazor DOCX Editor page to learn about its other groundbreaking feature representations and Getting started, and how to quickly get started for configuration specifications. You can also explore https://blazor.syncfusion.com/demos/document-editor/overview to understand how to create and manipulate data.

For current customers, you can check out our components from the https://www.syncfusion.com/sales/ui-component-suite page. If you are new to Syncfusion®, you can try our 30-day trial.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our https://www.syncfusion.com/forums/docx-editor-sdk, https://support.syncfusion.com/create, or https://www.syncfusion.com/feedback/docx-editor-sdk. We are always happy to assist you!