Join our telegram group here. Join Now!

Will HTMX replace years old HTML?

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


Welcome to my blog Freeplay!
Today the topic is Will HTMX replace years old HTML?! Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!

Definition of HTMX

HTMX gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext. It is small (~12k min.gz'd), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react.

Starting with Hello World

From the sample's HTML, The first step is to decorate our button with the HTMX attributes of hx-get and hx-target. The hx-get attribute requires an endpoint value that we'll make an HTTP request of GET to. The endpoint will respond with a "Hello, World" HTML snippet. In this case, since the URL path is identical to our current page, thus we can leave the value empty.

The hx-target attribute is the destination for our HTML response. By default, HTMX swaps content into our target's innerHTML. The target attribute uses common CSS selectors to find an element. We can use the # symbol to find elements with a particular id. While using id is common, you can use any valid CSS selector to perform a swap.

Finally, we need to program the behavior in our endpoint. We want the endpoint to respond with our "hello world" HTML snippet. We do this by using HTMX.NET to return a different response depending on an HTMX HTTP header. All HTMX requests set an HX-Request header, which we can use to determine the originator of an HTTP request. Within our Razor Page instance, we can change the OnGet method to return either a fully rendered page or an HTML fragment.

We'll get more into HTMX.NET later, but in the following example we can see one of the extension methods it provides. The IsHtmx call is a convenience method used to determine if an incoming occurred through the HTMX client-side library.

Syntax difference

<meta charset='utf-8' />
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta title='Freeplay' property'og:title' />
<h1> Hello World </h1>
Sample code in HTML

public IActionResult OnGet()
    return Request.IsHtmx()
        ? Content("Hello, World!", "text/html")
        : Page();

Sample code in HTMX

Setting up HTMX

Just include the code inside your main code:
<script crossorigin='anonymous' integrity='sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo' src='[email protected]/' />

Installing through npm is a good idea. Type
npm install

A lot more stuff can be done using HTMX. We will cover these in upcoming posts and
Happy Children's Day !!!


I expressed my views on the topic 'Will HTMX replace years old HTML?'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.


About the Author

Hey, I am Soumyabrata Mukherjee! I am a student, professional blogger as well as an UI designer from Dhanbad, Jharkhand. My blogs are Freeplay and Freewit. You can hire me in business to improve its working and management.

Post a Comment

Comments are moderated. To avoid SPAM comments, we are doing so.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.