If you write C# for a living but the front end still feels like someone else’s job, Blazor changes that. It’s Microsoft’s web UI framework, and it lets you build interactive browser apps in C# and .NET instead of JavaScript. Same language, same tooling, same type system. No context switching required.
There are roughly 149,000 live Blazor sites on the web as of mid-2025, and in the 2024 Stack Overflow Developer Survey about 5% of all respondents reported using it. That puts it ahead of Svelte and closing in on Angular’s territory. Among C#/.NET developers specifically, the JetBrains 2023 survey found 28% were already using Blazor in some form.
This guide walks through what Blazor is, how the rendering works, and builds a working app step by step.
Four Ways To Render, One Framework
Blazor used to have two hosting models: Server and WebAssembly. Since .NET 8, there are four render modes under a single unified project template:
- Static Server – plain server-side rendering with no interactivity. Fast, lightweight, good for content pages.
- Interactive Server – your C# runs on the server and UI updates travel over a SignalR WebSocket connection. The browser stays thin.
- Interactive WebAssembly – your .NET code compiles to WebAssembly and runs entirely in the browser. Works offline after the first load.
- Interactive Auto – starts with server rendering for a fast first paint, then silently switches to WebAssembly once the runtime downloads in the background. Best of both worlds.
You set the render mode per-component or per-page with a @rendermode directive. A single app can mix modes – a marketing landing page can be static while the dashboard behind the login uses Interactive Auto.
For this tutorial we’ll stick with the default Interactive Server mode. It’s the quickest to get running and doesn’t need a WASM download.
Setting up
You need two things:
- .NET 8 SDK or later – grab it from Microsoft’s .NET download page.
- An editor – Visual Studio 2022 Community (free) or VS Code with the C# Dev Kit extension.
Then open a terminal:
dotnet new blazor -o MyFirstBlazorApp
cd MyFirstBlazorApp
dotnet run
Note: the old dotnet new blazorserver template was retired in .NET 8. The dotnet new blazor command creates the new unified Blazor Web App that supports all four render modes.
Open the localhost URL shown in your terminal. You should see the default template. That’s your app.
Components Are Everything
Blazor apps are built from components. A component is a .razor file that mixes HTML markup with C# logic. Here’s the simplest one:
<h3>Hello, @name!</h3>
@code {
private string name = “World”;
}
The @code block holds your C#. The @name syntax injects the variable’s value into the HTML. When name changes, Blazor re-renders the component automatically. No manual DOM work.
Components nest inside each other, accept parameters, and can be shared across projects. If you’ve used React or Vue, the mental model is similar – but you never leave C#.
Building A Task Tracker
Time for something real. Create a file called TaskTracker.razor in the Components/Pages folder:
@page “/tasks”
@rendermode InteractiveServer
<h2>Task Tracker</h2>
<div>
<input @bind=”newTask” placeholder=”Enter a new task…” />
<button @onclick=”AddTask”>Add</button>
</div>
<ul>
@foreach (var task in tasks)
{
<li style=”@(task.IsDone ? “text-decoration: line-through;” : “”)”>
<input type=”checkbox” @bind=”task.IsDone” />
@task.Title
</li>
}
</ul>
<p>@tasks.Count(t => !t.IsDone) tasks remaining</p>
@code {
private string newTask = “”;
private List<TaskItem> tasks = new();
private void AddTask()
{
if (!string.IsNullOrWhiteSpace(newTask))
{
tasks.Add(new TaskItem { Title = newTask });
newTask = “”;
}
}
private class TaskItem
{
public string Title { get; set; } = “”;
public bool IsDone { get; set; }
}
}
A few things worth noting:
- @page “/tasks” registers this as a routable page at /tasks.
- @rendermode InteractiveServer makes the page interactive (without this, button clicks won’t fire).
- @bind creates two-way binding between the input and the newTask variable.
- @onclick wires the button to the AddTask method.
- The @foreach loop renders each task. The inline style applies a strikethrough when a task gets ticked off.
Run dotnet run, visit /tasks, add a few items, tick them off. The remaining count updates instantly. All C#. Zero JavaScript.
How The Server Mode Actually Works
When you use Interactive Server, Blazor keeps a component tree in memory on the server. Each browser tab gets its own “circuit” – a persistent SignalR connection that uses about 250 KB of RAM.
When a user clicks a button, the event fires over the WebSocket to the server. The server processes it, diffs the component tree, and sends only the changes back to the browser. The round trip is fast enough that users don’t notice the network hop.
The trade-off? You need a constant connection. If the WebSocket drops, the UI freezes until it reconnects. For apps where that’s a problem – field workers on patchy mobile signal, for example – WebAssembly mode runs everything locally after the initial download.
One thing to watch on IIS during development: Windows 10/11 caps simultaneous WebSocket connections at 10 by default. If you’re testing with multiple browser tabs and things start hanging, that’s probably why.
Gotchas That Catch Everyone Out
A few things that trip up nearly every new Blazor developer:
The double-render problem. By default, interactive components pre-render on the server first (for fast initial HTML), then render again when the client connects. Your OnInitializedAsync runs twice. If it fetches data, you get two API calls. Either disable prerendering with @rendermode=”new InteractiveServerRenderMode(prerender: false)” or design your data loading to handle it.
JavaScript interop during prerender. If you call IJSRuntime.InvokeAsync during server pre-rendering, it throws. The browser doesn’t exist yet at that point. Guard your JS calls with a check in OnAfterRenderAsync instead.
Forgetting StateHasChanged. After async operations that update state, Blazor sometimes doesn’t know the UI needs refreshing. Calling StateHasChanged() at the end of an async method fixes mysterious “my data loaded but the page didn’t update” issues.
The Component Ecosystem
You don’t have to build every UI widget yourself. The Blazor component library scene has grown quickly:
- MudBlazor – the most popular community library with over 26 million NuGet downloads and 10,000+ GitHub stars. Open source, MIT licensed. Material Design components.
- Radzen Blazor – 18 million+ NuGet downloads. Also open source. Includes a visual designer tool.
- Microsoft Fluent UI Blazor – Microsoft’s own component library, 4,700+ GitHub stars. Follows the Fluent Design system used in Microsoft 365.
On the commercial side, Syncfusion and Telerik both offer large component suites with enterprise support.
Where To Go Next
Once components and data binding click, there’s plenty more ground to cover:
Forms and validation – the EditForm component gives you model-based validation using data annotations. Same attributes you’d use in ASP.NET Core APIs.
Dependency injection – Blazor has built-in DI. Inject HttpClient, database contexts, or your own services straight into components.
Azure deployment – Blazor WASM apps deploy to Azure Static Web Apps with a single GitHub Actions workflow. Server apps run on Azure App Service (just remember to enable WebSockets and ARR affinity in the portal). For heavy traffic, Azure SignalR Service offloads connection management.
Real production use – Ferrari runs a Blazor-based service portal for its SFC card registration. Frankfurt Airport uses it for a real-time airport map. These aren’t hobby projects.
For teams already working with Dynamics 365, Power BI, or Azure, Blazor slots in without adding another language to the stack. The C# you write for your APIs and business logic is the same C# that renders your UI.
Wrapping up
The task tracker we built is small, but it hits the core concepts: components, data binding, event handling, render modes. Internal dashboards, customer portals, admin panels – Blazor handles all of them.
.NET 9 added runtime prerender detection and improved reconnection handling. .NET 10 previews show Blazor’s script payload shrinking by 76% with fingerprinting and pre-compression. The framework is still moving fast.
If you write C# and you’ve been putting off learning the front end, this is probably the easiest on-ramp you’ll find.
Red Eagle Tech is a London-based tech firm building bespoke software for SMEs. The team works across C#, .NET, Blazor, Azure, Dynamics 365 Business Central, and Power BI using Blazor as part of their day-to-day stack.
