Skip to content

Instantly share code, notes, and snippets.

@therealparmesh

therealparmesh/just-render-html.md

Created March 11, 2026 21:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save therealparmesh/96025e76ddba0a7b4d708eff69e43af7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save therealparmesh/96025e76ddba0a7b4d708eff69e43af7 to your computer and use it in GitHub Desktop.
Download ZIP
The Reality of "Just Render HTML"
Raw
just-render-html.md

The Reality of "Just Render HTML"

A complete breakdown of the architecture, tooling, and paradigms involved when returning to a server-driven architecture using HTMX, Tailwind, and Vanilla JS. This highlights how drastically the frontend footprint shrinks when the server reclaims state and routing.

Core Architecture & Language

  • Hypermedia: HTMX (HTML attributes, out-of-band swaps, lazy-loading partials)
  • Language: Vanilla JS
  • Component Paradigms: Server-side templating (partials, fragments, includes), standard HTML elements
  • Application Type: MPA (Multi-Page Application) / Hypermedia-Driven Application (HDA)

Build Toolchain & Dependencies

  • Bundling: Minimal to none (Tailwind CLI for CSS generation)
  • Environment Management: mise (handles server and client tools, removing the need for dedicated frontend package management)

Code Quality & Testing

  • Linting: Optional. ESLint can be present, but the frontend is intentionally kept dumb—focused on behaviors by design rather than complex logic.
  • Formatting: Prettier
  • Testing: E2E Testing (Playwright/Cypress) heavily prioritized over client component unit tests

Data & State Management

  • Request Client: Native HTML forms, HTMX attributes (hx-get, hx-post)
  • Data Fetching & Caching: Server handles data fetching; relies on standard browser cache and HTMX history cache
  • State Management: Server-managed state (Sessions, Database); the DOM/URL is the single source of truth on the client (HATEOAS)
  • Side Effect Management: HTMX Out-of-Band (OOB) swaps, HX-Trigger response headers, and Vanilla JS event listeners

Rendering & Routing

  • SSR (Server-Side Rendering): Pure server-rendered HTML returning full pages or targeted HTML fragments
  • Routing: Standard backend framework routing, HTMX history API integration (hx-push-url, hx-boost for SPA-like navigation)

UI, Assets, & Styling

  • Utility CSS: Tailwind CSS (built directly via Tailwind CLI)
  • SVG: Inline HTML SVGs vs. actual assets
  • Component Library: HTML/Tailwind snippet libraries (e.g., DaisyUI, Preline) vs. rolling your own markup

Infrastructure & Scaling

  • Authorization: Standard server-side session/cookie authentication, or token-based auth (requires token syncing logic)
  • Repository Management: Standard repositories (frontend is integrated directly alongside the backend server code)
  • Deployment: Deploy backend server, serve minimal static assets (CSS/JS files)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment