Visual Studio Toolbox

10 Top Blazor Tools Just a NuGet Away

• By David Ramel
• 06/04/2019

Blazor is the hottest project in the .NET ecosystem right now, providing Microsoft-centric coders with a JavaScript alternative for Web projects.

The Microsoft site for the Blazor project provides a summary of what the open source project does:

Blazor lets you build interactive Web UIs using C# instead of JavaScript. Blazor apps are composed of reusable Web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

Blazor is a feature of ASP.NET, the popular Web development framework that extends the .NET developer platform with tools and libraries for building Web apps.

It leverages another red-hot project, WebAssembly, to execute client-side C# code directly in the browser, or, as the above site explains, client logic can run server-side, where client UI events are received via SignalR.

Blazor recently graduated from an experimental project to a preview, no doubt attracting a new audience of interested Web devs. To help them get started, here's a list of the most popular NuGet packages tagged with "Blazor," based on the number of downloads (prerelease offerings included):

1. Microsoft.AspNetCore.Blazor.Templates: Templates for ASP.NET Core Blazor. Coming from Microsoft, this is pretty much a must-have no-brainer, speaking for itself.

   With 50,447 downloads, it's far and away the leader in the NuGet race. Blazor project templates are also featured in the Visual Studio Marketplace, where 182,126 downloads somehow translates into 81,117 installs. See the GitHub site for more info.

2. Blazor.Extensions.SignalR: SignalR Core support for ASP.NET Core Blazor. The role of SignalR in Blazor was already mentioned, so it's no surprise this comes in at second place with 9,026 downloads.

   The description reads:

   This package adds a Microsoft ASP.NET Core SignalR client library for Microsoft ASP.NET Blazor.
   
   The package aims to mimic the C# APIs of SignalR Client as much as possible and it is developed by wrapping the TypeScript client by using Blazor's interop capabilities.

   It implements all public features of SignalR Typescript client, but it doesn't implement Streaming APIs, which are to be added soon, says owner BlazorExtensions. The companion GitHub site (85 stars) is here.

   It points to SignalR documentation for more information.

3. BlazorStrap: Blazor BootStrap, a bootstrap4 component library for Blazor.

   This prerelease offering, with 7,529 downloads, comes from ChananB.

   A companion site shows the components include alerts, badges, breadcrumbs, buttons and so on down the alphabet, to tabs and tooltips.

   Each item is linked to examples and more info. The source code for BlazorStrap is on GitHub (188 stars) here. The project is active, having been updated seven days prior to this writing.

4. Blazor.Extensions.Canvas: Blazor Extensions Canvas -- HTML5 Canvas API implementation for ASP.NET Core Blazor.

   This also comes from BlazorExtensions, with maintainers listed as Attila Hajdrik and Gutemberg Ribiero. It has been downloaded 6,256 times and was last updated a month ago.

   The Canvas GitHub site (79 stars) provides more info, explaining:

   • This package wraps HTML5 Canvas APIs.
   • Both Canvas 2D and WebGL are supported.
   • Both client and server-side scenarios using either Blazor or Razor Components are supported. [Note: Razor Components now go by the term server-side Blazor]


5. Tewr.Blazor.FileReader: Read-Only File streams in Blazor. Last updated a month ago, this offering from Tewr has been downloaded 5,871 times. The GitHub site (41 stars) says:

   Blazor library and Demo of read-only file streams in Blazor. Originally built for Wasm ("Client-side" Blazor), Server-side Blazor (previously aka RazorComponents) is also supported as of version 0.7.1.
   
   This library exposes read-only streams using <input type="file" /> and FileReader.
   
   Here is a Live demo that contains the output of the wasm demo project. Currently, it's a build based on v0.5.1.



6. Blazor.Extensions.Logging: Blazor Extensions Logging -- Microsoft Extension Logging implementation for ASP.NET Core Blazor:

   This package is an implementation for the Microsoft Extensions Logging abstraction to support using the ILogger interface in your Blazor code.
   
   When the component is configured, all the log statements will appear in the browser's developer tools console.

   It has been downloaded 5,860 times, last updated a month ago. The GitHub site (61 stars) shows functionality including: content to log; filtering and log levels, with a sample configuration detailing setup and usage.

7. Blazor.Fluxor: A zero-boilerplate Flux/Redux state library for Blazor.

   Coming from mrpmorris, this prerelease tool has been downloaded 5,637 times, last updated a month ago.

   The GitHub site (72 stars) says:

   Blazor-Fluxor is a zero boilerplate Flux/Redux library for the new Microsoft aspdotnet Blazor project.
   
   The aim of Fluxor is to create a single-state store approach to front-end development in Blazor without the headaches typically associated with other implementations, such as the overwhelming amount of boiler-plate code required just to add a very basic feature.

   That site also features sample projects, including: counter, effects, Redux dev tools integration, custom middleware and Blazor Flight Finder.

8. Blazor.ContextMenu: Context menu component for Blazor. With 5,545 downloads, this comes from AkiraGTX, who last updated it seven days ago.

   The GitHub site (75 stars) warns: "This project is built on top of an experimental framework. There are many limitations and there is a high probability that there will be breaking changes each version."

   That site shows animated samples for weather forecast, animations, templating and a sample app (live demo here), showing: a basic example, grid sample, mouse button triggers, animations, creating templates and dynamic items.

9. Sotsera.Blazor.Toaster: Toastr.js port to Blazor - no JavaScript involved.

   This prerelease offering from ghidello has been downloaded 5,192 times.

   The description reads:

   A Blazor port of Toastr.js in pure .Net.

   The transitions are implemented using System.Threading.Timer so this library should be used only by client side blazor (webassembly).

   Razor components [Note: now called server-side Blazor] currently cannot reference static assets from component libraries.

   As a temporary workaround the css can be saved into the server project wwwroot and loaded by the index.html with something like <link href="toastr.min.css" rel="stylesheet"/>.

   The sample project has been published here.

   More info is available on the companion GitHub site (25 stars).

10. Blazor-State: A MediatR pipeline for Blazor state management. Yet another prerelease project, this one coming from TimeWarp Enterprises, authored by Steven T. Cramer, has been downloaded 5,190 times, just updated a few hours before this writing. Its companion site says:

    Blazor-State is a State Management architecture utilizing the MediatR pipeline.

    If you are familiar with MediatR, Redux, or the Command Pattern you will feel right at home. All of the behaviors are written as plug-ins/middle-ware and attached to the MediatR pipeline.

    Please see the GitHub Site [50 stars] for source and filing of issues.

There are plenty more NuGet tools available, and you can see the entire list tagged with "Blazor" (180 as of this writing) here.