rajasegar / 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

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

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.

Typescript

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

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.
• 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.
• htmx-notes - A Note-taking app using Markdown inspired by React Server Components demo.

Rust

• TodoMVC App - TodoMVC App built with Rust, Astra, maud, HTMX and _hyperscript. Astra runs a small event I/O loop and maud is blazing fast, super type-safe, and easy to deploy.

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.
• Simple Counter App - A simple counter app built with htmx, elem-go, and Go Fiber.
• Todo App - A todo app built with htmx, elem-go, and Go Fiber.
• Realtime Todo App - This is a Go Todo App using WebSockets, HTMX, and DOM-Morphing.
• TodoMVC App - TodoMVC App built with Go, </>templ, htmx and _hyperscript.
• GO HTMX - Seamless HTMX Integration for Go Applications.

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
• Modal forms with Django+HTMX - A sample project to demonstrates how to show a Django Form in a modal dialog box using HTMX.

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 Laravel contacts CRUD app, made reactive with HTMX.

Delphi

• dmvcframework-todo-app - DelphiMVCFramework to-do app with HTMX and mustache templates

Zig

• zig-htmx - Example chat app written in zig + htmx (websockets).

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.
• htmx-ai - Use ChatGPT Code Generation as a Backend for 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
• Syntax.fm #726 - Is HTMX a Joke? "A JS library that lets you swap out parts of the user interface with a response from a server" - Scott Tolinski
• Syntax.fm #734 - HTMX Web Apps with Carson Gross 2024-02-23

awesome-htmx's Issues

Dead Link

https://jacklinke.com/2021/web/ajax-enabled-checkbox-and-select-with-django-and-htmx/

Broken links

Hello, I found some broken links:

• https://www.jerriepelser.com/blog/using-htmx-with-aspnet-core/ (file: README.md, status code: 404)
• https://github.com/jcpsantiago/lagosta (file: README.md, status code: 404)
• https://github.com/TomekKosakowski/express-ejs-htmx-playground (file: README.md, status code: 404)
• https://htmbox.herokuapp.com (file: README.md, status code: 503)
• https://htmx-notes.herokuapp.com (file: README.md, status code: 503)
• https://www.djangochat.com/episodes/htmx-carson-gross (file: README.md, error: ERR_TLS_CERT_ALTNAME_INVALID)

Organize examples by back-end

There are so many examples at this point that it might be beneficial to separate them by back-end.

Maybe group as follows:

• ASP.net
• Clojure
• Common Lisp
• Express
• Flask
• Python-based (Django, FastAPI, Flask)
• Ruby
• Other

This could of course be modified/expanded later as needed.

I'd be happy to submit a PR for this if it is seen as beneficial.

htmx and json2html

Hi everyone.

I created a custom button in json2html with htmx.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> json2html, htmx and boostrap-ui </title>
    <link href="https://meyerweb.com/eric/tools/css/reset/reset200802.css" defer async="true"/>
    <link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" defer async="true"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" defer async="true"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.1.0/json2html.min.js" defer async="true"></script>
    <script src="https://unpkg.com/[email protected]" integrity="sha384-7aHh9lqPYGYZ7sTHvzP1t3BAfLhYSTy9ArHdP3Xsr9/3TlGurYgcPBoFmXX2TX/w" crossorigin="anonymous" defer async="true"></script>
  </head>
  <body>
    <script>
    // have a button POST a click via AJAX
    const button = {'<>':'button', 'class':'button', 'hx-get':'https://pokeapi.co/api/v2/pokemon/ditto',' hx-swap':'outerHTML', text:'Click Me'};
    /*
    @< ! -- have a button POST a click via AJAX -- >
    @< button hx-post="/clicked" hx-swap="outerHTML">
    @  Click Me
    @< / button>
    */   
        
    //render
    document.write(json2html.render({},button));
    
</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/2.1.0/json2html.min.js" defer async="true"></script>
    <script src="https://unpkg.com/[email protected]" defer async="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous" defer async="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous" defer async="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous" defer async="true"></script>  
</body>
</html>

add section "MadeWithHTMX"

one section where people could feature their SaaS or whatever product using htmx in the stack would be great

I am working on awesome-python-htmx

Could we get it linked to from here under the "Python" section perhaps?

https://github.com/PyHAT-stack/awesome-python-htmx

flask-htmx

similar to flask-django

https://pypi.org/project/flask-htmx/
https://github.com/edmondchuc/flask-htmx

Giraffe.Htmx

How about adding Giraffe.Htmx?

https://github.com/bit-badger/Giraffe.Htmx

HTMX Playground

I've made a playground for HTMX, and I'd love for it to be added here as a learning resource, but I'm not sure which category it should fall under :)

Any leads?