What is HTMX

What is HTMX in 2024

by

In this blog post, you will learn What is HTMX. HTMX extends HTML; at the end, it is a JavaScript library which helps to change the behaviour / add features to the elements.

The main aim of HTMX is to render the response to the UI without you writing client-side java script code. HTMX send behind-the-scenes HTTP requests (AJAX) and renders responses to the UI.

HTMX is a thing that lets you do cool web stuff like live updates and fancy changes on your website by just using simple website code (HTML). You don’t need to write complicated scripts. It’s like adding superpowers to your website’s basic code so it can do more exciting things easily.

HTMX Project Setup

How to Install HTMX

  1. Open the official website. https://htmx.org/docs/ And move to the Installing section.
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
OR

From the official website, download htmx.min.js.

Copy all the code and paste it into HTMX.js file

Then add the js file into the html file with proper path. 

<!-- Your HTMX FILE PATH htmx.js -->
<script src="htmx.js" defer></script>

Defer: – Make sure the script will be executed after the page has render.

How to work with Express and Node | What is HTMX

Follow the given steps.

Create package.json file. 

{
  "name": "essentials",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node --watch app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.3"
  }
}

Create app.js file 

import express from 'express';

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>HTMX</title>      
        <link rel="icon" href="/icon.png" />
        <script src="/htmx.js" defer></script>       
      </head>
      <body>
        <header>        
        <h1>Hello World</h1>
        </header>
        <main>
          <p>HTMX Training</p>
          <button>Click Here</button>
        </main>
      </body>
    </html>
  `);
});

app.listen(3000);
npm install
npm start
http://localhost:3000/

Benefits of HTMX | HTMX vs React

Comparison Aspect HTMX React
Developed by Big Sky Software Meta
Open source Yes Yes
GitHub stars 29k+ 218k+
Weight 2.9 kB 6.4 kB
Syntax HTML with custom attributes JSX, extended JavaScript
Goal Add interactivity in HTML Full-featured UI library
Learning curve Gentle Steep
Features AJAX, minor features Composability, hooks, etc.
Performance Great Good for complex apps
Integration Into existing HTML Into HTML, mainly JavaScript
Community Small, growing Largest on market
Ecosystem Small Very rich
  1. HTMX; extends functionality/idea of HTML.
  2. Using HTMX, Any element can issue an HTTP request (HTMX works with AJAX, moving parts on pages, live updates, and more.)
  3. No need to reload the entire page.
  4. HTMX gives you the ability to use new browser features straight through HTML.
  5. WebSocket connection, CSS transition, and Server event are also possible while working with HTMX.

Other Post

How to Create Simple Log file in C# in 2024

Leave a Comment