Render modes

The same components work on every page. On a static page they render HTML that works on its own, IzzyBlazor's script adds what HTML can't, and on an interactive page the same markup binds to C#.

Three layers

HTML first. Every component renders real elements: forms that post, links, radio buttons, native dialogs and selects, with CSS doing the switching. This is all a page has with JavaScript off.
IzzyBlazor's script. Small custom elements add keyboard handling, ARIA roles, live values and checks before posting, with no circuit.
Interactive pages. On a Server, WebAssembly or Auto page, @bind and event handlers keep C# in step.

Switch the mode to see one component in each:

Preview Code

Preview

Profile Billing Security

Profile

Your name, photo and the email people see.

Billing

Your plan, payment method and invoices.

Security

Your password, passkeys and sessions.

C# has the tab as profile

Code

Modes.razor

@* The same Tabs in each mode: radios and CSS with no script, ARIA tabs with IzzyBlazor's script,
   and C# told of the change on an interactive page. *@
<Stack Gap="3" Grow>
    <Tabs @bind-Selected="_tab" Label="Account">
        <Tab Label="Profile" Icon="Lucide.User">
            <TextBlock Color="Color.Muted">Your name, photo and the email people see.</TextBlock>
        </Tab>
        <Tab Label="Billing" Icon="Lucide.CreditCard">
            <TextBlock Color="Color.Muted">Your plan, payment method and invoices.</TextBlock>
        </Tab>
        <Tab Label="Security" Icon="Lucide.Shield">
            <TextBlock Color="Color.Muted">Your password, passkeys and sessions.</TextBlock>
        </Tab>
    </Tabs>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">C# has the tab as <Code>@(_tab ?? "profile")</Code></TextBlock>
</Stack>

@code {
    private string? _tab;
}

Static: The script makes them ARIA tabs, with roving focus. C# still isn't told: there's no circuit.

	JavaScript off	With IzzyBlazor's script	Interactive page
Dialog	Opens from a trigger or a `?dialog=id` link; the browser traps focus and Escape closes it	A dialog opened from the server becomes a real modal; the URL is tidied after closing	`@bind-Open`
Table	Sorts, filters and pages through the URL	A select-all checkbox; filters apply as you type	Sorting, paging, filters and selection bind to C#
Tabs	Radio buttons and CSS switch panels	ARIA tabs, roving focus	`@bind-Selected`
Combobox	A native select that posts with the form	Type to filter, keyboard navigation	Server-side search as you type
FileUpload	The file posts with a `Multipart` form (`IFormFile`)	Drop files on the zone; type and size checked first	`OnChange` streams `IBrowserFile`s

A Blazor Web App's pages are static unless you say otherwise. Make a page interactive where it needs C# on every click, and keep the rest static: they need no circuit, so they scale and deploy like plain pages. An interactive Server page's circuit lives on the server that started it, so with several servers, each reader has to stay on one; see Interactive parts stop responding in production.

razor

@page "/orders/{Id:int}/edit"
@rendermode InteractiveServer

WebAssembly and Auto pages live in the .Client project, with IzzyBlazor.Core; see WebAssembly or Auto.

What each component does

Each component's Overview has a Mode support table, and its API page labels the parameters that need more than HTML: Needs JavaScript, or Interactive only for C# events and @bind. Working with JavaScript off and doing more with it isn't labeled: that's every component.

State on static pages

With no circuit, C# runs only when the page is requested, so a static page keeps its state where the browser does:

In a form. Form posts and validates on the server, and its fields bind to your model.
In the URL. Table, FilterForm and Pagination keep sorting, filters and the page in the query string; Tabs takes QueryKey, and a dialog opens from ?dialog=id.
In the element. Disclosures, menus, popovers and dialogs open and close in the browser. On an interactive page, @bind-Open reports it to C#, and setting Open opens or closes it.
In a cookie. The color scheme and the sidebar's state, read on the server so pages arrive right.

Events such as a button's OnClick run only on interactive pages. On a static page, use a submit button in a form or a link. Troubleshooting has the usual surprises, such as a value that resets on the next request.

Next steps

Forms and validation: one form for static and interactive pages.
All components: each one's mode support.

Render modes

Three layers

Choose a page's mode

What each component does

State on static pages

Next steps