A collection of awesome Blazor resources.
Blazor is a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
Contributions are always welcome! Please take a look at the contribution guidelines pages first. Thanks to all contributors, you're awesome and wouldn't be possible without you!
If you need to search on this list you can try this great website: Awesome Blazor Browser.
Thanks @jsakamoto for this! Source code
.
Blazor is a .NET web framework to build client web apps with C#.
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. More information on the official Blazor website.
To get started with Blazor, follow the instructions in the Blazor Get Started documentation.
Doing the Build a web app with Blazor learning session on Microsoft Learn can also be a good idea. Another great resource to start is the beginner serie by Jeff Fritz on Channel9 or YouTube.
- Solution templates using .Net MAUI and Blazor with out-of-the-box best practices enabling fast and high-quality cross-platform development for web, android, iOS, and Windows with native beautiful Blazor components. The projects created by these templates contain everything required for developing real-world applications, including (but not limited to) CI/CD pipelines, Infra as Code for Azure, localization, multi-mode development (Blazor Server/WASM/Hybrid), builtin bullet proof exception handling, etc. Read more.
- Clean Architecture Solution Template for Blazor WebAssembly built with MudBlazor Components. This project will make your Blazor Learning Process much easier than you anticipate. Blazor Hero is meant to be an Enterprise Level Boilerplate, which comes free of cost, completely open sourced. Read the Quick Start Guide here.
- This template can be used to create a Blazor WASM application hosted in an ASP.NET Core Web app using Azure AD and Microsoft.Identity.Web to authenticate using the BFF security architecture. (server authentication) This removes the tokens form the browser and uses cookies with each HTTP request, response. The template also adds the required security headers as best it can for a Blazor application. Read the Quick Start Guide here.
- This template can be used to create a Blazor WASM application hosted in an ASP.NET Core Web app using Azure B2C and Microsoft.Identity.Web to authenticate using the BFF security architecture. (server authentication) This removes the tokens form the browser and uses cookies with each HTTP request, response. The template also adds the required security headers as best it can for a Blazor application. Read the Quick Start Guide here.
- Another template with MudBlazor and CleanArchitecture approach.
- CleanAspire is a cloud-native template powered by Aspire for cloud environments with scalability and offline support. Using .NET 9 Minimal APIs and Blazor WebAssembly, it provides a lightweight, fast foundation for building Progressive Web Applications (PWA) optimized for the cloud.
- Blazor Server integrating with Up bank (an Australian digital bank), to assist users with budgeting and to gain powerful future insights. Uses Clean Architecture and Marten DB.
Reusable components like buttons, inputs, grids and more. See also the Blazor component bundles feature comparison chart.
<Title>
and <Meta>
components for changing the document titile and meta elements, with server-side prerendering support for SEO/OGP. (Demo).<style>
tags. Also supports programmatically triggered animations.Libraries and extensions for state management, cookies, local storage and other specific tools.
ExecuteUpdate
can be used with concurrency tokens, and take a look at ETag concurrency in Azure Cosmos DB.- Building Hybrid User Interfaces with Blazor Hybrid [Pt 4] | Blazor Hybrid for Beginners -
November 10, 2023 - Let's start to build out a full application with Blazor Hybrid inside of .NET MAUI. Join James as he walks through building out a full to do application with web components.
- This Will Skyrocket Your Blazor Development Productivity -
May 23, 2023 - Developing Blazor is fun. However, there are a lot of different things that take quite some time when added together. For instance creating isolated CSS files, creating isolated JS files, creating code behind files and others. However, Jimmy Engstrom has created a Visual Extension that solves exactly this problems. Using this extension, your productivity will get a substantial boost. In this video, I'll show you everything you need to know to use this extension in your day to day Blazor development.
.razor
files and see the updates instantly without reloading the page. Your application state is preserved because there is no need to reload anything. livesharp.net.- This is a .NET knowledge sharing platform with live demos crafted by developers for developers with love using .NET Blazor. ilovedotnet.org.