Welcome to Hydro toolkit!

Hydro is an extension to ASP.NET Core MVC and Razor Pages. It extends View Components to make them reactive and stateful with ability to communicate with each other without page reloads. As a result, you can create powerful components and make your application to feel like SPA with zero or minimal amount of the JavaScript code (depending on the needs) and without separate front-end build step. It also works well with existing ASP.NET Core applications.

Hydro toolkit is a set of examples that will help you to understand how to use Hydro in your project in common use cases. It is a collection of code snippets ready to copy-paste.

Let's start!

To use the examples from the toolkit, you need to either create a new Hydro project or add Hydro to an existing one.

If you don't have a project yet, you can create one using a template:

dotnet new install Hydro.Templates
dotnet new hydro-tailwind -o MyApp
cd MyApp

Hydro toolkit uses Tailwind. If you don't have Tailwind installed yet, please follow the instructions below.

MacOS:

brew install tailwindcss

Windows:

winget install --id=TailwindLabs.TailwindCSS  -e

Or if you prefer, you can install it manually by downloading the package from the releases page.

And that's it! You are ready to use Hydro toolkit examples. You can read more about all the features in the documentation.

Manual installation

If you already have an existing project, or you don't want to use the template, you can set up Hydro and Tailwind manually. You can find the instructions here.

Components

Some of the components are based on the examples from HyperUI.