Introduction to Blazor and Your First Blazor Web App

Learn what Blazor is, create a Blazor Web App in Visual Studio 2026, and run your first page.

Blazor is a web user-interface framework in ASP.NET Core that lets you build pages and reusable UI components with C#, HTML, and Razor syntax. A modern Blazor Web App can render HTML on the server and add interactivity where you need it.

1. Create the project

1. Open Visual Studio 2026.
2. Select Create a new project.
3. Search for Blazor Web App.
4. Name the project BlazorTutorialApp.
5. Select .NET 10.0.
6. For this tutorial, choose Interactive Server as the interactive render mode and Global interactivity if the template asks where interactivity should be applied.
7. Use No Authentication for now, then create the project.

2. Run the starter app

Press F5 or click the green Run button. The browser opens the starter application. Explore the Home, Counter, and Weather pages if they are present.

The Counter page demonstrates the central idea of Blazor: HTML markup and C# code live together inside a Razor component.

3. Replace the Home page

Open Components/Pages/Home.razor and replace its contents with:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Welcome to My Blazor App</h1>
<p>Today is @DateTime.Now.ToLongDateString().</p>
<p>This application was created with Visual Studio 2026 and .NET 10.</p>

Run the project again. The @page "/" directive makes this component the page for the root URL. The expression beginning with @DateTime evaluates C# and inserts the result into the HTML.

4. What you have learned

• A Blazor UI is built from Razor components.
• A component usually uses the .razor file extension.
• Razor lets you mix HTML markup and C# expressions.
• The Blazor Web App template is the starting point for current Blazor development.