Blazor learning sandboxA lab manual · .NET 10 · MudBlazor 9

A lab manual for Blazor and MudBlazor

Learn by changing working examples.

Nine labs that explain how Blazor behaves and why. A working example of 84 MudBlazor components, with every parameter combination laid out side by side. 10 complete pages built from those parts. Read the source beside each one, change one thing, and see what happens.

Open the live demo Run it on your machine
The Button page of the component gallery: example plates with live buttons, a table of every variant and color, and the Razor source of the example.
Plate 1 · The Button page, from the component gallery.

Contents

Three ways in. Start with the labs if Blazor is new to you, or go straight to the components and samples if you are here for MudBlazor.

Chapter 01

Labs

9 focused experiments, about 3 hours in all. Each states an objective, a common mistake and an exercise.

  1. State and lifecycle10 min
  2. Forms and transactional dialogs15 min
  3. DataGrid experiments20 min
  4. API and server paging20 min
  5. SQLite notebook25 min
  6. Authentication and policies20 min
  7. Localization and accessibility15 min
  8. Files and cancellable work25 min
  9. Observability and deployment20 min
Choose a learning path →
Chapter 02

Components

84 components with live examples, combination tables and playgrounds that write the markup for you.

  1. Actions9
  2. Inputs and forms12
  3. Pickers and uploads5
  4. Data display17
  5. Charts8
  6. Feedback and overlays13
  7. Navigation9
  8. Layout and structure9
  9. Theming and globalization2
Browse the gallery →
Chapter 03

Page samples

Whole screens composed only from MudBlazor components, with synthetic data and real interactions.

  1. Account settingsopen
  2. Admin recordsopen
  3. Analytics dashboardopen
  4. Checkoutopen
  5. Inboxopen
  6. Kanban boardopen
  7. Pricingopen
  8. Sign inopen
  9. Storefrontopen
  10. User profileopen
See every sample →

How to use this manual

Every page is built for one small, repeatable experiment. Reset controls take you back to a known state, so you can try again with a new guess.

  1. Predict. Read the objective and decide what should happen before you touch anything.
  2. Try. Change a value, add latency, cancel an operation, switch the culture.
  3. Inspect. Open the code beside the example and connect the behavior to the source.
  4. Reset. Return to a known state and repeat with a new guess.

One library, two hosts

The same Razor class library renders on the server and in your browser. Where a lab needs a server, the browser version uses a stand-in and says so.

ArchitectureWebClient.Shared, holding the labs, the gallery and the page samples, is used by two hosts: WebClient, a Blazor Server app with HTTP, SQLite and cookies, and WebClient.Wasm, the WebAssembly demo on GitHub Pages with browser stand-ins.WebClient.Sharedlabs · gallery · page samples · themeWebClientBlazor Server · HTTP · SQLite · cookiesWebClient.WasmWebAssembly · GitHub Pages · stand-ins
Figure 2 · Shared components, honest boundaries. Read project structure for the contracts between them.

Run it on your machine

  1. Install the .NET 10 SDK named in global.json.
  2. Clone, restore exactly the locked packages, and run.
  3. Open http://localhost:5000/labs and start with the counter.

Getting started covers HTTPS, Docker and the WebAssembly host.

$ git clone https://github.com/jonathanperis/blazor-mudblazor-starter.git
$ cd blazor-mudblazor-starter
$ dotnet restore --locked-mode
$ dotnet run --project src/WebClient