HTMX - Installation

Quiz

Installing HTMX for a project is quite an easy task as compared to other JavaScript libraries. HTMX file is so small that you can keep it in your project file or you can use a CDN link or any other options that better suit your requirements or feel easy to you.

Steps to Download HTMX

There are lots of ways to use HTMX, all the possible ways are mentioned and described below.

Via CDN Link
Download a Copy
Via npm Installation
Through Webpack

Via CDN Link

This is the fastest and easiest way to use HTMX in your project. You just need to include the following link inside the <head> tag.

Minified Version

<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>

Unmodified(Original) Version

<script src="https://unpkg.com/htmx.org@2.0.2/dist/htmx.js" integrity="sha384-yZq+5izaUBKcRgFbxgkRYwpHhHHCpp5nseXp0MEQ1A4MTWVMnqkmcuFez8x5qfxr" crossorigin="anonymous"></script>

Download a Copy

You can simply save the file from this link https://unpkg.com/htmx.org@2.0.2/dist/htmx.min.js and place the file inside of your project directory and include that file through <script> tag.

<script src="/path/to/htmx.min.js"></script>

Via npm Installation

You can install HTMX through npm using the below command.

npm install htmx.org

Through Webpack

To use HTML through Webpack you need to use npm or yarn package manager to install it first.

Step 1: Install Command

npm install htmx.org@2.0.2
// Or
yarn install htmx.org@2.0.2

Step 2: Import in your index.js file
```
import 'htmx.org';
```
Step 3: Create custom JavaScript file(custom.js)
Import this file to your index.js file.
```
import 'path/to/my_custom.js';
```
Step 4: Add below code to the file(custom.js)
```
window.htmx = require('htmx.org');
```

Now you are ready to use HTMX in your project.

Example of HTMX

In this following example, when the user will click on the "Click Me!" button it will issue an HTTP POST request to '/clicked' and use the content from the response to replace the element with the id 'parent' in the DOM.

<button hx-post="/clicked"
 hx-trigger="click"
 hx-target="#parent"
 hx-swap="outerHTML"
>
 Click Me!
</button>

Print Page