Syncfusion AI Assistant

How can I help you?

Getting Started with Blazor DOCX Editor in Web App

26 May 20266 minutes to read

Syncfusion® Blazor DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application.

Steps to create a Blazor Web App DOCX Editor

This section explains about how to include the Document Editor component in a Blazor Web App using Visual Studio and Visual Studio Code.

Prerequisites

Create a new Blazor Web App in Visual Studio

You can create a Blazor Web App using Visual Studio 2022 via Microsoft Templates.

You need to configure the corresponding Interactive render mode and Interactivity location while creating the Blazor Web App.

Install Document Editor Nuget packages

To add Document Editor component in the application, follow the steps below.

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.WordProcessor -Version 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3

Prerequisites

Create a new Blazor Web App in Visual Studio Code

You can create a Blazor Web App using Visual Studio Code via Microsoft Templates.

You need to configure the corresponding Interactive render mode and Interactivity location while creating a Blazor Web Application.

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands.

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For more information on creating a Blazor Web App with various interactive modes and locations, refer to this link.

Install Document Editor Nuget packages

If you utilize WebAssembly or Auto render modes in the Blazor Web App need to be install Document Editor NuGet packages within the client project.

dotnet add package Syncfusion.Blazor.WordProcessor -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3
dotnet restore

Add import namespaces

Interactive Render Mode Description
WebAssembly or Auto Open ~/_Imports.razor file from the client project.
Server Open ~/_import.razor file, which is located in the Components folder.

Import the Syncfusion.Blazor and Syncfusion.Blazor.DocumentEditor namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.DocumentEditor

Register Syncfusion® Blazor Services

Register the Syncfusion® Blazor service in the Program.cs file of your Blazor Web App.

....
using Syncfusion.Blazor;
....

builder.Services.AddSyncfusionBlazor();

....

NOTE

If the Interactive Render Mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in Program.cs files of both the server and client projects in your Blazor Web App.

Add Themes and Script References

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet reference in the <head> section and the script reference at the end of the <body> in the ~/Components/App.razor file as shown below:

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
....
<body>
    ....
    <script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add the Document Editor component

Add the Document Editor component in the ~/Components/Pages/*.razor file. If an interactivity location as Per page/component in the web app, define a render mode at top of the component, as follows:

Interactivity location RenderMode Code
Per page/component Auto @rendermode InteractiveAuto
  WebAssembly @rendermode InteractiveWebAssembly
  Server @rendermode InteractiveServer
  None —

NOTE

Supported render modes are @rendermode InteractiveAuto, @rendermode InteractiveServer, @rendermode InteractiveWebAssembly. If an interactivity location as Global no need to mention render mode. Set the interactivity mode for whole sample. Check out the Blazor Render Modes for other Render Modes.

@* desired render mode define here *@
@rendermode InteractiveAuto

@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer EnableToolbar=true Height="590px"></SfDocumentEditorContainer>

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Document Editor in your default web browser. The output will appear as follows:

Blazor DOCX Editor in Web app

NOTE

View Sample in GitHub.

See also