MESH: I Tried HTMX, Then Ditched It Author: Alex Moon Date: 18 September 2025 --- Introduction: The Web Development Movement Growing dissatisfaction with "JavaScript Fatigue," "Framework Fatigue," and the dominance of JS in HTML generation. Interest in declarative, HTML-first approaches such as HTMX, which allows much interactivity without JavaScript using HTML attributes. HTMX embodies the movement but lacks structured discipline, risking messy "spaghetti" code. Alex Moon’s goal: combine HTML-first server-side rendering (SSR) with structured SPA-like architecture. --- MESH (Modular Element SSR with Hydration) Core principle: One component = one endpoint. Enables writing back-end HTML-first apps that feel like SPA development. Encourages modular, nestable components self-contained with HTML, CSS, JS, and server code. Available on GitHub. --- Getting Started: Basic Interactivity with Go and Templ Chose Go backend with Templ templates. Experimented with "vibe coding" using Junie. Built a Trello-like editable card component rendered server-side and hydrated client-side with Web Components. Used Declarative Shadow DOM (DSD) for SSR custom elements. Key Challenges with HTMX and Shadow DOM HTMX does not cross shadow DOM boundaries by design. Workaround: intercept HTMX's htmx:beforeSwap events to swap entire host elements. --- Hydrating Components Created a base MeshElement Web Component class. On connection, attaches shadow root, clones template content, and processes HTMX enhancements. Auto-binds event listeners from custom mesh-click attributes. Developed Card component extending MeshElement with methods to toggle between display and edit forms. --- Component Communication and Out-of-Band Swaps (OOB) HTMX developers face difficulty updating parent components from child changes. Current HTMX practices: "Expand the target": Child components are aware of parents (undesirable). Trigger events via response headers. Out-of-band (OOB) swaps: Server-sends updates for multiple components flagged as OOB. MESH uses a pub-sub mechanism on the server, publishing updates asynchronously to subscribers without components knowing each other. Subscribers render components and write updates as OOB swaps. --- Revisiting Shadow DOM and HTMX Limitations HTMX never crosses shadow roots, forcing compromises. MESH applies a hack to manually find elements inside shadow roots and replace outerHTML, overriding HTMX swap behavior. Not ideal, losing built-in HTMX features like scroll and focus preservation. Despite limitations, drag-and-drop functionality is implemented with native JS and HTMX's AJAX API. --- Realtime Collaboration Via Server-Sent Events (SSE) Used r3labs/sse for the backend SSE implementation. HTMX's SSE plugin easily integrates with SSE endpoints. Server broadcasts OOB updates to all clients instantly for collaborative UI updates. SSE simplifies backend logic by decoupling responses from request context. Expected to make asynchronous modular updates feel more natural even for