htmxRazor
Server-rendered UI components for ASP.NET Core with htmx
4 followers
Server-rendered UI components for ASP.NET Core with htmx
4 followers
htmxRazor is a complete UI component library implemented as Razor Tag Helpers. Every component renders clean, semantic HTML styled by its own CSS design system. No client-side framework required — just add htmx attributes to any component for dynamic behavior.
What Shipped in htmxRazor 1.2.0 (and Why It Matters for Server-Rendered .NET Apps)
If you are building ASP.NET Core applications with htmx and you got tired of gluing together toast notifications by hand, writing pagination partials from scratch on every project, or fighting CSS specificity collisions when you bring in a component library, this release is pointed directly at you.
htmxRazor 1.2.0 is the first feature release since the library hit 1.0, and it ships six changes that target the most common friction points in server-rendered .NET development.
Toast Notifications, Server-Side
The number one feature request since htmxRazor launched was toast notifications. Every app that processes form submissions or background actions needs a way to tell users what happened. The typical approach in htmx-land involves wiring a JavaScript toast library into your layout, managing oob-swaps manually, and hoping your screen reader coverage does not fall through the cracks.
htmxRazor 1.2.0 replaces all of that with two components and two server-side methods.
Add a <rhx-toast-container> to your layout. Call HxToast() or HxToastOob() from your page handler or controller action. The component renders toasts with auto-dismiss timers, severity variants (success, warning, danger, info), proper stacking for multiple simultaneous notifications, and aria-live regions so screen readers announce every toast automatically.
It took one Tag Helper and one method call to replace what used to take a third-party library and custom plumbing.
Pagination That Speaks htmx
The new <rhx-pagination> component is deceptively simple: page buttons, ellipsis for large result sets, first/last/prev/next controls, and size variants. But what makes it different from every other .NET pagination helper is that it generates htmx attributes for page navigation. Click a page number and you get a partial page swap, not a full browser reload. This is how pagination should work in an htmx application, and now it takes a single component to get there.
Cascade Layers Kill Specificity Wars
This is the infrastructure change that will convince teams working on existing projects to adopt htmxRazor.
Component library CSS has a well-known problem: its specificity collides with your application's styles. You end up writing increasingly aggressive selectors or reaching for !important, and the stylesheet becomes a mess.
Version 1.2.0 wraps all htmxRazor CSS inside @layer declarations. In the cascade layer model, any unlayered CSS (which includes everything you write in your app) automatically takes priority over layered CSS. Your styles win. The library stays out of your way. No hacks, no overrides, no frustration.
If you have been hesitant to bring htmxRazor into a project with an existing stylesheet, this change removes that concern entirely.
ARIA Live Regions for htmx Swaps
When htmx replaces content on the page, screen readers do not know the page changed. Users who depend on assistive technology miss the update entirely. The new <rhx-live-region> component fixes this by announcing htmx swaps to screen readers with configurable politeness levels (polite or assertive) and atomic update control.
This is the kind of feature that does not show up in screenshots but determines whether your app is usable by everyone or just by sighted mouse users.
View Transitions and hx-on:* Attributes
Two more additions: rhx-transition and rhx-transition-name attributes give every component access to the View Transitions API for animated page transitions. And the hx-on:* dictionary attribute on htmxRazorTagHelperBase brings full htmx 2.x event handler support to every Tag Helper in the library.
Get the Update
Full docs and live component demos: https://htmxRazor.com Source and contributing guide: https://github.com/cwoodruff/htmxRazor
htmxRazor 1.2.0 just shipped with the features .NET developers have been asking for most.
Toast notifications. The new <rhx-toast-container> and <rhx-toast> components handle auto-dismiss, severity variants, stacking, and screen reader announcements. Trigger them from the server with HxToast() or HxToastOob(). No JavaScript toast library needed.
Pagination. The <rhx-pagination> component gives you htmx-powered page navigation with ellipsis, first/last/prev/next buttons, and size variants. Partial page updates without full reloads, all from a single Tag Helper.
CSS cascade layers. All htmxRazor component CSS is now wrapped in @layer declarations. Your application styles beat the library styles by default, with no specificity hacks. This makes htmxRazor dramatically easier to drop into existing projects that already have their own stylesheets.
ARIA live region manager. The <rhx-live-region> component automatically announces htmx content swaps to screen readers. Configurable politeness levels, atomic updates, and zero JavaScript.
Plus View Transitions API support and hx-on:* dictionary attributes for htmx 2.x event handlers on every component.
Upgrade: dotnet add package htmxRazor --version 1.2.0
Docs and live demos: https://htmxRazor.com Source: https://lnkd.in/gExa5VBP
htmxRazor v1.3.0 ships today.
Six features: a server-driven data table with sort, filter, and pagination; a Command Palette via Cmd+K; focus management after htmx swaps; CSS container queries across card, dialog, and data table; skip navigation and landmark Tag Helpers; and a full ARIA Authoring Practices keyboard audit across all existing interactive components.
The data table is the headline. No MIT-licensed ASP.NET Core Tag Helper solution existed for this pattern before this release. Three composable Tag Helpers handle the table structure, column definitions, and pagination. A new DataTableRequest model binder picks sort, filter, and page parameters off the query string so handler code stays clean. Every sort button is a native button element with an aria-sort attribute. Every filter input carries aria-label. The loading state toggles aria-busy.
The European Accessibility Act took effect in June 2025. WCAG 2.2 AA is now a legal requirement for digital products sold in EU markets. htmxRazor v1.3.0 targets that compliance directly, through component design rather than documentation footnotes.
No Bootstrap. No client-side JS library. Pure htmx and ASP.NET Core Tag Helpers.
htmxRazor v1.4.0 ships today
Seven features: SSE streaming via `<rhx-sse-stream>` with `IAsyncEnumerable<string>` server helpers; a multi-step wizard with TempData-based state persistence; a timeline component for audit logs and activity feeds; a response-aware form that auto-configures error handling by HTTP status code; optimistic UI on button, switch, and rating; a load-more pagination pattern; and dialog size variants.
The SSE and wizard components are the headline work. `<rhx-sse-stream>` wraps the htmx SSE extension in a single Tag Helper that declares the endpoint, declares the event name, and the component handles the full `hx-ext="sse"` setup, including `aria-live` attributes. `WriteSseStreamAsync` streams `IAsyncEnumerable<string>` as `text/event-stream` with one method call on the server side.
Optimistic UI lands as a single attribute. Add `rhx-optimistic="true"` to any button, switch, or rating. State saves before the request fires. If the server returns an error, the component reverts automatically with an animation that respects `prefers-reduced-motion`.
147 new tests. 1,802 total. No breaking changes. No new NuGet dependencies.
dotnet add package htmxRazor
Docs and demos: https://htmxRazor.com
Source: https://lnkd.in/gExa5VBP