pvillamil / awesome-htmx

Awesome things about htmx

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

• HackerNews Post - Htmx – high power tools for HTML.
• How to create a Django form (using HTMX) in 90 seconds 🐎
• 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
• Using HTMX with ASP.NET Core: Introduction - Part of a series of blog posts on using HTMX with ASP.NET
• 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

Tools

• Sprig - Craft CMS plugin.
• ctmx - Clojure integration.
• django-htmx - Django integration.
• django-js-lib-htmx - Django package containing the htmx scripts.
• 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-thymeleaf
• 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.

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

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

• lagosta - Anti-fraud workflow automation using Clojure and HTMX.
• babashka-htmx-todoapp - Quick example of a todo list application using Babashka and htmx.
• panas.example - Implementation of all htmx examples using Babashka.

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.

Express

• express-ejs-htmx-playground - Check and test how express works with EJS templates and htmx.
• Geo Selector in htmx - A Region, Sub-Region and Country selector based on user selections.
• todomvc-htmx - TodoMVC app implemented using htmx and hyperscript.
• hx-swap-demo - A demo app to showcase different attribute values of hx-swap in htmx.
• htmx-twitter-clone - A Twitter clone built using htmx.
• super-rentals-htmx - A Rentals Listing demo app built with htmx.
• htmx-github-search - A GitHub Profile search component built using htmx.
• todo-htmx - A simple Todo list with Express and htmx.
• htmx-calendar - Calendar component in htmx.
• htmx-tabular - Tabular data with htmx.
• htmbox - A Dropbox clone in htmx. Live Demo
• htmx-notes - A Note-taking app using Markdown inspired by React Server Components demo. Live Demo

Go

• pagoda - Rapid, easy full-stack web development starter kit in Go with HTMX support and examples.
• Pushup - A server-side, page-oriented web framework for the Go programming language.

Java

• TodoWebflux Spring Boot HTMX demo
• Spring Boot HTMX integration
• Spring-Boot HTMX
• Frisson: Easy, Powerful Full Stack with Spring Boot and HTMX
• java-htmx-todo - Todo app using Javalin, htmx and j2html.

Kotlin

• todo-hda-kt - TodoApp as a Hypermedia Driven App with parallel browser tests
• htmx-ktor - Fullstack CRUD app example made with Ktor (Backend), kotlin.html (Templates), SimpleCSS (Styling), PostgreSQL (DB), Docker (Deployment)

Python-based (Django, FastAPI, Flask)

• awesome-python-htmx - Awesome list for htmx specific to the Python ecosystem.
• Flask HTMLX Material Kit - Simple starter powered by Flask, HTMLX and Bootstrap 5
• Django HTMLX Material Kit - Simple starter powered by Django, HTMLX and Bootstrap 5
• flask-htmx-boilerplate - Boilerplate template for a Python Flask application with HTMX and Tailwind CSS
• django-htmx example app - Example Django app showing a few patterns.
• django-htmx-fun - A small Django application to advertise the fun htmx can bring you.
• django-htmx-todo
• django-htmx-todo-list - Expands on django-htmx-todo to add task creation, editing, and deletion using FBVs.
• owela-club - Play the Namibian game of Owela against a terrible AI. Built using Django and htmx.
• django-htmx-alpine - Basic todo list with Django, HTMX, and Alpine. Features a live demonstration.
• dj_pug_htmx_example - HTMX, Pug, and Django experiments
• Lexicon App - Lexicon app using django3.2, htmx, hyperscript.
• htmxflask - All the HTMX samples redone using a flask server.
• htmx and SSE with FastAPI - FastAPI based web app sending Server Sent Events to frontend app created with htmx.
• fast-htmx - Fast-HTMX is a demo project of FastAPI an HTMX. The purpose of this project is to illustrate how to create a website with no JavaScript, using only HTML, CSS, and Python.
• Flask-Sock HTMX - Very short example combining HTMX with Flask-Sock for self-updating webpages with minimal dependencies.
• django-tailwind-alpine-htmx A simple Task app built with Django, Tailwind CSS, Alpine.js and HTMX
• flask-htmx-tailwind - Rapid Prototyping with Flask, htmx, and Tailwind CSS

Ruby

• sinatara-htmx - Example of a Sinatra app using HTMX for implementing an interactive search
• pokebutt-htmx - Pokebutt clone using htmx.
• htmx-todo-app - A little to-do app and a short demo of htmx built with Sinatra.

PHP

• codeigniter-htmx-demo - A CodeIgniter 4 examples include inline and modal edits, events, searching, pagination, and sorting.
• laravel-htmx-todolist - Laravel Todo List app demo for laravel-htmx
• laravel-htmx-crud Classic contacs crud made reactive with HTMX

Other

• declswiplweb - End to end declarative web programming with no JS using htmx and SWI-Prolog.
• htmx-modal-example - An experiment to work design modal dialogs in HTMX.
• quarkus-htmx-todos - Todo App in Quarkus with htmx.

Podcasts

• Python Bytes: HTMX - Dynamic and live HTML without JavaScript - Podcast about HTMX in the Python news.
• Talk Python: HTMX - Clean, Dynamic HTML Pages
• Dynamic HTML with htmx - Devmode.fm episode about htmx.
• htmX - Podcast about htmx in Programmers quickie.
• Less JavaScript more HTMX - JSParty Episode about htmx with Carson.
• JavaScript right in HTML? - HTMLallthethings episode with Carson.
• Django Chat: htmx - Carson Gross
• HTML All The Things - HTMX, Hyperscript, and More!
• .NET Rocks! - htmx with Carson Gross - An overview of htmx, and a discussion from a .NET perspective