Add a JavaScript-Based Report Designer to a Blazor WebAssembly Standalone App (Visual Studio)

• Feb 09, 2026
• 5 minutes to read

This tutorial adds a Report Designer (DxReportDesigner) to an application created with the Blazor WebAssembly Standalone App template.

Note

This tutorial does not contain a sample implementation of a report storage. To save a report edited or created in the Report Designer, you can do one of the following:

• Implement and register the ReportStorageWebExtension service.
• Use the HttpClient service to call a server-side web API.

Create a New Project

This section describes how to create a new Blazor project. If you want to add Report Designer and Document Viewer to an existing application, go to Step 2.

1. Click Create a new project on Visual Studio’s start page, select the Blazor WebAssembly Standalone App template, and click Next.

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

3. Specify additional options, and click Create.

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

Install NuGet Packages

Install NuGet packages required for DevExpress Reporting:

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

2. Once the dialog appears on screen, open the Browse tab, select the All as a package source, and install the following NuGet packages:

   • DevExpress.Drawing.Skia
   • DevExpress.Blazor.Reporting.JSBasedControls
   • SkiaSharp.Views.Blazor
   • SkiaSharp.NativeAssets.WebAssembly
   • HarfBuzzSharp.NativeAssets.WebAssembly

3. In the Solution Explorer, right-click the project and select Edit Project File. Add the following native dependency to the application project file:

   <ItemGroup>
       <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\2.0.23\*.a" />
   </ItemGroup>
   

4. Build the project.

Register DevExpress Resources

1. In the _Imports.razor file, register the DevExpress.Blazor.Reporting namespace:

   _Imports.razor

   @using DevExpress.Blazor.Reporting
   

2. In the Program.cs file, register services required for Blazor Reporting. To do this, call the AddDevExpressBlazorReportingWebAssembly method:

   Program.cs

   using BlazorApp1;
   using Microsoft.AspNetCore.Components.Web;
   using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
   using DevExpress.Blazor.Reporting;
   
   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   builder.RootComponents.Add<App>("#app");
   builder.RootComponents.Add<HeadOutlet>("head::after");
   
   builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
   
   builder.Services.AddDevExpressBlazorReportingWebAssembly(configure => {
       configure.UseDevelopmentMode();
   });
   
   await builder.Build().RunAsync();
   

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

   App.razor

   <HeadContent>
   @*...*@
   @DxResourceManager.RegisterScripts()
   @*...*@
   </HeadContent>
   

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.

Pages/ReportDesigner.razor

@page "/reportdesigner"

<DxReportDesigner ReportName="TestReport">
</DxReportDesigner>

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>

Add Code to Load Fonts

Before the application can run in a browser, register fonts to ensure that the Skia library can use them to draw report content.

This example implements a custom service that loads fonts: FontLoader.

1. Create the Services folder in the project. Create a new class file (FontLoader.cs) with the following content:

   FontLoader.cs

   using DevExpress.Drawing;
   
   public static class FontLoader {
       public async static Task LoadFonts(HttpClient httpClient, List<string> fontNames) {
           foreach(var fontName in fontNames) {
               var fontBytes = await httpClient.GetByteArrayAsync($"fonts/{fontName}");
               DXFontRepository.Instance.AddFont(fontBytes);
           }
       }
   }
   

2. Add a LoadFonts method call to the MainLayout.razor page:

   MainLayout.razor

   // ...
   
   @code {
       [Inject] HttpClient Http { get; set; }
       List<string> RequiredFonts = new() {
           "opensans.ttf"
       };
   
       protected async override Task OnInitializedAsync() {
           await FontLoader.LoadFonts(Http, RequiredFonts);
           await base.OnInitializedAsync();
       }
   }
   

3. Copy the required font files (opensans.ttf) to the wwwroot/fonts folder.

Add Code to Load Reports

Reporting components require a service that translates names to report instances. This tutorial implements an IReportProviderAsync service to perform this task.

1. Add the CustomReportProvider.cs class file to the Services folder. Copy the following content into the file:

   Services/CustomReportProvider.cs

   using DevExpress.XtraReports.Services;
   using DevExpress.XtraReports.UI;
   
   public class CustomReportProvider : IReportProviderAsync {
       private readonly HttpClient _httpClient;
       public CustomReportProvider(HttpClient httpClient) {
           _httpClient = httpClient;
       }
       public Task<XtraReport> GetReportAsync(string id, ReportProviderContext context) {
           return ReportsFactory.GetReport(id, _httpClient);
       }
   }
   

2. The ReportsFactory class loads a report instance from a file. Add a ReportsFactory.cs class file with the following code to your project:

   Services/ReportsFactory.cs

   using DevExpress.XtraReports.UI;
   
   public static class ReportsFactory {
   
       public static readonly Dictionary<string, XtraReport> Reports = new()
       {
           ["EmptyReport"] = new XtraReport()
       };
   
       public async static Task<XtraReport> GetReport(string reportName, HttpClient _httpClient) {
               var reportBytes = await _httpClient.GetByteArrayAsync($"reports/{reportName}.repx");
               MemoryStream reportStream = new MemoryStream(reportBytes);
               return XtraReport.FromXmlStream(reportStream);
       }
   }
   

3. Register the CustomReportProvider service at application startup:

   Program.cs

   // ...
   builder.Services.AddDevExpressBlazorReportingWebAssembly(configure => {
       configure.UseDevelopmentMode();
   });
   // ...
   builder.Services.AddScoped<IReportProviderAsync, CustomReportProvider>();
   // ...
   await builder.Build().RunAsync();
   

Create a 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.

   

   Name the report TestReport.cs and click Add.

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…:

   

   In the invoked Save As dialog, specify the wwwroot/reports project folder, Report XML Files (.repx) file type, and the TestReport.repx file name.

Run the Project

Run the project and see the result. The Report Designer displays the TestReport:

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

Troubleshooting

This 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.