BlazorCssLiveReload 2.0.0

CSS Live Reload for Blazor 🔥

Why this Exists

Blazor Hybrid apps are great, but the feedback loop is slow. Changing a CSS file normally requires:

• Rebuilding the app
• Restarting the WebView
• Losing all UI state

BlazorCssLiveReload solves this with true CSS Hot Module Reloading. No rebuilds, no flicker, no WebView reloads.

Features

🔥 1. Real CSS Hot Module Reloading

Blazor Hybrid normally requires a rebuild for CSS updates. CSS changes are pushed directly into the WebView:

• CSS updates apply instantly
• No WebView reload or UI flicker
• Supports plain CSS, .razor.css, and scoped styles

It feels closer to Flutter-style hot reload for styling.

🧵 2. Fully Compatible with .NET Hot Reload

Run your app using dotnet watch and both systems work together:

• .NET Hot Reload updates C# code
• BlazorCssLiveReload updates CSS

You get a smooth, continuous development loop.

🧩 3. Tailwind-First Workflow

Tailwind JIT regenerates CSS on every file change. This package is designed to fit directly into that workflow.

Perfect for modern frontend stacks.

Installation

1. Install the NuGet package

dotnet add package BlazorCssLiveReload

2. Add the JavaScript

Add the following script to your wwwroot/index.html:

<script src="_content/BlazorCssLiveReload/BlazorCssLiveReload.js"></script>

3. Register the service

Add this into MauiProgram.cs:

builder.Services.AddCssLiveReload(options =>
{
    options.ListenerPort = 5002;
    options.ListenerHost = "localhost";
    options.ServerUrl = "ws://localhost:5002/";
});

var app = builder.Build();

var server = app.Services.GetRequiredService<IEmbeddedCssServer>();
server.StartAsync(); 

var watcher = app.Services.GetRequiredService<CssFileWatcher>();
watcher.Start(FindProjectRoot(AppContext.BaseDirectory));

private static string FindProjectRoot(string startPath)
{
    var dir = new DirectoryInfo(startPath);

    while (dir != null && dir.Exists)
    {
        if (dir.GetFiles("*.csproj").Any())
            return dir.FullName;

        dir = dir.Parent;
    }

    throw new Exception("Cannot find project root (folder containing .csproj)");
}

4. Enable Live Reload in your MainLayout.razor

@inherits LayoutComponentBase
@inject BlazorCssLiveReload.CssLiveReloadService CssReload
@inject IJSRuntime JSRuntime

@Body

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await CssReload.ConnectAsync(JSRuntime);
        }
    }
}

Usage

Run your app using Hot Reload:

Windows:

dotnet watch -f net10.0-windows10.0.19041.0

Android:

dotnet watch -f net10.0-android

iOS:

dotnet watch -f net10.0-ios

MacCatalyst:

dotnet watch -f net10.0-maccatalyst

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome!
Bug reports, feature requests, and discussions are open.

Support the Project

If this improves your DX, please consider starring the repo ❤️
Github: https://github.com/chicuong2k3/BlazorCssLiveReload