Learn Blazor-wasm - 10 Code Examples & CST Typing Practice Test

Blazor WebAssembly (WASM) is a client-side web framework from Microsoft that allows developers to build interactive web applications using C# and .NET instead of JavaScript. Applications run directly in the browser via WebAssembly.

View all 10 Blazor-wasm code examples →

Simple Blazor WebAssembly Component Blazor Component with Button Click Blazor Component with Two-Way Binding Blazor Component with Conditional Rendering Blazor Component with Loop Blazor Component with Event Callback Blazor Component with Cascading Parameter Blazor Component with Timer Blazor Component with Form Validation Blazor Component with Nested Components

Learn BLAZOR-WASM with Real Code Examples

Updated Nov 25, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Blazor WebAssembly Component

# blazor/demo/Hello.razor
<h3>Hello, Blazor!</h3>

@code {
    private string message = "Hello, Blazor!";
}

A basic Blazor WebAssembly component displaying 'Hello, Blazor!' in the browser.

Let’s Try →

Blazor Component with Button Click

# blazor/demo/ButtonClick.razor
<h3>@message</h3>
<button @onclick="UpdateMessage">Click Me</button>

@code {
    private string message = "Click the button!";
    private void UpdateMessage() {
        message = "Button clicked!";
    }
}

A component that updates a message when a button is clicked.

Let’s Try →

Blazor Component with Two-Way Binding

# blazor/demo/TwoWayBinding.razor
<input @bind="name" placeholder="Enter your name" />
<p>Hello, @name!</p>

@code {
    private string name = "";
}

A component using two-way binding with an input field.

Let’s Try →

Blazor Component with Conditional Rendering

# blazor/demo/Conditional.razor
@if (isLoggedIn) {
    <p>Welcome back!</p>
} else {
    <p>Please log in.</p>
}

@code {
    private bool isLoggedIn = false;
}

A component that shows different content based on a condition.

Let’s Try →

Blazor Component with Loop

# blazor/demo/Loop.razor
<ul>
@foreach (var item in items) {
    <li>@item</li>
}
</ul>

@code {
    private List<string> items = new List<string> { "Item 1", "Item 2", "Item 3" };
}

A component displaying a list of items using a loop.

Let’s Try →

Blazor Component with Event Callback

# blazor/demo/EventCallback.razor
<ChildComponent OnNotify="HandleNotification" />
<p>@message</p>

@code {
    private string message = "Waiting for notification...";
    private void HandleNotification(string msg) {
        message = msg;
    }
}

// ChildComponent.razor
<button @onclick="NotifyParent">Notify Parent</button>

@code {
    [Parameter] public EventCallback<string> OnNotify { get; set; }
    private async Task NotifyParent() {
        await OnNotify.InvokeAsync("Notification received!");
    }
}

A parent and child component demonstrating event callbacks.

Let’s Try →

Blazor Component with Cascading Parameter

# blazor/demo/Cascading.razor
<CascadingValue Value="username">
    <ChildComponent />
</CascadingValue>

@code {
    private string username = "BlazorUser";
}

// ChildComponent.razor
<p>Welcome, @Username!</p>

@code {
    [CascadingParameter] public string Username { get; set; }
}

A component using cascading parameters for shared state.

Let’s Try →

Blazor Component with Timer

# blazor/demo/Timer.razor
<p>Current Time: @currentTime</p>

@code {
    private string currentTime;
    protected override void OnInitialized() {
        var timer = new System.Timers.Timer(1000);
        timer.Elapsed += (s, e) => {
        currentTime = DateTime.Now.ToString("HH:mm:ss");
        InvokeAsync(StateHasChanged);
        };
        timer.Start();
    }
}

A component updating the time every second.

Let’s Try →

Blazor Component with Form Validation

# blazor/demo/FormValidation.razor
<EditForm Model="user" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="user.Name" />
    <button type="submit">Submit</button>
</EditForm>
<p>@message</p>

@code {
    private User user = new User();
    private string message;
    private void HandleValidSubmit() {
        message = $"Hello, {user.Name}!";
    }
    class User { public string Name { get; set; } }
}

A component demonstrating simple form validation.

Let’s Try →

Blazor Component with Nested Components

# blazor/demo/Nested.razor
@foreach (var i in Enumerable.Range(1, 3)) {
    <ChildComponent Number="i" />
}

// ChildComponent.razor
<p>Child component number: @Number</p>

@code {
    [Parameter] public int Number { get; set; }
}

A parent component rendering multiple child components dynamically.

Let’s Try →

Frequently Asked Questions about Blazor-wasm

What is Blazor-wasm?

What are the primary use cases for Blazor-wasm?

Interactive single-page applications (SPAs) with C#. Line-of-business applications requiring .NET libraries. Client-side applications with offline capabilities. Web apps needing tight integration with ASP.NET Core backends. Modern web UI replacement for WinForms/WPF apps

