This topic describes how to add the Blazor Designer component to your Blazor Web Assembly Application. This project uses the Report Server.

1. Open Microsoft Visual Studio 2022.
2. Create a new project and select the Blazor WebAssembly App Empty template.
3. Type a name for your project and click Next.
4. Select a target framework and uncheck 'Configure for HTTPS' option, and then click Create.
5. Add the MESCIUS.ActiveReports.Blazor.Designer NuGet package.
6. Add the Blazor WebDesigner component to 'Pages/Index.razor'.

   Pages/Index.razor

   Copy Code

   @page "/" @using GrapeCity.ActiveReports.Blazor.Designer; @inject IJSRuntime JSRuntime <div style="height:100vh;width:100%" <ReportDesigner @ref="_designer" Server="@_server" Document="@_document" /> </div> @code { private ReportDesigner _designer; private Server _server = new Server() { Url = "http://localhost:5098" }; private Document _document = new Document() { Id = "Report.rdlx", Type = SupportedDocumentType.cpl }; }

7. Run the Report Server.
8. Build and run the application.