Add a Report Viewer to a Project (Blazor WebAssembly Standalone Application)

• Feb 09, 2026
• 5 minutes to read

Prerequisites

1. .NET 8.0 or later SDK.
2. Visual Studio 2022 with the ASP.NET and web development workload.

Create a New Project

This section describes how to create a new Blazor project. If you want to add Report 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 window opens, select All in the Package source drop-down list in the Browse tab, and install the following NuGet packages:

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

   The DevExpress 25.2 Local package is automatically added as a package source to your NuGet configuration files if you used the DevExpress .NET Product Installer.

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.

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

Register DevExpress Resources

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

   _Imports.razor

   @using DevExpress.Blazor.Reporting
   @using DevExpress.Blazor
   

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

   Program.cs

   using BlazorApp1;
   using Microsoft.AspNetCore.Components.Web;
   using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
   
   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.AddDevExpressWebAssemblyBlazorReportViewer();
   
   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 Viewer to the Page

1. Create a new file (ReportViewer.razor) in the Pages folder. Use the following code snippet to generate a page with a Report Viewer component:

   Pages/ReportViewer.razor

   @page "/reportviewer/"
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>Report Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer" />
   
   @code {
       [Inject] HttpClient? Http { get; set; }
   
       DxReportViewer? reportViewer;
   }
   

   If you use the RegisterTheme(ITheme) method to register a DevExpress Blazor theme, you still need to reference the css file for the Report Viewer.

   To learn more about code that applies a DevExpress Blazor theme, review the following help topic: Themes in Blazor Report Viewer.

2. Add a navigation link to the NavMenu.razor page:

   NavMenu.razor

   <div class="nav-item px-3">
       <NavLink class="nav-link" href="reportviewer">
           <span class="oi oi-plus" aria-hidden="true"></span> Report Viewer
       </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.

Add the FontLoader.cs class with the following code to your project:

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);
        }
    }
}

Add a LoadFonts method call to the page that includes the DxReportViewer control:

Pages/ReportViewer.razor

// ...

@code {
    // ...
    List<string> RequiredFonts = new() {
        "opensans.ttf"
    };

    protected async override Task OnAfterRenderAsync(bool firstRender) {
        if (firstRender) {
            await FontLoader.LoadFonts(Http, RequiredFonts);
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Copy fonts to the wwwroot/fonts folder.

Load a Report

Create a report class in the application and pass an instance of this class to the viewer.

Create a New 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 Reports project folder, Report XML Files (.repx) file type, and the TestReport.repx file name.

Pass the Report to the Viewer

1. Open the ReportViewer.razor page and specify the report that the Report Viewer displays.

   ReportViewer.razor

   @page "/reportviewer/"
   
   @using DevExpress.Blazor.Reporting
   @using DevExpress.XtraReports.UI
   
   <h3>Report Viewer</h3>
   <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css">
   
   <DxReportViewer @ref="reportViewer" Report="Report"/>
   
   @code {
       [Inject] HttpClient? Http { get; set; }
       XtraReport Report = new TestReport();
       DxReportViewer? reportViewer;
   
       List<string> RequiredFonts = new() {
           "segoeui.ttf", "segoeuib.ttf", "segoeuii.ttf",
           "segoeuil.ttf", "segoeuisl.ttf", "segoeuiz.ttf"
       };
   
       protected async override Task OnAfterRenderAsync(bool firstRender) {
           if (firstRender) {
               await FontLoader.LoadFonts(Http, RequiredFonts);
           }
           await base.OnAfterRenderAsync(firstRender);
       }
   }
   

2. Run the project to view the result.

Troubleshooting

To ensure a Blazor WebAssembly application runs properly, set the MSBuild WasmBuildNative setting to true.

Next Steps

Load a Report

Topic describes how to load predefined reports and load reports from REPX files.

Restore Data Connections

Topic describes how to implement a service that resolves a SQL/JSON connection name to a valid connection.

Specify Report Parameters

Topic describes how to specify report parameters using the built-in Parameters Panel or create custom UI elements and use them to submit parameter values to the report.

Customize the Report Viewer

Review the following topics for information on how to customize the UI:

• Customize Parameter Editors
• Customize the Report Viewer Toolbar
• Customize the Report Viewer Tab Panel

Troubleshooting

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.