Overview

Rizzy is designed to seamlessly integrate server-rendered Blazor components with the dynamic capabilities of HTMX. It achieves this by providing equivalent components for many of Blazor’s built-in ones. These Rizzy-specific components, often prefixed with Rz, sometimes implement subtle differences behind the scenes to function correctly within an HTMX-driven workflow, which relies on standard HTTP requests and HTML fragments rather than Blazor’s typical SignalR or WebAssembly interactivity models.

Why the Rz* Components? They make standard Blazor components compatible with HTMX and common web techniques. For example, the RzInput*Base components add the standard data-val-* attributes needed for client-side validation libraries familiar to Asp.net MVC users, based on your model’s Data Annotations. This provides instant validation feedback alongside HTMX updates. Other Rz components handle specific HTMX integration points, like ensuring RzPageTitle updates correctly after swaps.

Below is a list of Blazor built-in components alongside their Rizzy equivalents or how they are typically used within Rizzy. Each Rizzy component aims to provide a developer experience nearly identical to its Blazor counterpart while embracing HTMX’s dynamic loading and partial updates.

Blazor ComponentRizzy Equivalent / UsageNotes
AntiforgeryTokenAntiforgeryTokenUsed directly; Rizzy manages token generation via config/middleware.
AuthorizeViewAuthorizeViewAuthorization should be implemented at the controller level.
CascadingValue<TValue>CascadingValue<TValue>Used directly.
DataAnnotationsValidatorDataAnnotationsValidatorUsed directly within EditForm.
DynamicComponentDynamicComponentUsed directly (e.g., internally by RzView).
Editor<T>Editor<T>Used directly.
EditFormEditFormUsed directly; often paired with RzInitialValidator.
ErrorBoundaryErrorBoundaryUsed directly.
FocusOnNavigateN/AHTMX manages focus/scrolling differently post-swap.
HeadContentHeadContentStandard component is used.
HeadOutletHtmxConfigHeadOutlet / HeadOutletUse HtmxConfigHeadOutlet for HTMX config injection, alongside the standard HeadOutlet.
InputCheckboxRzInputCheckboxBaseAdds data-val-* attributes, ID handling.
InputDate<TValue>RzInputDateBase<TValue>Adds data-val-* attributes, ID handling.
InputFileRzInputFileBaseStandard component, ID handling.
InputNumber<TValue>RzInputNumberBase<TValue>Adds data-val-* attributes, ID handling.
InputRadio<TValue>RzInputRadioBase<TValue>Standard component, ID handling (validation often on group).
InputRadioGroup<TValue>RzInputRadioGroupBase<TValue>Adds data-val-* attributes, ID handling for the group.
InputSelect<TValue>RzInputSelectBase<TValue>Adds data-val-* attributes, ID handling.
InputTextRzInputTextBaseAdds data-val-* attributes, ID handling.
InputTextAreaRzInputTextAreaBaseAdds data-val-* attributes, ID handling.
NavigationLockN/AHTMX handles navigation state differently.
NavLinkNavLinkUsed directly; often combined with hx-boost for HTMX navigation.
PageTitleRzPageTitleHandles title updates correctly during HTMX swaps.
RouterN/ARouting handled by ASP.NET Core (MVC/Minimal API).
RouteViewN/ARouting handled by ASP.NET Core.
ValidationSummaryRzValidationSummaryBaseDisplays summary compatible with standard client-side validation.
Virtualize<TItem>N/AVirtualization typically relies on Blazor’s interactive runtimes.

For detailed documentation on the standard Blazor components, refer to the officialBlazor Microsoft documentation. Rizzy’s components aim to align closely with these while enabling HTMX integration.