WebAssembly or Auto

Create the app

dotnet new blazor --empty --interactivity Auto -o MyApp

Use --interactivity WebAssembly for pages that only ever run in the browser. Either way you get two projects: MyApp, the server, and MyApp.Client, where interactive pages and components live. Pages are still static by default; a page runs in the browser once it has a render mode.

Set up the server project

Follow the Blazor Web App steps in MyApp: install IzzyBlazor, add the stylesheet and IzzyTheme to App.razor, add @using IzzyBlazor to _Imports.razor, and register the services:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddIzzyBlazor();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

var app = builder.Build();
// ...
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(MyApp.Client._Imports).Assembly);
app.MapIzzyBlazor();

app.Run();

App.razor always renders on the server, so the stylesheet and theme are set up once, there, for every page.

Set up the .Client project

Install IzzyBlazor.Core:

dotnet add MyApp.Client package IzzyBlazor.Core --prerelease

Import the components:

@using IzzyBlazor

And register its services:

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddIzzyBlazorCore();

await builder.Build().RunAsync();

An Auto page renders on the server first and in the browser later, so it uses both registrations. AddIzzyBlazor on the server includes everything AddIzzyBlazorCore adds.

Packages

IzzyBlazor ships as two packages. Keep them on the same version.

Every component is in IzzyBlazor.Core, and both packages use the IzzyBlazor namespace, so the same markup works in either project.

In the browser

Components behave the same in the browser, apart from what depends on the request:

• Keep prerendering on (the default). AppSidebar's remembered state, a dismissed Banner and the choice in ColorSchemeSwitch are read from cookies on the server and handed to the browser with the prerendered page. With prerender: false they start from their defaults.
• Toasts show straight away. A redirect in the browser is a navigation, not a new request, so there's nothing to carry over. ToastRegion stays in the layout, which can be static.
• Dialogs opened from code need a host in the browser. Put one <DialogHost /> on the interactive page, or in the layout with a render mode on the host (<DialogHost @rendermode="InteractiveAuto" />). See Dialog.

Next steps

• Components: every component, with what it does in each mode.
• Form: one form that posts on static pages and validates on interactive ones.
• Add to an existing app: Bootstrap, your own components and name clashes.