An Intro to Blazor
Walk through the basics, how it works, how to get started, and a few useful libraries to make life easier.
Created by Alex Hedley
What is Blazor?
Blazor is a modern front-end web framework based on HTML, CSS, and C# that helps you build web apps faster. With Blazor, build web apps using reusable components that can be run from both the client and the server so that you can deliver great web experiences.
https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor
History
Initial release: 2018 (~8 years ago)
"browser" and "razor"
2017
Experimental Prototype
C# in browser via WebAssembly prototype
First public demo by Steve Sanderson at NDC Oslo.
2018-2019 (.NET Core 3.0)
Blazor Server
Server-side UI, SignalR updates, fast load
2020
Blazor WebAssembly
Client-side .NET, offline support
2022
Blazor Hybrid
Native apps via WebView (MAUI)
2023 (.NET 8)
Blazor Full-stack UI
Combined Server + WASM, render modes
2025 (.NET 9)
Unified Blazor
Single model with static + interactive modes
2026 (.NET 10)
...
...
Build your first web app with ASP.NET Core using Blazor
https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro
Demo
dotnet new blazor
dotnet new blazorwasm
Libraries
FluentUI Blazor
The Microsoft.FluentUI.AspNetCore.* family of packages provides a set of Razor components for building Blazor applications that leverage the Fluent Design System (i.e. have the look and feel of modern Microsoft applications).
Demo
Blazing Story
The clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.
Demo
Blazor WebForms Components
A collection of Blazor components that are drop-in replacements for the ASP.NET Web Forms control of the same name. The library also includes some other shims and modules that make migrating to Blazor a smooth experience
https://fritzandfriends.github.io/BlazorWebFormsComponents/
Demo
Blazored
❗️ Blazored is now archived 😢
Demo
Libraries
- Video
- TextEditor
- AutoSaveEditForm
- Menu
- Local Storage
- Session Storage
- Modal
- Toast
- Fluent Validation
- Typeahead
- Localisation
- ...
Utility (Blazor)
Utility Web App written in Blazor WebAssembly (WASM)
Demo
Blashing
Build a beautiful dashboard
Dashing
Dashing is a Sinatra based framework that lets you build beautiful dashboards. It looks especially great on TVs.
dashing from Shopify: https://github.com/Shopify/dashing
Smashing
Smashing, the spiritual successor to Dashing, is a Sinatra based framework that lets you build excellent dashboards. It looks especially great on TVs.
https://github.com/Smashing/smashing