HTMX 4

hx-live on Val Town

DOM state. Reactive bindings. One server swap. Styled with Sensible UI.

view source

\n\n

1. Reactive counter

data-count lives on this card. :text and hx-live re-run when it changes.

\n \n \n \n

\n 0\n \n

0 / 20 (bar caps at 20)

\n\n

2. take() tabs

Sensible UI treats aria-pressed as the pressed button state.

\n \n \n \n

This is the details pane.

\n \n \n

\n\n

3. q() + toggle()

Toggle a highlight on the next line.

\n \n

Pick me

\n\n

4. Server swap

HTMX 4 still fetches HTML. This button loads a fragment.

\n \n

Nothing loaded yet.

\n \n\n","label",[18],"pulls","branches","forks","envVars",{"_178":26,"_180":26},"connections",{"_178":26,"_179":26},"count","unfilledCount","emptyCount",{"_34":229,"_13":230,"_69":231,"_44":-5,"_36":37,"_164":232,"_165":104,"_38":233,"_40":78,"_71":21,"_167":234,"_72":24,"_169":-5,"_194":235,"_17":236},{"_34":222,"_13":223,"_69":224,"_44":-5,"_36":37,"_164":41,"_165":104,"_38":225,"_40":26,"_71":21,"_167":226,"_72":24,"_169":-5,"_194":227,"_17":228},{"_34":163,"_13":18,"_69":70,"_44":-5,"_36":37,"_164":85,"_165":104,"_38":219,"_40":78,"_71":21,"_167":168,"_72":24,"_169":-5,"_194":220,"_17":221},{"_34":212,"_13":213,"_69":102,"_44":-5,"_36":37,"_164":41,"_165":104,"_38":214,"_40":26,"_71":215,"_167":216,"_72":24,"_169":-5,"_194":217,"_17":218},{"_34":205,"_13":206,"_69":207,"_44":-5,"_36":37,"_164":127,"_165":104,"_38":208,"_40":41,"_71":21,"_167":209,"_72":24,"_169":-5,"_194":210,"_17":211},{"_34":197,"_13":198,"_69":199,"_44":-5,"_36":37,"_164":41,"_165":104,"_38":200,"_40":26,"_71":201,"_167":202,"_72":24,"_169":-5,"_194":203,"_17":204},{"_34":188,"_13":189,"_69":190,"_44":-5,"_36":37,"_164":191,"_165":104,"_38":192,"_40":78,"_71":21,"_167":193,"_72":24,"_169":-5,"_194":195,"_17":196},"0ad3f64d-b7be-4cff-9cd7-f8d249dd419b","style.css","01a04dc8-8fae-7098-9e26-992d1d8502d8",7,["D",1788012057013],"output {\n display: block;\n font-size: 2.5rem;\n font-weight: 600;\n line-height: 1;\n}\n\nprogress {\n width: 100%;\n}\n\n.hilite {\n background: var(--primary);\n color: var(--primary-foreground);\n}\n","children",[],[189],"94022639-c98d-48fd-9bf6-8000ab542e84","script.js","01a04dc8-8fae-7098-9e26-9543e5d88c56",["D",1788011384663],"script","/* If you're feeling fancy you can add interactivity\n to your site with Javascript.\n Note: TypeScript won't work in this file. */\n\n// prints \"hi\" in the browser's dev tools console\nconsole.log(\"hi\");",[],[198],"7d8307a4-275a-422d-89bb-2535d0da209d","note.html","aff9fc62-a3b0-11f1-91df-1607ee4eb77e",["D",1788012057425],"

Hello from a static fragment. HTMX 4 swapped this in with fetch().

\n",[],[206],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[213],["D",1788012056830],[],[18],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[],[223],"c82d696b-dcc5-4e44-8f36-b0db0ff08ba9","README.md","01a04dc8-8fae-7098-9e26-87176c73e376",8,["D",1788012057203],"# HTMX 4 + hx-live\n\nA small Val Town demo of [htmx 4.0](https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released) and [hx-live](https://four.htmx.org/docs/hx-live-guide), styled with [Sensible UI](https://sensibleui.com/).\n\n## What it shows\n\n- Reactive counter: `data-count`, `:text`, and `hx-live` on a progress bar\n- `take('aria-pressed')` for tabs\n- `q()` plus `toggle()` for a class\n- One HTMX 4 `hx-get` swap from `/note.html`\n- Sensible UI cards, stacks, badges, and native buttons\n\n## CSS\n\n```html\n\n```\n\nOpen [main.tsx](url:main.tsx) for the live page.\n",[],[230],["D",1788011384663],{"_11":12,"_141":75},{"_11":12,"_136":137,"_74":75,"_30":73,"_138":139,"_140":24},{"_40":127,"_13":16,"_34":37,"_128":92,"_129":-5,"_130":-5,"_131":-5,"_132":-5,"_133":-5,"_134":14,"_135":12},"ctx",{"_55":-5,"_160":274,"_275":276,"_277":278,"_279":24,"_280":24,"_281":24,"_282":104,"_283":-5,"_284":-7,"_285":-7,"_286":26,"_287":24,"_288":24,"_289":-5,"_290":24,"_291":24,"_292":24,"_293":-5},"ENV",{"_245":246,"_247":248,"_249":16,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html