WebAssembly and .NET 10 -Run C# in the Browser (Tutorial)

.NET 10 brings significant improvements to WebAssembly support, making it easier than ever to run C# code directly in web browsers. Whether you're building interactive web UIs with Blazor or running compute-intensive algorithms client-side, .NET 10's WebAssembly capabilities are production-ready.

Here's how WebAssembly works in .NET 10, what's new, and how to build your first Blazor WebAssembly app.

What is WebAssembly?

WebAssembly (Wasm) is a binary instruction format that runs in web browsers at near-native speed. It lets you run code written in C#, C++, Rust, or other languages directly in the browser—no JavaScript required.

What you can build with .NET + WebAssembly:

• Interactive web apps (Blazor WebAssembly)
• Client-side data processing
• Games and simulations
• Video/image processing
• Cryptography and encryption

// C# code running in the browser via WebAssembly
public class Calculator
{
    public static int Add(int a, int b) => a + b;
}

// Called from JavaScript:
// const result = DotNet.invokeMethod('MyApp', 'Add', 5, 3);
// console.log(result); // 8

Result: C# code executes in the browser without a server round-trip.

What's New in .NET 10 WebAssembly

30% Faster Startup

.NET 10 WebAssembly improvements:

• Smaller runtime (1.8MB → 1.3MB)
• Faster JIT compilation
• Better code optimization
• Improved caching

Metric	.NET 8	.NET 10	Improvement
Download size	1.8MB	1.3MB	28% smaller
Startup time	2.1s	1.5s	29% faster
Memory usage	45MB	38MB	16% less

Result: Blazor WebAssembly apps load 30% faster in .NET 10.

Ahead-of-Time (AOT) Compilation

.NET 10 supports AOT compilation for WebAssembly:

Enable AOT in .csproj:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <RunAOTCompilation>true</RunAOTCompilation>
  </PropertyGroup>
</Project>

Benefits:

• 50% faster runtime execution
• No JIT overhead
• Deterministic performance

Trade-off:

• Larger download size (AOT adds ~500KB)
• Longer build times

When to use AOT:

• CPU-intensive client-side workloads
• Games and simulations
• Data visualization

Multi-Threading Support

.NET 10 enables multi-threading in WebAssembly via SharedArrayBuffer:

@page "/parallel-compute"

<h3>Parallel Computation</h3>
<button @onclick="RunParallel">Run</button>
<p>Result: @result</p>

@code {
    private long result = 0;

    private async Task RunParallel()
    {
        var numbers = Enumerable.Range(1, 1_000_000).ToArray();

        result = await Task.Run(() =>
        {
            return numbers.AsParallel().Sum(x => (long)x);
        });
    }
}

Result: Uses browser's Web Workers for true parallelism.

Blazor WebAssembly in .NET 10

Blazor WebAssembly is .NET's SPA framework that runs entirely in the browser.

Create Your First Blazor WebAssembly App

Step 1: Create project

dotnet new blazorwasm -n MyBlazorApp
cd MyBlazorApp
dotnet run

Step 2: Open browser

Navigate to http://localhost:5000

Result: Counter app running entirely client-side (no server after initial load).

How Blazor WebAssembly Works

Architecture:

Browser
├── WebAssembly Runtime (.NET Runtime compiled to Wasm)
├── Your C# App (compiled to .NET IL)
└── Blazor Framework (component model, routing, etc.)

Flow:

1. Browser downloads .NET runtime (1.3MB) and your app (~500KB)
2. WebAssembly loads .NET runtime
3. Your C# code executes in browser
4. Blazor updates DOM when state changes

No server required after initial load.

Component Example

Counter.razor:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Result: Interactive counter running entirely in browser, zero JavaScript.

Calling JavaScript from C

JavaScript Interop:

@inject IJSRuntime JS

<button @onclick="ShowAlert">Show Alert</button>

@code {
    private async Task ShowAlert()
    {
        await JS.InvokeVoidAsync("alert", "Hello from C#!");
    }
}

Custom JavaScript:

wwwroot/script.js:

window.myFunctions = {
    showMessage: function (message) {
        console.log(message);
        return "Response from JavaScript";
    }
};

C# calling JavaScript:

var result = await JS.InvokeAsync<string>("myFunctions.showMessage", "Hello from C#");
Console.WriteLine(result); // "Response from JavaScript"

Calling C# from JavaScript

Export C# method:

using Microsoft.JSInterop;

[JSInvokable]
public static string GetGreeting(string name)
{
    return $"Hello, {name}!";
}

Call from JavaScript:

const greeting = await DotNet.invokeMethodAsync('MyBlazorApp', 'GetGreeting', 'Alice');
console.log(greeting); // "Hello, Alice!"

Real-World Use Cases

Use Case 1: Client-Side Data Processing

Scenario: Process 10,000 rows of CSV data in browser

@page "/data-processor"

<h3>CSV Processor</h3>
<InputFile OnChange="HandleFileUpload" />
<p>Processed @rowCount rows in @elapsed ms</p>

@code {
    private int rowCount = 0;
    private long elapsed = 0;

    private async Task HandleFileUpload(InputFileChangeEventArgs e)
    {
        var sw = System.Diagnostics.Stopwatch.StartNew();

        using var stream = e.File.OpenReadStream(maxAllowedSize: 10_000_000);
        using var reader = new StreamReader(stream);

        rowCount = 0;
        while (!reader.EndOfStream)
        {
            var line = await reader.ReadLineAsync();
            // Process CSV row
            rowCount++;
        }

        elapsed = sw.ElapsedMilliseconds;
    }
}

