A fullstack architecture combining Eta templating for server-side rendering, HTMX for dynamic interactions, and Lit Web Components for complex client-side logic. This approach delivers fast initial page loads with minimal JavaScript bundles (151KB vs 635KB-2.6MB for React apps) while maintaining rich interactivity. The stack uses server-rendered HTML as the foundation, HTMX for 90% of user interactions, and Lit components as 'islands of interactivity' for stateful client-side features like pagination. View Transitions API provides smooth animations between content updates.
Table of contents
A Note on Performance and Bundle SizeThe Foundation: Eta for Fast Server-Side TemplatingThe Workhorse: HTMX for 90% of InteractionsThe Soloist: Lit for Islands of InteractivityThe Polish: Seamless Transitions with the View Transitions APIHow It All Works TogetherSort: