Hydro

Appearance

Hydro

Create .NET apps with SPA feeling without JS

Bring stateful and reactive components to ASP.NET Core without writing JavaScript

Get started
Why Hydro
Hydro
♥️

Razor Pages and MVC

Use familiar, server-side rendering strategy that has been a foundation of .NET web development for many years.

🧩️

Components

Build stateful and interactive components in an intuitive way, and use them in your Razor Pages or MVC views.

⚡️

Great user experience without JS

No full page reloads. After each action only update parts of the page that changed. No writing JavaScript required, but possible if needed.

Quick example: binding ​

razor
<!-- NameForm.cshtml -->

@model NameForm

<div>
  <input asp-for="Name" hydro-bind:keydown>
  <div>Hello @Model.Name</div>
</div>
<!-- NameForm.cshtml -->

@model NameForm

<div>
  <input asp-for="Name" hydro-bind:keydown>
  <div>Hello @Model.Name</div>
</div>
c#
// NameForm.cs

public class NameForm : HydroComponent
{
    public string Name { get; set; }
}
// NameForm.cs

public class NameForm : HydroComponent
{
    public string Name { get; set; }
}

Quick example: validation ​

razor
<!-- NameForm.cshtml -->

@model NameForm

<form hydro-on:submit="@(() => Model.Save())">
  <input asp-for="Name" hydro-bind>
  <span asp-validation-for="Name"></span>
  
  <button type="submit">Save</button>
  
  @if (Model.Message != null)
  {
    <div>@Model.Message</div>
  }
</form>
<!-- NameForm.cshtml -->

@model NameForm

<form hydro-on:submit="@(() => Model.Save())">
  <input asp-for="Name" hydro-bind>
  <span asp-validation-for="Name"></span>
  
  <button type="submit">Save</button>
  
  @if (Model.Message != null)
  {
    <div>@Model.Message</div>
  }
</form>
c#
// NameForm.cs

public class NameForm : HydroComponent
{
    [Required, MaxLength(50)]
    public string Name { get; set; }
    
    public string Message { get; set; }
    
    public void Save()
    {
        if (!Validate())
        {
            return;
        }
        
        Message = "Success!";
        Name = "";
    }
}
// NameForm.cs

public class NameForm : HydroComponent
{
    [Required, MaxLength(50)]
    public string Name { get; set; }
    
    public string Message { get; set; }
    
    public void Save()
    {
        if (!Validate())
        {
            return;
        }
        
        Message = "Success!";
        Name = "";
    }
}

Quick example: calling actions ​

razor
<!-- Counter.cshtml -->

@model Counter

<div>
  Count: @Model.Count
  
  <button hydro-on:click="@(() => Model.Add(10))">
    Add
  </button>
</div>
<!-- Counter.cshtml -->

@model Counter

<div>
  Count: @Model.Count
  
  <button hydro-on:click="@(() => Model.Add(10))">
    Add
  </button>
</div>
c#
// Counter.cs

public class Counter : HydroComponent
{
    public int Count { get; set; }
    
    public void Add(int value)
    {
        Count += value;
    }
}
// Counter.cs

public class Counter : HydroComponent
{
    public int Count { get; set; }
    
    public void Add(int value)
    {
        Count += value;
    }
}