jetbrains logo Getting Started with HTMX - Complete

Getting Started with HTMX
For ASP.NET Core Developers

by Khalid Abuhakmeh

Hello, ASP.NET Core developers!

If you're running this solution, you're likely following along with the video series from JetBrains, or you're very interested in HTMX as a solution to your frontend problems.

Let's start by describing what HTMX is for folks new to the library. HTMX is a JavaScript library that performs HTTP requests and relies heavily on the server stack's ability to deliver HTML fragments. HTMX then processes those responses into an existing page. Developers can decorate any HTML element with HTMX attributes that pair with HTTP methods: GET, POST, PUT, PATCH, and DELETE.

To understand what HTMX is, we also should think about what it is not. It is not a complicated framework approach to building client-side user experiences. It does not require build or pack tools, and it does not require an "all-in" approach, where you need to write every part of your front end using HTMX. Instead, the library gives you the freedom to enhance your user experience when you choose to do so. In fact, to install HTMX, all you need is a pre-minized JavaScript file in your HTML pages. That's it!

As you may already know, ASP.NET Core is a powerful server-side technology and pairs well with the HTMX philosophy. This solution will show you how you can pair the two technologies together to deliver fantastic user experiences with a few lines of code.

Let's Get Started!

Exercises

Be sure to look at the code to see how it all comes together.

  1. Hello World
  2. Counter
  3. Select (Dropdowns)
  4. Search
  5. Scroll
  6. Modal
  7. Tabs
  8. Shortcuts
  9. Form Validation
  10. Polling
  11. Server Sent Events
  12. ASP.NET Core Tag Helpers
  13. Clientside Templates & JSON APIs
  14. Out of Band Swaps

This section includes links to related content you may want to be familiar with.