zhaoshijian/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.
• 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

Tools

• craft-htmx - 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.

Videos

Stand-alone

2022

• 2022-09-22 DjangoCon Europe - David Guillot from Contexte - From React to htmx on a real-world SaaS product: we did it, and it's awesome!
• 2022-08-01 Carson Gross — Return To Hypermedia: Solving Javascript Fatigue Using Fundamental Web Architecture
• 2022-03-30 Dynamic Web Pages Without JavaScript? - Intro to HTMX

2021

• 2021-10-21 htmx: Writing JavaScript to Avoid Writing JavaScript, by Carson Gross
• 2021-08-25 Spring Boot + HTMX = Easy Full Stack
• 2021-07-22 Simple, Fast Frontends With htmx
• 2021-07-04 Dynamic Django forms without writing any JavaScript
• 2021-06-17 HAT Stack: HTMX, AlpineJS Tailwind (SeaJUG Front End Java 2021)
• 2021-06-10 HTMX - Clean Dynamic HTML Pages Talk Python Live Stream
• 2021-02-03 Python Bytes 219: HTMX: Dynamic and live HTML without JavaScript - Live Stream

2020

• 2020-06-19 Active Search UI Pattern with HTMX and FLASK
• 2020-06-07 HTMX for ZERO JavaScript Drop Down Depending on other Drop Down

Series

2021

• 2021-10-25 Django and HTMX 25 Videos
• 2021-08-14 Try Django 3.2 - Python Web Development Tutorial Series HTMX content starts in video 65
• 2021-02-19 HTMX/hyperscript demo
• 2021-02-19 HTMX/hyperscript demo with Transitions

2020

• 2020-10-29 janet/joy/htmx/tailwind | Making a url shortener
• 2020-10-29 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.

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.

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.

Java

• TodoWebflux Spring Boot HTMX demo
• Spring Boot HTMX integration
• Spring-Boot HTMX
• Frisson: Easy, Powerful Full Stack with Spring Boot and HTMX

Python-based (Django, FastAPI, Flask)

• 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.

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