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

\n",[147],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[153],"5f0d37da-ca78-43f3-9571-0679060118af","index.html","01a04dc8-8fae-7098-9e26-8e19d3d7c31b",6,["D",1788012056830],"\n\n \n HTMX 4 + hx-live\n \n \n \n \n \n \n \n \n \n \n

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",[159],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[166],"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",[172],"pulls","forks","envVars",{"_184":54,"_186":54},"connections",{"_184":54,"_185":54},"count","unfilledCount","emptyCount",{"_20":171,"_13":172,"_123":173,"_125":-5,"_126":21,"_127":174,"_129":50,"_22":213,"_29":131,"_132":103,"_133":176,"_135":38,"_136":-5,"_195":214,"_91":215},{"_20":165,"_13":166,"_123":167,"_125":-5,"_126":21,"_127":141,"_129":50,"_22":210,"_29":54,"_132":103,"_133":169,"_135":38,"_136":-5,"_195":211,"_91":212},{"_20":158,"_13":159,"_123":160,"_125":-5,"_126":21,"_127":161,"_129":50,"_22":207,"_29":131,"_132":103,"_133":163,"_135":38,"_136":-5,"_195":208,"_91":209},{"_20":152,"_13":153,"_123":48,"_125":-5,"_126":21,"_127":141,"_129":50,"_22":204,"_29":54,"_132":155,"_133":156,"_135":38,"_136":-5,"_195":205,"_91":206},{"_20":146,"_13":147,"_123":148,"_125":-5,"_126":21,"_127":30,"_129":50,"_22":201,"_29":141,"_132":103,"_133":150,"_135":38,"_136":-5,"_195":202,"_91":203},{"_20":138,"_13":139,"_123":140,"_125":-5,"_126":21,"_127":141,"_129":50,"_22":198,"_29":54,"_132":143,"_133":144,"_135":38,"_136":-5,"_195":199,"_91":200},{"_20":121,"_13":122,"_123":124,"_125":-5,"_126":21,"_127":128,"_129":50,"_22":194,"_29":131,"_132":103,"_133":134,"_135":38,"_136":-5,"_195":196,"_91":197},["D",1788012057013],"children",[],[122],["D",1788011384663],[],[139],["D",1788012057425],[],[147],["D",1788011384663],[],[153],["D",1788012056830],[],[159],["D",1788011384663],[],[166],["D",1788012057203],[],[172],["D",1788011384663],{"_11":12,"_89":85},{"_11":12,"_82":83,"_84":85,"_45":46,"_86":87,"_88":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_111":253,"_254":255,"_256":257,"_258":38,"_259":38,"_260":38,"_261":50,"_262":-5,"_263":-7,"_264":-7,"_265":54,"_266":38,"_267":38,"_268":-5,"_269":38,"_270":38,"_271":38,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":26,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"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"]

Branches1

Branches
1