Add a JavaScript-Based Report Designer to a Blazor Web App (Interactive Server)

• Feb 16, 2026
• 6 minutes to read

This tutorial adds the Report Designer control (DxReportDesigner) to a Blazor Web App (Interactive Server) template.

Create a New Project

This section describes how to create a new Blazor project. If you want to start this tutorial using an existing application, go to Step 2.

1. Click Create a new project on Visual Studio’s start page and select the Blazor Web App template. Select Server from the Interactive Render Mode drop-down list.

2. Specify the project name and location, and click Next.

3. Specify additional options and click Create.

For additional information on available Blazor templates, refer to the following topic: Tooling for ASP.NET Core Blazor.

Install NuGet Packages

Install NuGet packages for Blazor Reporting:

1. Select Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

2. In the invoked dialog, open the Browse tab, and install the following NuGet packages:

3. Build the project.

Refer to the following topic for more information: Install NuGet Packages in Visual Studio, VS Code, and Rider.

Register DevExpress Resources

1. Register the services required for Blazor Reporting, and specify endpoint routing. For this, call the following methods in the Program.cs file:

2. Register DevExpress.Blazor and DevExpress.Blazor.Reporting namespaces in the _Imports.razor file:

3. In the App.razor file, call the RegisterScripts(Action<ResourcesConfigurator>) method to register DevExpress client resources:

Add a Report Storage

1. Implement a ReportStorageWebExtension descendant to load and save reports.

2. In Program.cs, register the CustomReportStorageWebExtension:

3. Add a new Reports folder to a project. The folder name should be specified in the ReportStorageWebExtension implementation.

Create a Sample Report

To perform this step, you should install DevExpress Reporting v25.2 on your machine. Refer to the following topic for more information: Run the Installation Wizard - DevExpress Unified Component Installer.

1. Select Project -> Add New Item… to invoke the Add New Item dialog. Navigate to the Reporting node and select the DevExpress v.25.2 Report item template.

2. Select Blank in the invoked Report Wizard page and click Finish.

3. Modify the newly created report in the Visual Studio Report Designer. Add a label and type Hello, World!:

4. Click the report’s smart tag and select Save… :

Add a Report Designer to a Page

Create a new razor file (ReportDesigner.razor) in the Pages folder. Use the code below to generate a page with a Report Designer component.

Enable interactivity for DevExpress components:

• Make sure the required interactive services are registered.

• Add an appropriate render mode attribute to a component’s page.

@page "/reportdesigner"
@rendermode InteractiveServer

<DxReportDesigner ReportName="TestReport" Height="1000px" Width="100%">
</DxReportDesigner>

The DxReportDesigner loads the TestReport report.

Note

If you implement a custom report that inherits from XtraReport and want to open it in the End-User Report Designer, add a constructor without parameters to this report.

Add Navigation Links

Add navigation links to the NavMenu.razor page:

• NavMenu.razor

<div class="nav-item px-3">
    <NavLink class="nav-link" href="reportdesigner">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Report Designer
    </NavLink>
</div>

Run the Project

Run the project. The Report Designer component loads the TestReport.repx report:

Next Steps

Use Data Sources Learn how to use data sources in the JavaScript-based Report Designer.Customize the Report Designer UI and Behavior

Refer to the following topics to learn how to customize the Report Designer UI and behavior:

• Handle Client-Side Events
• Customize Report and Data Source Wizards
• Customize Toolbar and Menu
• Specify Parameter Editing Settings
• Enable Rich Text Editor
• Create and Register Custom Controls in Toolbox
• Add Custom Functions to Expression Editor

TroubleshootingThis topic lists common issues that can occur in a Web Reporting application and describes solutions. For information on how to identify the cause of an issue, refer to the following topic: Reporting Application Diagnostics.