Hydro Consulting

Interactive UIs without JavaScript complexity. Hydro lets you build components like sortable tables, dynamic forms, and live search — things that typically require a JavaScript framework — entirely in C#. The server handles state, rendering, and updates. Users get a responsive, interactive experience, and your team avoids the complexity of managing client-server state synchronization.

Always up-to-date data. Because Hydro components render on the server, the data is always fresh. There's no stale client-side cache, no desynchronized state, no "refresh to see the latest changes." Users see the current state of the system every time. This is especially valuable for dashboards, admin panels, and collaborative applications.

Accessible by default. Hydro renders standard HTML. Screen readers, keyboard navigation, and assistive technologies work naturally because the output is well-structured server-rendered markup. Accessibility improvements made on the server automatically apply to all users.

Fast initial loads, rich interactivity. Hydro pages start as server-rendered HTML — no blank loading states, no JavaScript spinner hell. Then, as users interact, only the components that change are updated. This combines the fast initial load of traditional server rendering with the smooth interactivity of a SPA.

Server-rendered components. Hydro components are C# classes that inherit from HydroComponent. They define state, handle events, and return Razor views. The framework manages the lifecycle — initial render, state changes, and DOM updates — automatically.

Embedded in Razor Pages or MVC views. You embed Hydro components in your regular server-rendered pages using a simple tag helper. This means you can start using Hydro for specific parts of a page (a live search bar, a sortable table) without rebuilding the entire application.

Alongside HTMX. We use HTMX for most page interactions and Hydro for the components that need richer interactivity. The two work seamlessly together — an HTMX interaction can update a Hydro component and vice versa. This gives you a progressive enhancement ladder from simple to complex.

Connected to your backend services. Hydro components access your full .NET backend — services, repositories, Wolverine handlers, and database contexts — through dependency injection. There's no separate API layer to build for your components; they call your existing backend directly.

The choice between HTMX, Hydro, and a full JavaScript framework is a spectrum, not a binary. Here's how we navigate it.

Start with HTMX for most pages. For content pages, forms, and simple interactions, HTMX is the simplest and most performant choice. It gives you interactivity without the complexity of a component model. We use HTMX as our default.

Reach for Hydro when you need more. When a component needs client-side state, real-time updates, or complex event handling, Hydro provides the structure you need without jumping to a full SPA framework. The transition from HTMX to Hydro is smooth — they coexist in the same page.

Consider Preact for the most interactive parts. For components that need fine-grained client-side interactivity — drag-and-drop, rich text editing, complex visualizations — Preact (or another JavaScript framework) is appropriate. These can be embedded as "islands" within your HTMX/Hydro pages.

Match the technology to the team. If your team is primarily C# developers without JavaScript expertise, Hydro extends their reach into interactive UIs without requiring a new skill set. If your team loves JavaScript, Preact or a similar framework might feel more natural. There's no universal "best" — only "best for your team."