Skip to content

README.md

Latest commit

 

History

History
50 lines (33 loc) · 1.84 KB

README.md

File metadata and controls

50 lines (33 loc) · 1.84 KB

hello-react

React frontend for the htmxr hello example.

Context

The hello htmxr example is an interactive histogram (Old Faithful) served by an R/plumber2 server. It exposes a single endpoint:

GET /plot?bins=30  →  image/svg+xml

This project demonstrates that an htmxr application is nothing more than an HTTP API — it returns web content (HTML, SVG, fragments) that any client can consume. The htmx client embedded in the page is just one consumer among many.

By replacing htmx with React, we get the exact same result: a slider that calls /plot?bins=N and displays the returned SVG. The R server does not know — and does not care — who is calling it.

This is the key insight: htmxr is not a framework that locks you into a specific frontend. It is a server that speaks HTTP and returns web content. Any frontend that can make HTTP requests and render HTML/SVG can connect to it.

Stack

  • Vite + React + TypeScript
  • Bootstrap 5 via CDN (identical to the htmxr version)
  • /api/* proxy → https://hello.demo.hyperverse.world/* (dev and prod)

Run locally

npm install
npm run dev   # → http://localhost:5173

Deploy to Vercel

vercel deploy

The vercel.json file configures the proxy to the R server — no CORS configuration needed.

Comparison with the htmxr version

htmxr React
Client-side code ~5 HTML attributes ~30 lines of TSX
JS dependencies htmx (~14 KB) React + ReactDOM (~144 KB)
Debounce delay:300ms in hx-trigger setTimeout in useEffect
SVG injection hx-swap="innerHTML" dangerouslySetInnerHTML
State in the DOM useState

The htmxr version delegates all interaction logic to the server and HTML attributes. The React version reimplements that logic on the client side.