Convert Figma logo to code with AI

bigskysoftware logohtmx

</> htmx - high power tools for HTML

45,167
1,455
45,167
595

Top Related Projects

29,897

A rugged, minimal framework for composing JavaScript behavior in your markup.

7,078

The speed of a single-page web application without having to write any JavaScript

23,029

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

A collection of composable behaviors for your Stimulus Controllers

Fast and lightweight DOM diffing/patching (no virtual DOM needed)

Quick Overview

HTMX is a lightweight JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML, using attributes. It's designed to make it easy to build modern user interfaces with the simplicity and power of hypertext.

Pros

  • Simplifies dynamic web applications with minimal JavaScript
  • Seamless integration with existing HTML and server-side technologies
  • Lightweight and fast, with a small footprint (~ 14KB min.gz'd)
  • Encourages server-side rendering and progressive enhancement

Cons

  • Learning curve for developers accustomed to heavy JavaScript frameworks
  • Limited compared to full-featured SPA frameworks for complex applications
  • May require more server-side processing compared to client-heavy approaches
  • Not as widely adopted as some other front-end technologies

Code Examples

  1. Basic AJAX request:
<button hx-post="/submit" hx-target="#result">
  Submit
</button>
<div id="result"></div>

This button triggers a POST request to "/submit" and updates the #result div with the response.

  1. Load more content on scroll:
<div hx-get="/more" hx-trigger="intersect once">
  Load More
</div>

This div loads more content from "/more" when it comes into view, but only once.

  1. Form validation with out-of-band updates:
<form hx-post="/submit" hx-target="#result">
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>
<div id="result"></div>

This form submits via AJAX and can receive out-of-band updates to show validation errors without a full page reload.

Getting Started

To start using HTMX, include the library in your HTML:

<script src="https://unpkg.com/htmx.org@1.9.2"></script>

Then, add HTMX attributes to your HTML elements:

<button hx-get="/api/data" hx-target="#result">
  Load Data
</button>
<div id="result"></div>

This will load data from "/api/data" into the #result div when the button is clicked, without writing any JavaScript.

Competitor Comparisons

29,897

A rugged, minimal framework for composing JavaScript behavior in your markup.

Pros of Alpine

  • More comprehensive JavaScript functionality, allowing for complex client-side interactions
  • Easier to integrate with existing JavaScript-heavy applications
  • Smaller learning curve for developers already familiar with JavaScript frameworks

Cons of Alpine

  • Larger file size and potentially higher performance overhead
  • More complex syntax compared to HTMX's attribute-based approach
  • May encourage overuse of client-side logic, leading to less server-rendered content

Code Comparison

HTMX example:

<button hx-post="/api/users" hx-target="#user-list">
  Add User
</button>

Alpine example:

<div x-data="{ users: [] }">
  <button @click="users.push(await (await fetch('/api/users')).json())">
    Add User
  </button>
</div>

Both HTMX and Alpine aim to simplify web development, but they take different approaches. HTMX focuses on server-side rendering and minimal JavaScript, while Alpine provides a lightweight JavaScript framework for more complex client-side interactions. The choice between them depends on the specific needs of the project and the development team's preferences.

7,078

The speed of a single-page web application without having to write any JavaScript

Pros of Turbo

  • Integrated with Ruby on Rails ecosystem, providing seamless integration for Rails developers
  • Offers a more comprehensive solution with Turbo Frames, Turbo Streams, and Turbo Drive
  • Backed by Basecamp, ensuring long-term support and development

Cons of Turbo

  • Steeper learning curve due to more complex concepts and features
  • Heavier JavaScript footprint compared to HTMX's lightweight approach
  • Less flexible for use outside of the Rails ecosystem

Code Comparison

HTMX example:

<button hx-post="/submit" hx-target="#result">
  Submit
</button>
<div id="result"></div>

Turbo example:

<%= turbo_frame_tag "result" do %>
  <%= button_to "Submit", submit_path, data: { turbo_frame: "result" } %>
<% end %>

Both examples demonstrate a simple button that submits a form and updates a target element. HTMX uses attributes directly on HTML elements, while Turbo relies on Rails helpers and conventions.

HTMX focuses on simplicity and ease of use, making it more accessible for developers across different frameworks. Turbo offers a more comprehensive solution but is primarily designed for Rails applications. HTMX's lightweight nature allows for easier integration into existing projects, while Turbo provides a more opinionated and feature-rich approach for Rails developers.

23,029

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Pros of Livewire

  • Tighter integration with Laravel, providing seamless access to backend features
  • Full-stack framework with built-in state management and component lifecycle
  • Easier to create complex, stateful components without writing JavaScript

Cons of Livewire

  • Limited to Laravel ecosystem, not framework-agnostic like HTMX
  • Steeper learning curve for developers new to Laravel or Livewire concepts
  • Potentially higher server load due to more frequent backend interactions

Code Comparison

HTMX:

<button hx-post="/increment" hx-target="#counter">
  Increment
</button>
<div id="counter">0</div>

Livewire:

class Counter extends Component
{
    public $count = 0;
    public function increment() { $this->count++; }
    public function render() { return view('livewire.counter'); }
}
<div>
    <button wire:click="increment">Increment</button>
    <div>{{ $count }}</div>
</div>

HTMX focuses on enhancing HTML with AJAX capabilities, while Livewire provides a more comprehensive full-stack solution for Laravel applications. HTMX is lighter and more flexible, whereas Livewire offers deeper integration with Laravel and more powerful state management out of the box.

A collection of composable behaviors for your Stimulus Controllers

Pros of stimulus-use

  • Extends Stimulus with additional behaviors and utilities
  • Provides a set of composable controllers for common use cases
  • Integrates seamlessly with existing Stimulus applications

Cons of stimulus-use

  • Requires Stimulus as a dependency, limiting its standalone use
  • May have a steeper learning curve for developers new to Stimulus
  • Less flexible for non-Stimulus projects compared to HTMX

Code Comparison

stimulus-use:

import { useIntersection } from "stimulus-use"

export default class extends Controller {
  static use = [useIntersection]

  appear(entry) {
    console.log("Element is visible")
  }
}

HTMX:

<div hx-get="/api/messages" 
     hx-trigger="revealed"
     hx-swap="afterend">
  Load More Messages
</div>

The stimulus-use example demonstrates how to use the intersection observer functionality, while the HTMX example shows how to trigger a request when an element becomes visible. HTMX achieves this with less JavaScript and more declarative HTML attributes.

Fast and lightweight DOM diffing/patching (no virtual DOM needed)

Pros of morphdom

  • Lightweight and focused solely on DOM diffing and patching
  • Can be used with any framework or vanilla JavaScript
  • Highly performant for updating large DOM trees

Cons of morphdom

  • Requires more manual setup and integration compared to HTMX
  • Lacks built-in AJAX functionality and other features provided by HTMX
  • May require additional libraries or custom code for complete solutions

Code Comparison

morphdom:

import morphdom from 'morphdom';

const oldEl = document.getElementById('old-element');
const newEl = document.createElement('div');
newEl.innerHTML = '<p>New content</p>';

morphdom(oldEl, newEl);

HTMX:

<button hx-get="/api/content" hx-target="#content-area" hx-swap="outerHTML">
  Load New Content
</button>
<div id="content-area">
  <!-- Content will be updated here -->
</div>

morphdom focuses on efficient DOM updates, while HTMX provides a more comprehensive solution for dynamic web applications with declarative HTML attributes. morphdom offers more flexibility but requires more JavaScript code, whereas HTMX simplifies common AJAX patterns with less custom code.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

</> htmx

high power tools for HTML

Discord Netlify Bundlephobia Bundlephobia

introduction

htmx allows you to access 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

htmx is small (~14k min.gz'd), dependency-free & extendable

motivation

  • Why should only <a> and <form> be able to make HTTP requests?
  • Why should only click & submit events trigger them?
  • Why should only GET & POST be available?
  • Why should you only be able to replace the entire screen?

By removing these arbitrary constraints htmx completes HTML as a hypertext

quick start

  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The hx-post and hx-swap attributes tell htmx:

"When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the response"

htmx is the successor to intercooler.js

installing as a node package

To install using npm:

npm install htmx.org --save

Note there is an old broken package called htmx. This is htmx.org.

website & docs

contributing

Want to contribute? Check out our contribution guidelines

No time? Then become a sponsor

hacking guide

To develop htmx locally, you will need to install the development dependencies.

Run:

npm install

Then, run a web server in the root.

This is easiest with:

npx serve

You can then run the test suite by navigating to:

http://0.0.0.0:3000/test/

At this point you can modify /src/htmx.js to add features, and then add tests in the appropriate area under /test.

  • /test/index.html - the root test page from which all other tests are included
  • /test/attributes - attribute specific tests
  • /test/core - core functionality tests
  • /test/core/regressions.js - regression tests
  • /test/ext - extension tests
  • /test/manual - manual tests that cannot be automated

htmx uses the mocha testing framework, the chai assertion framework and sinon to mock out AJAX requests. They are all OK.

haiku

javascript fatigue:
longing for a hypertext
already in hand

NPM DownloadsLast 30 Days