Result: Processes 10,000 rows in ~200ms client-side (no server round-trip).

Use Case 2: Real-Time Charting

Scenario: Update chart with 60 FPS animation

@page "/live-chart"
@using Blazor.Extensions.Canvas.Canvas2D

<BECanvas @ref="canvasRef" Width="800" Height="400"></BECanvas>

@code {
    private Canvas2DContext? ctx;
    private BECanvasComponent? canvasRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            ctx = await canvasRef!.CreateCanvas2DAsync();
            await AnimateChart();
        }
    }

    private async Task AnimateChart()
    {
        while (true)
        {
            await ctx!.ClearRectAsync(0, 0, 800, 400);

            var value = Math.Sin(DateTime.Now.Millisecond / 100.0) * 100 + 150;

            await ctx.BeginPathAsync();
            await ctx.MoveToAsync(0, 200);
            await ctx.LineToAsync(800, value);
            await ctx.StrokeAsync();

            await Task.Delay(16); // ~60 FPS
        }
    }
}

Result: Smooth 60 FPS chart updates, no server calls.

Use Case 3: Image Processing

Scenario: Apply filters to images client-side

@page "/image-filter"

<InputFile OnChange="HandleImageUpload" accept="image/*" />
<img src="@imageUrl" alt="Processed" />

@code {
    private string? imageUrl;

    private async Task HandleImageUpload(InputFileChangeEventArgs e)
    {
        var imageFile = e.File;
        var buffer = new byte[imageFile.Size];

        await using var stream = imageFile.OpenReadStream(maxAllowedSize: 5_000_000);
        await stream.ReadAsync(buffer);

        // Process image (convert to grayscale)
        var processedBuffer = ApplyGrayscaleFilter(buffer);

        // Convert to base64 data URL
        imageUrl = $"data:image/png;base64,{Convert.ToBase64String(processedBuffer)}";
    }

    private byte[] ApplyGrayscaleFilter(byte[] imageData)
    {
        // Image processing logic here
        return imageData;
    }
}

Result: Client-side image filtering, no server upload required.

Blazor WebAssembly vs Blazor Server

Feature	Blazor WebAssembly	Blazor Server
Execution	Client (browser)	Server (SignalR)
Server required	No (after initial load)	Yes (persistent connection)
Offline support	✅ Yes	❌ No
Download size	~2MB	~100KB
Startup time	~1.5s	~300ms
Latency	0ms (local)	~50-100ms (network)
Scalability	✅ Excellent (static hosting)	⚠️ Moderate (server resources)
SEO	⚠️ Requires pre-rendering	✅ Good

Choose WebAssembly if:

• You need offline support
• You want to host on CDN/static hosting
• Latency matters (real-time interactions)

Choose Server if:

• SEO is critical
• Download size matters
• You need direct server access (databases)

Deployment Options

Option 1: Static Hosting (GitHub Pages, Azure Static Web Apps)

Blazor WebAssembly apps are static files:

dist/
├── index.html
├── _framework/
│   ├── blazor.webassembly.js
│   ├── dotnet.wasm
│   └── MyApp.dll
└── css/

Publish:

dotnet publish -c Release

Deploy to GitHub Pages:

cd bin/Release/net10.0/publish/wwwroot
git init
git add .
git commit -m "Deploy"
git push origin gh-pages

Access: https://yourusername.github.io/yourrepo

Option 2: Azure Static Web Apps

Deploy via Azure CLI:

az login
az staticwebapp create \
  --name MyBlazorApp \
  --resource-group MyResourceGroup \
  --source https://github.com/you/your-repo \
  --location "East US 2" \
  --branch main \
  --app-location "/" \
  --output-location "wwwroot"

Result: Automatic build and deploy on every git push.

Option 3: Docker

Dockerfile:

FROM nginx:alpine
COPY dist/wwwroot /usr/share/nginx/html

Build and run:

dotnet publish -c Release
docker build -t my-blazor-app .
docker run -p 8080:80 my-blazor-app

Access: http://localhost:8080

Performance Optimization

Lazy Loading Assemblies

Load assemblies on demand:

App.razor:

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="@lazyLoadedAssemblies"
        OnNavigateAsync="@OnNavigateAsync">
</Router>

@code {
    private List<Assembly> lazyLoadedAssemblies = new();

    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/reports")
        {
            var assemblies = await LazyLoader.LoadAssembliesAsync(
                new[] { "MyApp.Reports.dll" });

            lazyLoadedAssemblies.AddRange(assemblies);
        }
    }
}

Result: 40% smaller initial download.

Compression

Enable Brotli compression:

wwwroot/.htaccess (Apache):

AddOutputFilterByType DEFLATE application/wasm
AddOutputFilterByType DEFLATE application/octet-stream

Result: 60-70% smaller download sizes.

The Bottom Line: WebAssembly in .NET 10

.NET 10 WebAssembly delivers:

• 30% faster startup than .NET 8
• 28% smaller runtime (1.3MB vs 1.8MB)
• AOT compilation for 50% faster execution
• Multi-threading support
• Production-ready Blazor WebAssembly

Use cases:

• Interactive web UIs (SPAs)
• Client-side data processing
• Games and simulations
• Offline-capable web apps

Getting started:

dotnet new blazorwasm -n MyApp
cd MyApp
dotnet run

You're running C# in the browser.

---

Written by Jacob Mellor, CTO at Iron Software. Jacob created IronPDF and leads a team of 50+ engineers building .NET document processing libraries.