htmx 2.0 & Web Components: A Perfect Match for Frontend Development
summary
Demos show htmx 2.0 sending GET/POST/PUT/delayed requests from any element, declarative triggers (click, mouseover, load, polling), swap modes like beforeend, built-in spinner handling and a WebSocket extension; a full to‑do list works without custom JavaScript by returning HTML fragments. A Lit component demo uses Lit to encapsulate UI and a weather dashboard composes htmx-driven server fragments that instantiate a custom element fetching data from Open-Meteo — mostly functional live, with one async API glitch fixed on stage.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:04What is HTMX
- 3:38MVC to single-page apps
- 7:16HTMX demo basics
- 9:51Advanced HTMX features
- 16:03Extending HTMX
- 17:13HTMX to-do list
- 24:10Why HTMX simplifies
- 26:17Web components intro
- 31:02Web components with Lit
- 35:00Lit's HTML templates
- 38:15Custom counter demo
- 40:48HTMX + web components
- 41:52Weather dashboard demo
- 49:12Q&A
related talks
54mHTMX: Web 1.0 with web 2.0 benefits without the grift of 3.0
19mhtmx: Writing JavaScript to Avoid Writing JavaScript
57mHTMX: Why You Don't Always Need a SPA Framework
26mReimagining dynamic web apps with HTMX
37mHTMX: Frontend Revolution
23mIntroduction to server-driven web applications using htmx
49mBring back the joy in web development with HTMX and Hypermedia-Driven Applications
47mHTMX, or the return of AJAX in Web development