Awesome Htmx

An awesome list of resources about htmx such as articles, posts, videos, talks and more.

Hoping to keep this list updated as much as possible, any new links through PRs are appreciated.

Contents

• Official
• BlogPosts
• Tools
• Videos
• Examples
• Podcasts

Official

• Website
• GitHub
• Twitter
• Discord Server
• Examples
• htmx on Stack Overflow

BlogPosts

• How to create ChatGPT with Django and HTMX in 4 minutes 🦾
• Add instant database search with Django and HTMX 🕵️
• How to add serverless functions to Django in 6 minutes (with HTMX and AWS Lambda) 🧠
• Add infinite scroll with Django and HTMX in 60 seconds ∞
• HackerNews Post - Htmx – high power tools for HTML.
• Full Stack Application – HTMX + ExpressJS + Turso: A Step-by-Step Guide
• How to create a Django form (using HTMX) in 90 seconds 🐎
• 3 steps to upload files properly with Django (and HTMX) 📁
• Learning AJAX made easy - Build an app with htmx
• How To Use Htmx in Django
• HTMX With ASP.NET Core
• HTMX Requests with ASP.NET Core Anti-Forgery Tokens
• HTMX and ASP.NET Core Swapping Techniques
• Notes on HTMX
• Creating a Temperature Converter without a single line of JS
• Creating a Counter component without a single line of JS
• Creating a Flight Booker component without a single line of JS
• Creating a GitHub profile search component in htmx
• Lazy Load Form Fields In Rails With HTMX
• Handle JSON API Results in Htmx
• Rapid Prototyping with Django, htmx, and Tailwind CSS
• Rapid Prototyping with Flask, htmx, and Tailwind CSS
• Ajax-Enabled Checkbox and Select with Django and HTMX
• Django Formsets Tutorial - Build dynamic forms with Htmx
• Django, HTMX and Alpine.JS: A Match Made In Heaven
• TodoMVC with Thymeleaf and HTMX
• Using Server-Sent Events with Thymeleaf and HTMX
• Thymeleaf and htmx with out of band swaps
• Htmx authentication error handling
• json2html
• Full stack web development in a single Java file: An intro to Javalin and htmx
• Hono + htmx + Cloudflare is a new stack
• Getting Started With HTMX In Laravel
• Table Sorting and Pagination with HTMX in Laravel
• Building a Counter App with htmx, Go Fiber, and elem-go
• Dancing with HTMX
• Modal forms with Django+HTMX
• Toasts with Django+HTMX
• Laravel + HTMX - Hard Mode interesting ways to handle complicated user interface elements with Laravel and HTMX by Spiro Floropoulos
• Using htmx with Spring Boot and Thymeleaf
• Htmx error handling in Spring Boot apps

Tools

• Sprig - Craft CMS plugin.
• simpleui - Clojure backend helpers for htmx.
• django-htmx - Django integration.
• django-js-lib-htmx - Django package containing the htmx scripts.
• htmx-go - Go integration compatible with net/http, prioritizing type safety.
• htmx-rails - Rails integration.
• htmx.net - ASP.NET Core integration (Htmx Extension Methods, TagHelpers, Htmx.Config)
• Giraffe.Htmx - Extensions for Giraffe to support development with htmx.
• htmx-spring-boot - Spring Boot support library for htmx
• IntelliJ htmx plugin
• codeigniter-htmx - CodeIgniter 4 framework integration.
• htmx-ext-shoelace - An extension to make Shoelace elements work seamlessly with HTMX.
• laravel-htmx - Laravel integration for htmx.
• Hwy - Remix-inspired TypeScript metaframework using HTMX instead of React.
• DelphiMVCFramework - DelphiMVCFramework integration support for htmx (class helper in MVCFramework.HTMX)
• elem-go - A Go library for building HTML with htmx.
• Mojolicious::Plugin::HTMX - An HTMX plugin for Mojolicious (a Perl web Framework)
• fasthx - HTMX utility with decorator syntax for FastAPI that works with any templating engine (Jinja included).
• ludic - Lightweight framework for building dynamic HTML pages in pure Python with HTMX.
• Bootify.io - Create Spring Boot apps with Thymeleaf and htmx in the browser.
• HTMX for ⚡️ fiber - 🔨Write HTML and HTMX applications in pure Go using ⚡️ fiber. And lot more ...

Videos

• htmx in 100 seconds
• Why learn htmx?
• Rapid server side full stack web development with ViewComponents and htmx by Thomas Schuely
• Modern frontends with Thymeleaf and htmx by Wim Deblauwe
• DjangoCon Europe - David Guillot from Contexte - From React to htmx on a real-world SaaS product: we did it, and it's awesome!
• Carson Gross — Return To Hypermedia: Solving Javascript Fatigue Using Fundamental Web Architecture
• Dynamic Web Pages Without JavaScript? - Intro to HTMX
• htmx: Writing JavaScript to Avoid Writing JavaScript, by Carson Gross
• Spring Boot + HTMX = Easy Full Stack
• Simple, Fast Frontends With htmx
• Dynamic Django forms without writing any JavaScript
• HAT Stack: HTMX, AlpineJS Tailwind (SeaJUG Front End Java 2021)
• HTMX - Clean Dynamic HTML Pages Talk Python Live Stream
• Python Bytes 219: HTMX: Dynamic and live HTML without JavaScript - Live Stream
• Active Search UI Pattern with HTMX and FLASK
• HTMX for ZERO JavaScript Drop Down Depending on other Drop Down
• Django and HTMX 25 Videos
• Try Django 3.2 - Python Web Development Tutorial Series HTMX content starts in video 65
• HTMX/hyperscript demo
• HTMX/hyperscript demo with Transitions
• janet/joy/htmx/tailwind | Making a url shortener
• janet/joy/htmx/tailwind | Making a twitter competitor
• HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript
• Modal forms with Django+HTMX
• Toasts with Django+HTMX
• Découverte de HTMX, pour faire de l'ajax sans JavaScript (French Tutorial)
• From React To HTMX 2023-08 The Primeagen

Examples by Back-end

ASP.net

• htmx-with-aspnet-core - Htmx with asp.net core.
• aspnet-core-htmx-example - Demonstrates the use of htmx with ASP.NET Core Razor Pages to create a simple CRUD web application.

Clojure

• babashka-htmx-todoapp - Quick example of a todo list application using Babashka and htmx.
• panas.example - Implementation of all htmx examples using Babashka.
• contact.app-clj - Clojure implementation of the contact.app from the Hypermedia Systems book

Common Lisp

• ccl-demo-raja - A Common Lisp demo with htmx using Star wars API.
• cl-trello-clone - A small Trello clone built in Common Lisp
• cl-github-timeline Github timeline in Common Lisp, and another example based on this one using FastAPI.

JavaScript

• Example todo app with the html.js framework - html.js is an elegent framework for hyper speed web apps.
• Primate HTMX module - Polymorphic development platform with support for many frontends, including HTMX.

Typescript

• TodoMVC App - TodoMVC App built with Typescript, JSX, express, htmx and _hyperscript deployed on vercel/netlify.

AdonisJS

• TodoMVC App - TodoMVC App built with AdonisJS, htmx and _hyperscript following the standard AdonisJS guidelines for server framework

Express

• Geo Selector in htmx - A Region, Sub-Region and Country selector based on user selections.
• todomvc-htmx - TodoMVC app implemented using htmx and hyperscript.