--- title: Best HTMX posts of 2024 | daily.dev description: The most upvoted HTMX posts of 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/htmx/best-of/2024 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/htmx/best-of/2024 og:type: website og:site_name: daily.dev og:title: Best HTMX posts of 2024 | daily.dev og:description: The most upvoted HTMX posts of 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of HTMX — 2024 1. 1 [](/posts/htmx-2-0-is-here-everything-you-must-know-about-it-h5x0z3kua "HTMX 2.0 is here: Everything you must know about it") Article asayer · 2y HTMX 2.0 is here: Everything you must know about it HTMX 2.0, released in June 2024, brings several significant improvements to the JavaScript library used for creating dynamic web applications directly in HTML. New features include better support for Web Components, adherence to HTTP standards, and improved extension management. The new version addresses limitations and non-standard behaviors of HTMX 1.0, and migration to HTMX 2.0 requires minimal effort due to the focus on backward compatibility. A public roadmap is being developed, and more details can be found through the HTMX community and GitHub page. 423 21 2. 2 [](/posts/fasthtml-fasthtml-p8jeqrnsa "FastHTML – fasthtml") Article Community Picks · 2y FastHTML – fasthtml FastHTML is a next-generation web framework designed for fast, scalable, and compact web applications using Python. It emphasizes powerful, interactive web app development with minimal code. Installation is straightforward via pip, and even a minimal app can be swiftly set up to demonstrate functionality. The framework leverages HTML and HTTP principles, promoting good software engineering practices. FastHTML integrates well with HTMX for adding interactivity. Extensive documentation and community resources are available for deeper learning and project assistance. 165 16 3. 3 [](/posts/modern-web-applications-in-pure-python-elmzaimko "Modern web applications in pure Python") Article Hacker News · 2y Modern web applications in pure Python FastHTML enables the creation of modern web applications using pure Python, leveraging solid web foundations and offering seamless scalability. With the ability to utilize any Python or JS library, FastHTML provides flexibility and speed, making it ideal for various applications from dashboards to scalable SPAs. Deployment options are versatile, supporting any service or server compatible with Python, and users familiar with FastAPI will find transitioning to FastHTML intuitive. Additionally, incorporating HTMX can enhance functionality by filling in web browser gaps with a lightweight JavaScript library. 84 4. 4 [](/posts/build-a-url-shortener-with-go-redis-and-htmx-net7a529u "Build a URL Shortener with Go, Redis, and HTMX") Article Community Picks · 2y Build a URL Shortener with Go, Redis, and HTMX Learn to build a URL Shortener using Go, Redis, and HTMX. The tutorial covers setting up the Go environment, installing Redis, building a basic HTTP server with Go’s standard library, and implementing a simple URL shortening algorithm. It also includes instructions for integrating Redis as a fast in-memory data store, and creating a reactive UI with HTMX and TailwindCSS. The final steps involve setting up URL redirection and deploying the application. 70 5. 5 [](/posts/introduction-to-htmx-for-spring-boot-developers-2mnjcywli "Introduction to Htmx for Spring Boot Developers") Article JetBrains · 2y Introduction to Htmx for Spring Boot Developers Starting a new project can be challenging, especially when deciding on front-end technologies like React, Angular, or Vue. Htmx offers an alternative by allowing developers to use their existing Spring Boot skills to create interactive user experiences with less complexity. By utilizing Htmx-specific attributes in HTML, developers can trigger events and dynamically update the DOM. The post walks through integrating Htmx into a Spring Boot project, showcasing simple to more complex examples. It emphasizes Htmx's ease of adoption and its ability to work incrementally alongside existing technologies. 64 6. 6 [](/posts/htmx-simplicity-in-an-age-of-complicated-solutions-oaeru40kh "htmx: Simplicity in an Age of Complicated Solutions") Article Community Picks · 2y htmx: Simplicity in an Age of Complicated Solutions htmx is a JavaScript library that simplifies front-end development by allowing developers to enhance HTML elements with additional functionality using HTML attributes. It promotes the use of hypermedia and RESTful principles to create dynamic web applications without the need for complex JavaScript frameworks. 64 2 7. 7 [](/posts/htmx-raku-and-pico-css-ggmdfqnqa "HTMX, Raku and Pico CSS") Article Hacker News · 2y HTMX, Raku and Pico CSS The post explores simplifying web development by using HTMX to eliminate the need for JavaScript in dynamic content, favoring a return to using HTML for layout and CSS for styling. It highlights Pico CSS as an efficient styling tool that minimizes HTML attribute bloat, in contrast to frameworks like Bootstrap and Tailwind. The author shows practical code examples integrating HTMX with Raku/Cro backends and emphasizes the benefits of semantic HTML. 62 4 8. 8 [](/posts/using-htmx-with-fastapi-pjd81gfng "Using HTMX with FastAPI") Article TestDriven.io · 2y Using HTMX with FastAPI Learn how to integrate HTMX with FastAPI by creating a simple todo app. This guide covers setting up the environment, creating endpoints to handle CRUD operations, and deploying the app on Render. The combination of FastAPI and HTMX facilitates efficient server-side rendering, minimizing client-side logic and providing a seamless user experience. Included are techniques for rendering HTML conditionally based on request headers and leveraging Jinja2 templates for dynamic content. 61 1 9. 9 [](/posts/htmx-vs-vue-and-react----pros-and-cons-qgpwibpld "HTMX vs. Vue and React -- Pros and Cons") Article asayer · 3y HTMX vs. Vue and React -- Pros and Cons This post compares HTMX, Vue, and React JavaScript frameworks, highlighting their differences, pros, and cons. It discusses the core differences between HTMX, Vue, and React, examines the strengths and weaknesses of HTMX, React, and Vue, and provides use cases for each framework. The post also showcases how to work with HTMX, React, and Vue to create a CRUD task list application, and compares the code required in each framework. 57 1 10. 10 [](/posts/live-website-updates-with-go-sse-and-htmx-yvraugobx "Live website updates with Go, SSE, and htmx") Article Three Dots Labs · 2y Live website updates with Go, SSE, and htmx Learn how to push live updates to your website using Go, SSE, and htmx. SSE endpoints in Go are slightly different from HTTP endpoints because you don't just write data to the ResponseWriter and return from the function. The connection stays alive until the client (the browser) closes it. 52 11. 11 [](/posts/escape-javascript-hell-and-write-everything-in-go-scp125uv7 "Escape JavaScript hell and write everything in Go") Article Awesome Go · 2y Escape JavaScript hell and write everything in Go The post describes an annual remake of a personal website using a new web stack focusing on HTMX and Go to avoid JavaScript/TypeScript complications. The author discusses the advantages of this approach for smaller, non-interactive HTML displays and explains the benefits of using tools like PocketBase, templ, TailwindCSS, and AlpineJS. The post emphasizes server-side rendering and the ease of making UIs without client-side state management. 48 4 12. 12 [](/posts/htmx-view-transitions-ko0bbcysi "htmx View Transitions") Article RUBYLAND · 2y htmx View Transitions View Transitions enable CSS and HTML support for animating state transitions between elements within the same document or across different documents, bringing smooth animations common in native mobile apps to the web. Utilizing htmx for managing dynamic slide transitions and minimal JavaScript for direction-sensitive animations, this guide explains the implementation from CSS keyframes to HTML structure and media queries. The post also provides debugging tips and resources for further learning. 44 3 13. 13 [](/posts/htmx-for-react-developers-in-10-minutes-d87wkgw67 "HTMX For React Developers in 10 Minutes") Video Community Picks · 3y HTMX For React Developers in 10 Minutes Learn how to use HTMX, a simple way to add interactivity to web pages, and how it compares to React. 42 1 14. 14 [](/posts/from-react-to-a-django-htmx-based-stack-zot5byukm "From React to a Django+HTMX based stack") Article Planet Python · 2y From React to a Django+HTMX based stack Learn about Sheena O'Connell's journey of moving from a React-Django application to a pure Django with HTMX stack. Discover a real-world success story, lessons learned, and relevant resources including workshops, courses, and tools related to HTMX and Django development. 41 15. 15 [](/posts/htmx-tutorial-for-beginners-1---what-is-htmx--qweskomua "HTMX Tutorial for Beginners #1 - What is HTMX?") Video Net Ninja · 2y HTMX Tutorial for Beginners #1 - What is HTMX? HTMX is a JavaScript library for creating dynamic web applications using a hypermedia-driven approach. It extends HTML's hypermedia controls, enabling interactions with the server through simple attributes without extensive client-side JavaScript. The tutorial introduces HTMX, compares it to other frameworks like React, and sets the stage for building a reading list application using Node.js and Express for the backend. 37 1 16. 16 [](/posts/build-scalable-web-applications-in-golang-without-javascript-tyhjxuhnj "Build scalable web applications in Golang without JavaScript") Article evolvedev · 2y Build scalable web applications in Golang without JavaScript This post outlines a setup for building scalable web applications in Golang, minus JavaScript. It covers configuring a simple API with Go Templates, JavaScript bundling without third-party CDNs, and using TailwindCSS & Preline UI. The setup also supports live server and browser reload, with only two dependencies needed. A demo video and GitHub link are provided. 35 5 17. 17 [](/posts/use-htmx-to-create-laravel-single-page-apps-without-writing-javascript-6eb01tuxu "Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript") Article FREEK.DEV · 2y Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript Discover how to build single-page applications using Laravel and HTMX without writing any JavaScript. The guide explores integrating HTMX to simplify creating dynamic web applications. 34 18. 18 [](/posts/htmx-htmx-2-0-0-beta1-has-been-released--zqqw4jrsg " htmx ~ htmx 2.0.0-beta1 has been released!") Article Community Picks · 3y htmx \~ htmx 2.0.0-beta1 has been released! The first beta release of htmx 2.0 has been announced. It includes changes such as the removal of hx-sse and hx-ws attributes in favor of extensions, as well as a change in payload for DELETE requests. IE compatibility will no longer be supported in htmx 2.x. The upgrade guide and extensions can be found on the htmx website. 33 19. 19 [](/posts/htmx-you-can-t-build-interactive-web-apps-except-as-single-page-applications-and-other-myths-dzqibnsw8 "> htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths") Article htmx · 2y \> htmx \~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths Building interactive web apps doesn’t require single-page application frameworks like React or AngularJS. Using HTMX for a multi-page application (MPA), the author debunks common myths and showcases how browsers have advanced to support fast page transitions. By implementing service workers and utilizing caching strategies, MPAs can achieve seamless user experiences. Tools like Google’s Workbox automate the service worker setup, and modern browser capabilities like cross-document view transitions with CSS provide robust solutions for handling interactive web applications without heavily relying on JavaScript frameworks. 32 1 20. 20 [](/posts/why-golang-htmx-is-the-most-productive-stack-gezr3trfw "Why Golang + HTMX Is The Most Productive Stack") Video Community Picks · 2y Why Golang + HTMX Is The Most Productive Stack The post showcases Anthony GG's innovative use of Golang and HTMX to create a highly productive tech stack. He emphasizes the importance of mastering the tools before teaching them, contrasting himself with other influencers. Over three weeks, he built two production-ready applications and a detailed course to demonstrate his work. The stack primarily involves Golang, HTMX, jQuery, and Tailwind CSS, boasting efficient features like user authentication, interaction APIs, and chat integration. Despite some controversial elements, the technical achievement is impressive. 32 1 21. 21 [](/posts/how-to-set-up-authorization-in-a-bookstore-management-system-with-go-htmx-and-permit-io-j8xobetac "How to Set Up Authorization in a Bookstore Management System with Go, HTMX, and Permit.io") Article Awesome Go · 2y How to Set Up Authorization in a Bookstore Management System with Go, HTMX, and Permit.io Authorization is vital for application security, determining accessible resources and actions based on user roles. This tutorial guides you through building a bookstore app with authorization using Golang, HTMX, and Permit.io. The app includes role-based access control for admin and standard users, dynamic data loading, and secure user role management through Permit.io. It covers project setup, database configuration with PostgreSQL, HTTP handlers, and middleware for authorization checks. 30 22. 22 [](/posts/1-simple-reason-to-build-your-next-web-app-with-htmx-n7nv5xcxs "1 Simple Reason to Build your Next Web App with HTMX") Article Community Picks · 2y 1 Simple Reason to Build your Next Web App with HTMX HTMX simplifies building modern web apps by enabling developers to create Multi-Page Applications (MPAs) and enhancing them with the user experience features of Single-Page Applications (SPAs) without the need for new paradigms or frameworks. It integrates seamlessly with HTML and supports various programming languages, making it flexible and easy to use with existing projects. 29 3 [See all HTMX archives](/tags/htmx/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/htmx/best-of/2024#page","url":"https://daily.dev/tags/htmx/best-of/2024","name":"Best HTMX Posts of 2024","description":"The most upvoted HTMX posts of 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/htmx/best-of/2024#items","numberOfItems":22,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/htmx-2-0-is-here-everything-you-must-know-about-it-h5x0z3kua","name":"HTMX 2.0 is here: Everything you must know about it"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/fasthtml-fasthtml-p8jeqrnsa","name":"FastHTML – fasthtml"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/modern-web-applications-in-pure-python-elmzaimko","name":"Modern web applications in pure Python"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/build-a-url-shortener-with-go-redis-and-htmx-net7a529u","name":"Build a URL Shortener with Go, Redis, and HTMX"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/introduction-to-htmx-for-spring-boot-developers-2mnjcywli","name":"Introduction to Htmx for Spring Boot Developers"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/htmx-simplicity-in-an-age-of-complicated-solutions-oaeru40kh","name":"htmx: Simplicity in an Age of Complicated Solutions"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/htmx-raku-and-pico-css-ggmdfqnqa","name":"HTMX, Raku and Pico CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/using-htmx-with-fastapi-pjd81gfng","name":"Using HTMX with FastAPI"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/htmx-vs-vue-and-react----pros-and-cons-qgpwibpld","name":"HTMX vs. Vue and React -- Pros and Cons"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/live-website-updates-with-go-sse-and-htmx-yvraugobx","name":"Live website updates with Go, SSE, and htmx"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/escape-javascript-hell-and-write-everything-in-go-scp125uv7","name":"Escape JavaScript hell and write everything in Go"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/htmx-view-transitions-ko0bbcysi","name":"htmx View Transitions"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/htmx-for-react-developers-in-10-minutes-d87wkgw67","name":"HTMX For React Developers in 10 Minutes"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/from-react-to-a-django-htmx-based-stack-zot5byukm","name":"From React to a Django+HTMX based stack"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/htmx-tutorial-for-beginners-1---what-is-htmx--qweskomua","name":"HTMX Tutorial for Beginners #1 - What is HTMX?"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/build-scalable-web-applications-in-golang-without-javascript-tyhjxuhnj","name":"Build scalable web applications in Golang without JavaScript"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/use-htmx-to-create-laravel-single-page-apps-without-writing-javascript-6eb01tuxu","name":"Use HTMX to Create Laravel Single-Page Apps Without Writing JavaScript"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/htmx-htmx-2-0-0-beta1-has-been-released--zqqw4jrsg","name":" htmx ~ htmx 2.0.0-beta1 has been released!"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/htmx-you-can-t-build-interactive-web-apps-except-as-single-page-applications-and-other-myths-dzqibnsw8","name":"> htmx ~ You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/why-golang-htmx-is-the-most-productive-stack-gezr3trfw","name":"Why Golang + HTMX Is The Most Productive Stack"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/how-to-set-up-authorization-in-a-bookstore-management-system-with-go-htmx-and-permit-io-j8xobetac","name":"How to Set Up Authorization in a Bookstore Management System with Go, HTMX, and Permit.io"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/1-simple-reason-to-build-your-next-web-app-with-htmx-n7nv5xcxs","name":"1 Simple Reason to Build your Next Web App with HTMX"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"HTMX","item":"https://daily.dev/tags/htmx"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/htmx/best-of"},{"@type":"ListItem","position":5,"name":"2024"}]}]} ```