Blazor
.NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
Contents
General
Data
Templates
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.
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.
Serie of videos on YouTube who explain how to build your own IDE from scratch with Blazor and .NET. Starting point repo stars last commit. Blazor Studio repo stars last commit.
This is a simple template for the .NET CLI which allows to create a Blazor project ready to be deployed in an Azure Static Web Apps. It allows to create an Azure Function project as backend.
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.
Sample Projects
Others
Clean Architecture Template for Blazor WebAssembly Built with MudBlazor Components.
This is a sample using Blazor server and SignalR to do command and control. Agents connect to the blazor server application which is hosting a SignalR Hub and we can issue various commands against the connected agents (this feature uses client results).
Sample line of business application that illustrates key features of Blazor. Demo.
FFmpegBlazor provides ability to utilize ffmpeg.wasm from Blazor Wasm C#. ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
A Blazor wrapper for the Media Capture and Streams browser API. The API standardizes ways to request access to local multimedia devices, such as microphones or video cameras. This also includes the MediaStream API, which provides the means to control where multimedia stream data is consumed, and provides some information and configuration options for the devices that produce the media. This project implements a wrapper around the API for Blazor so that we can easily and safely interact with the media streams of the browser. Demo.
An app to play Planning Poker for distributed teams. The app is implemented using Blazor and shows how to switch between client-side and server-side mode with a configuration change. Demo.
Online tool for verify .Net regex syntax, see splits list, table etc. (Demo).
Blazor.Text.Editor is a Text Editor component library using the Blazor UI Framework for .NET. Demo.
Wake-on-LAN app for local networks. Blazor Server + EF Core + DI + CI.
A Blazor app that wraps Waffle Generator. The generator outputs readable gibberish that can be used in place of Lorum Ipsum. Demo.
Unofficial Blazor WebAssembly client for eShopOnContainers.
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.
Sample project, guide and tips for setting up TailwindCSS in Blazor.
A sample of generating Graphviz DOT language files and visualising tree data structures. Demo.
Simple Blazor Server app which uses image recognition to identify and extract text printed in an image file uploaded by the user. Demo.
Simple Football Blazor Server web app displaying fixtures & results, group standings, teams & players and has a player search. Demo.
An automation framework to create Blazor component by RenderTreeBuilder.
AI
Authentication
CMS
FluentCMS is open source AI Driven ASP.NET Core Blazor Content Management System (CMS) FluentCMS.
JHipster is a well-known platform for generating modern application in java world. JHipster provides a blueprints system that allows to override the default behavior of the generator. JHipster.NET is a blueprint that overrides the back-end part, originally generated in spring boot, by back-end in asp.net core. For the front-end all the common language can be used (angular, react), including Blazor.
Rapid Development Framework
Games
2D game built with .NET and C# on a Twitch stream. Trains is available to play online at wengier.com/Trains.NET.
Collection of .NET 8 C# applications consuming a single .NET Standard project running in: Blazor Client (WebAssembly), Blazor Server, Electron (via Blazor Server), WPF, WinForms, MAUI, WinUI 3. Demo.
Blazor port of DiabloWeb, making it a double WebAssembly app: a WebAssembly (C#) PWA hosting a WebAssembly (C++) game. Demo.
Fusion + Blazor sample and a fully functional web app allowing you to play real-time multiplayer board games. Demo.
Hybrid
Build native, cross-platform desktop apps that are lighter than light. Photino is a lightweight open-source framework for building native, cross-platform desktop applications with Web UI technology.
With some tweaks and limitations you can run Blazor Wasm on Net Framework 4.x or in another environment. Explanation on Medium.
IDE
IoT
PresenceLight is a solution to broadcast your various statuses to a Phillips Hue or LIFX light bulb. Some statuses you can broadcast are: your availability in Microsoft Teams, your current Windows 10 theme, and a theme or color of your choosing. Blog post. Demo video.
Machine Learning
A sample ables to make sentiment analysis prediction/detection of what the user is writing in a very UI interactive app (Blazor based) in the client side and running an ML.NET model (Sentiment analysis based on binary-classification) in the server side.
A "server-less" general purpose optimization suite for algorithm parameters. Also provides offline optimization of Quantconnect Lean trading algorithms. Demo (https://optimizer.ml).
Videos
Carl Franklin and Jeff Fritz offer Blazor-based problems to be solved and give away prizes to lucky winners.
Have you ever considered writing microservices in Blazor? In this week's episode, community MVP Florian Rappl joins us to talk about micro frontends. He'll show us how to break a Blazor UI into modules for maintainability and development by decoupled teams.
Part 16 of our new project, "NextTechEvent", a site that will help speakers, organizers, and attendees find their next tech event. In this stream, we made the attendee page look better, and with our close personal friend Chat GPT, we did a better-looking temperature view.
Tutorials
Libraries & Extensions
Component bundles
FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development. FAST & Blazor documentation.
A set of enterprise-class UI components based on Bootstrap and Blazor (Docs as Demo).
A set of enterprise-class UI components based on Ant Design and Blazor. (Docs as Demo).
MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers them to adapt, fix or extend the framework and the multitude of examples in the documentation makes learning MudBlazor very easy. Documentation. Demo.
MatBlazor comprises a range of components which implement common interaction patterns according to the Material Design specification. Documents and Demo , BoilerPlates with MatBlazor
Components for Blazor with support for Bootstrap, Bulma, AntDesign and Material CSS. (Bootstrap Demo), (Bulma Demo), (AntDesign Demo), (Material Demo).
A set of enterprise-class UI components based on Material Design and Blazor. It's an almost perfect copy of Vuetify, and Long-term roadmaps have been mapped out. It is powered by the MASA team and remains free and open source. Documentation. Pro Demo.
Native UI components for Blazor. DataGrid, DataList, Tabs, Dialog and more. (Demo).
Material Design components for Blazor. Bootstrap 4 components for Blazor (Demo).
High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers. (Docs as Demo).
A lightweight wrapper around Microsoft's official FluentUI Web Components for use with .NET 6.0 Razor views & Blazor. (Samples & demo).
A blazor component library using Element UI. API imitates Element, CSS directly uses Element's style, HTML structure directly uses Element's HTML structure. Blazor WebAssembly Version demo. Blazor WebAssembly Version PWA Mode demo.
Simple port of FluenUI/Office Fabric React components and style to Blazor. Client-side demo (WebAssembly). Server-side demo (SignalR)).
A set of native UI Blazor components (including a Data Grid, Pivot Grid, Scheduler, and Charts) for both Blazor server-side and Blazor client-side platforms.
ADMINLTE for Blazor is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts ADMINLTE 3 so the components can be used from dotnet core Blazor.
Blazor component library based on the Clarity UI design. 30+ components including Datagrid and Tree-view (Docs & Demos).
Lightweight, customizable, and performance oriented component library for Blazor and .NET MAUI Hybrid. Built with TailwindCSS. Demo.
An alternative Material Theme Razor Component Library. Material.Blazor focuses sharply on giving you pure markup from Google's material-components-web - we don't try to sit between you and your use of Google's CSS and SASS because they do it better than we ever could. We also have some cool "plus" components. See our demo and comprehensive documentation.
Majorsoft Majorsoft Blazor Components is a set of UI Components and other useful Extensions for Blazor applications. All components are free and available on NuGet. The main goal of this project is to provide an easy to use, feature rich set of customizable components with other useful extensions. NuGet Demo app Docs.
An open source library of Blazor components including Table, Tree, ToolBar and FileExplorer. Demo.
Bootstrap 5 components + additional components built on top of Bootstrap 5 (grid, autosuggest, message-boxes, atc.). Enterprise project template with gRPC code-first client/server communication, localization and more. Interactive documentation & Demos.
Component library for Blazor including Grid, Kanban, Gantt, Chart, Docking, Pivot and more. Website.
Blazor Admin theme built on top of Tabler UI. Minimal javascript. Demo).
ASP.NET Web Forms System.Web.UI.WebControls Razor Components For Blazor WebAssembly. Demo).
Individual components
A GPU-accelerated cross-platform terminal emulator and multiplexer written in Rust.
The Monarca editor, the open-source code editor that powers VS Code.
2D/3D Rendering engines
This library packages the well-known 3D library Babylon.js into a Razor component that can be used in a C# Blazor project. The library is intended to use for creation of molecules visualization and used limited API of Babylon library. Demo application which is showing different parts of library Pubchem Viewer. Show chemical information from pubchem.ncbi.nlm.nih.gov.
<Title> and <Meta> components for changing the document titile and meta elements, with server-side prerendering support for SEO/OGP. (Demo).
Wrapper library around the HTML canvas API written in C# (no JS dependency) (Demo).
This is a wrapper around the Intersection Observer API.
Interactive and flexible charts for Blazor Web Apps. Taking its inspiration from the highly popular ggpplot2 R package, GG.Net provides natively rich features for your Data Analysis Workflow. Build publication quality charts with just a few lines of code. Website.
Brings the charting library plotly.js with over 40 chart types to Blazor (Demo).
This is a NuGet package for Blazor to use ChartJs, constantly updated with new features.
Blazor wrapper for Chartist.js bundled with Chartist.js plugins.
BlazorSize is a JavaScript interop library for Blazor that is used to detect the Browser's current size, change in size, and test media queries.
A Blazor component based on animate.css to easly animate your content. Demo.
A small utility library to allow in-component styling without duplicate <style> tags. Also supports programmatically triggered animations.
DexieNET aims to be a feature complete .NET wrapper for Dexie.js the famous------------*/ Javascript IndexedDB wrapper from David Fahlander. It's designed for Blazor and includes an easy to use Razor component. Now with support for DexieCloud in preview.
EfCoreNexus helps integrating the entity framework core into your blazor app. Via reflection it adds your entitiy classes automatically and provides you with basic crud functionality.
Excel-like datasheet component with keyboard navigation, formula, filtering, sorting and more.
Grid component with CRUD forms for Blazor and ASP.NET MVC, supporting filtering, sorting, searching, paging, subgrids and others (Demo).
Virtualized data grid component with lean markup, focused on displaying remote data. (Demo & documentation).
A fully featured calendar UI component for viewing and creating events, tasks, and milestones. Month, week, and daily views. Blazor Calendar wraps the fully featured Toast UI Calendar JS library. MIT License. Sample project.
Z.Blazor.Diagrams is a fully customizable and extensible all-purpose diagrams library for Blazor (both Server Side and WASM). It was first inspired by the popular React library react-diagrams, but then evolved into something much bigger. ZBD can be used to make advanced diagrams with a custom design. Even the behavior of the library is "hackable" and can be changed to suit your needs.
Interactive diagram component (flowcharts, UML, BPMN, ...), customizable and extensible according to user needs (node types, styles). Demo.
A component which provides support for using JavaScript in Blazor Web Applications
Blazor wrapper over vector drawing/mapping library. Jquery Mapael.
A JavaScript free modal library for Blazor and Razor Components applications.
A JavaScript free toast library for Blazor and Razor Component applications.
A powerful and customizable Sidepanel implementation for Blazor applications.
An extended tabs component library providing various tab features for Blazor.
A snapshot testing library for Blazor Components. Supports rendering Blazor Components to a snapshot file via bunit or via raw Blazor rendering.
.NET Core and Blazor library that attempts to dramatically improve the way we implement real-time and high-load services by introducing a novel kind of "computed observables" - immutable, thread-safe, and most importantly, almost invisible for developers. Samples. Overview.
Auto-complete textbox with local and remote data source, for both Client-side and Server-Side Blazor.
Blazor download files to the browser from c# without any JavaScript library or dependency. BlazorDownloadFile is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client. However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatibility.
Blazor wrappers for PatternFly. To view the latest develop branch in action, visit the demo app.
Provide "Update Now" UI and feature to your Blazor PWA that appears when the next version of one is available.
Allows current and previous route to exist enabling transition animations of UI/UX design systems.
Blazor component implementing the popular SweetAlert2 JavaScript Library.
Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code. (Demo).
Component library for CSS grids with extra features, such as moving and resizing interactively. Create your own dashboard with ease. (Demo).
The default project template localized using XLocalizer with online translation and auto resource creating.
An app to help keep track of speed cubing averages on the fly using Blazor WebAssembly. Demo.
A Blazor component to create panes separated by a slidable splitter bar.
An implementation of Blazor diff and merge component based on Mergely with server side support.
A library that provides an easy helper to use MetaMask with Blazor WebAssembly.
Surround an "input type=file" element by this Blazor component to making a zone that accepts drag and drops files (Demo).
A textarea with style. This component essentially remains and works as a textarea but can have any of the text styled based on your application needs. Its simplicity is purposefully designed to avoid the complexities and issues that come with rich text editors.
A simple to use blazor component for both Blazor Server and WebAssembly which adds a basic tag editor to your app. Demo.
An implementation of Bootstrap tooltips for both Blazor Server and WebAssembly. Demo.
Barcode Scanner component for Blazor using zxing-js Interop. Demo.
A library performing animations when a Blazor component enters or leaves the DOM inspired by react-transition-group.
Tools & Utilities
A testing library for Blazor Components. You can easily define components under test in C# or Razor syntax and verify outcome using semantic HTML diffing/comparison logic. You can easily interact with and inspect components, trigger event handlers, provide cascading values, inject services, mock IJsRuntime, and perform snapshot testing.
A Blazor wrapper for the browser File System Access API.
A library to provide access to local storage in Blazor applications.
Cropper.Blazor is a component that wraps around Cropper.js for cropping images in Blazor. Support Blazor Server, Blazor WebAssembly, Blazor Server Hybrid with MVC and MAUI Blazor Hybrid. Demo.
A cross platform package to copy text to and from the clipboard. Supports Blazor via the Clipboard Browser API.
CssBuilder is a Builder pattern for CSS classes to be used with Razor Components.
Polyfills for Blazor (for Internet Explorer 11 support and some other browsers).
Library for creating DotNet Web Worker threads/multithreading in Blazor. Live demo.
BlazorMVVM is a small framework for building Blazor and BlazorServerside apps. With it's simple to use MVVM pattern you can boost up your development speed while minimizing the hazzle to just make it work.
Develop browser extensions/addons with Blazor WebAssembly. Tested with Google Chrome, Mozilla Firefox and MS Edge.
BlazorRouter is an awesome router inspired by react-router, providing declarative routing for Blazor.
Wrapper for Steve Sanderson's BlazorFileInput component.
Lightweight Event Aggregator for Blazor (Razor Components).
A library to provide configuration-centric keyboard shortcuts for Blazor.
A library to provide Speech Synthesis API access for Blazor.
Smart script tags in Blazor components, ideal for lazy loading of javascript files.
BlazorIndexedDbJs is a wrapper arround IndexedDB DOM API, supports Blazor WASM and Server.
Opens a palette with the Material colors for Blazor application.
Blazor service for the experimental WebBluetooth functions. Based on Blazm.Bluetooth.
Print and save PDF documents with a native print dialog in a Blazor Server or client Application.
A Blazor JSInterop wrapper for Media Session API. The Media Session API provides a way to customize media notifications. (Demo).
Antivirus protection for Blazor Wasm projects. This package attempts to guard against false positives from antiviruses that flag Blazor Wasm as malware, until Microsoft gives us an official solution.
An unopinionated Blazor state management library that utilizes INotifyPropertyChanged and INotifyCollectionChanged .NET interfaces to automatically detect state changes in components.
An open-source utility package for GoogleApis in Blazor. Written from scratch and aims easiest of use.
Others
Blazor for F# with hot reloaded templates, type-safe endpoints and routing, remoting, and much more.
Blazor WebView control for WPF, Android, macOS, iOS. Run Blazor on .NET Core and Mono natively inside a Webview. Documentation.
Production ready lazy loading implementation. Full lazy loading support for WASM and Server (pages, components, dlls) with abstractions to implement modularization if you wish (custom endpoints, custom manifests, etc).
This is a project to make F# developer to write blazor easier - Use F# for Blazor, Computation expression (CE) style DSL for internal and third party blazor libraries, Dependency injection, Adaptive and Elmish models, Giraffe style routing, Type safe style.
Fast download of files to the browser from Blazor without any javascript library reference or dependency. (Demo).
A high-level Spotify API library for Blazor WebAssembly projects that enables Spotify playback in the browser, manages OAuth 2.0 authorization, provides easy access to the Spotify Web API and uses IndexedDB caching.
Execute dynamic object expressions as Javascript in Blazor client-side apps.
This project takes in a TypeScript type definition file and creates a .NET Core project that will work with the provided Interop abstraction project.
Source generators
Github Octicons created as a .razor components using source generator. The generated components are available via the NuGet package, the generator itself is available as a separate NuGet package. The project website is an example using the generated components.
Real-World applications
Tooling
Update .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.
A project templates package of Blazor apps without JavaScript and CSS libraries.
Write, compile, execute and share Blazor components entirely in the browser - https://blazorrepl.com.
When you publish your Blazor WebAssembly app, this package pre-renders and saves the app as static HTML files in your public folder.
Add this NuGet package to your Blazor WebAssembly project to easily publish it to GitHub Pages.