# Blazor Viewer

The sample demonstrates creating a Blazor Server Application with ActiveReports Blazor Viewer, using local report service and remote report service.

## Content

Three samples are available for the Blazor Viewer demonstration.

## BlazorViewerServer

The sample demonstrates creating a Blazor Server Application with ActiveReports Blazor Viewer, using local report service and remote report service.
![Screenshot 2025-06-13 130847](https://cdn.mescius.io/document-site-files/images/b298aea2-8cb8-4a0f-be88-4f54aa263ebd/Screenshot%202025-06-13%20130847.8fd538.png?width=1175&verticalAlign=top)

ActiveReports Blazor Viewer

### Sample Location

[https://github.com/activereports/WebSamples20/tree/main/BlazorViewer/BlazorViewerServer](https://github.com/activereports/WebSamples19/tree/main/BlazorViewer/BlazorViewerServer)

### Details

When you run the sample, the Blazor Viewer opens in your browser. Clicking the report link in the left panel opens the report for preview.
The project uses the **MESCIUS.ActiveReports.Aspnetcore.Viewer** and the **MESCIUS.ActiveReports.Blazor.Viewer** NuGet packages.
The project consists of the following elements.

* wwwroot: Contains viewer CSS file for the Blazor application.
* Pages: This folder contains Razor pages and supporting files.
* \_Imports.razor: The Razor template file to include the directives.
* Program.cs file: Create and run web host instance.
* Startup.cs: Contains necessary code to add services and configure the HTTP request.

## ReportService

The sample demonstrates creating a remote report server for report processing to be used by ActiveReports Blazor Viewer.

### Sample Location

[https://github.com/activereports/WebSamples20/tree/main/BlazorViewer/ReportService](https://github.com/activereports/WebSamples19/tree/main/BlazorViewer/ReportService)

### Details

When you run the sample, the browser displays the report service as running. The project uses the **MESCIUS.ActiveReports.Aspnetcore.Viewer** NuGet package.
The project consists of the following elements.

* Startup.cs: Contains necessary code to add services, configure the HTTP request and CORS.
* Reports: This folder contains all available reports.

## BlazorViewerWebAssembly

The sample demonstrates how to make Blazor WebAssembly Application with ActiveReports Blazor Viewer using remote report service.

### Sample Location

[https://github.com/activereports/WebSamples20/tree/main/BlazorViewer/BlazorViewerWebAssembly](https://github.com/activereports/WebSamples19/tree/main/BlazorViewer/BlazorViewerWebAssembly)

### Details

You need to first build and run **ReportService** sample to start the report service. When you run the **BlazorViewerWebAssembly** sample, the Blazor Viewer opens in your browser. Clicking the report link in the left panel opens the report for preview.
The project uses the **MESCIUS.ActiveReports.Blazor.Viewer** NuGet package.
The project consists of the following elements.

* wwwroot: Contains viewer CSS and index.html file for the Blazor application.
* Pages: This folder contains Razor pages and supporting files.
* \_Imports.razor: The Razor template file to include the directives.
* Program.cs file: Create and run web host instance.

## See Also

#### Developers

[Blazor Viewer API](/activereportsnet/docs/v20.1/developers/create-applications/blazor-viewer-application/blazor-viewer-api)