What are the strengths of Blazor-wasm?

Leverages existing .NET skills and libraries. C# code runs natively in the browser via WebAssembly. Component reuse between server-side and client-side Blazor. Strong Microsoft tooling support (Visual Studio, CLI, debugging). Secure execution sandboxed in the browser

What are the limitations of Blazor-wasm?

Initial download size can be large compared to JS frameworks. Browser compatibility depends on WebAssembly support (modern browsers only). SEO is challenging without prerendering. Limited ecosystem compared to JavaScript frameworks. Client-side execution may not be ideal for CPU-intensive tasks

How can I practice Blazor-wasm typing speed?

CodeSpeedTest offers 10+ real Blazor-wasm code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Blazor WebAssembly Component

# blazor/demo/Hello.razor
<h3>Hello, Blazor!</h3>

@code {
    private string message = "Hello, Blazor!";
}

A basic Blazor WebAssembly component displaying 'Hello, Blazor!' in the browser.

Let’s Try →

Blazor Component with Button Click

# blazor/demo/ButtonClick.razor
<h3>@message</h3>
<button @onclick="UpdateMessage">Click Me</button>

@code {
    private string message = "Click the button!";
    private void UpdateMessage() {
        message = "Button clicked!";
    }
}

A component that updates a message when a button is clicked.

Let’s Try →

Blazor Component with Two-Way Binding

# blazor/demo/TwoWayBinding.razor
<input @bind="name" placeholder="Enter your name" />
<p>Hello, @name!</p>

@code {
    private string name = "";
}

A component using two-way binding with an input field.

Let’s Try →

Blazor Component with Conditional Rendering

# blazor/demo/Conditional.razor
@if (isLoggedIn) {
    <p>Welcome back!</p>
} else {
    <p>Please log in.</p>
}

@code {
    private bool isLoggedIn = false;
}

A component that shows different content based on a condition.

Let’s Try →

Blazor Component with Loop

# blazor/demo/Loop.razor
<ul>
@foreach (var item in items) {
    <li>@item</li>
}
</ul>

@code {
    private List<string> items = new List<string> { "Item 1", "Item 2", "Item 3" };
}

A component displaying a list of items using a loop.

Let’s Try →

Blazor Component with Event Callback

# blazor/demo/EventCallback.razor
<ChildComponent OnNotify="HandleNotification" />
<p>@message</p>

@code {
    private string message = "Waiting for notification...";
    private void HandleNotification(string msg) {
        message = msg;
    }
}

// ChildComponent.razor
<button @onclick="NotifyParent">Notify Parent</button>

@code {
    [Parameter] public EventCallback<string> OnNotify { get; set; }
    private async Task NotifyParent() {
        await OnNotify.InvokeAsync("Notification received!");
    }
}

A parent and child component demonstrating event callbacks.

Let’s Try →

Blazor Component with Cascading Parameter

# blazor/demo/Cascading.razor
<CascadingValue Value="username">
    <ChildComponent />
</CascadingValue>

@code {
    private string username = "BlazorUser";
}

// ChildComponent.razor
<p>Welcome, @Username!</p>

@code {
    [CascadingParameter] public string Username { get; set; }
}

A component using cascading parameters for shared state.

Let’s Try →

Blazor Component with Timer

# blazor/demo/Timer.razor
<p>Current Time: @currentTime</p>

@code {
    private string currentTime;
    protected override void OnInitialized() {
        var timer = new System.Timers.Timer(1000);
        timer.Elapsed += (s, e) => {
        currentTime = DateTime.Now.ToString("HH:mm:ss");
        InvokeAsync(StateHasChanged);
        };
        timer.Start();
    }
}

A component updating the time every second.

Let’s Try →

Blazor Component with Form Validation

# blazor/demo/FormValidation.razor
<EditForm Model="user" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="user.Name" />
    <button type="submit">Submit</button>
</EditForm>
<p>@message</p>

@code {
    private User user = new User();
    private string message;
    private void HandleValidSubmit() {
        message = $"Hello, {user.Name}!";
    }
    class User { public string Name { get; set; } }
}

A component demonstrating simple form validation.

Let’s Try →

Blazor Component with Nested Components

# blazor/demo/Nested.razor
@foreach (var i in Enumerable.Range(1, 3)) {
    <ChildComponent Number="i" />
}

// ChildComponent.razor
<p>Child component number: @Number</p>

@code {
    [Parameter] public int Number { get; set; }
}

A parent component rendering multiple child components dynamically.

Let’s Try →

Frequently Asked Questions about Blazor-wasm

What is Blazor-wasm?

What are the primary use cases for Blazor-wasm?

What are the strengths of Blazor-wasm?

What are the limitations of Blazor-wasm?

How can I practice Blazor-wasm typing speed?

CodeSpeedTest offers 10+ real Blazor-wasm code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.