[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_223":224,"_225":226},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_169":-5,"_20":170,"_22":171,"_172":173,"_174":175,"_26":176,"_24":177,"_178":-5,"_179":-5,"_180":51,"_181":182,"_183":43,"_184":-5,"_185":-5,"_186":187},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","cameronpak","name","htmx4-hx-live","branchName","main","version","path","index.html","project",{"_33":114,"_13":14,"_44":115,"_116":-5,"_117":51,"_118":119,"_120":119,"_121":122,"_123":-5,"_124":125,"_126":90,"_127":43,"_128":-5,"_129":-5,"_130":75,"_131":132,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":138,"_139":138,"_140":141,"_142":141,"_143":141,"_144":138,"_145":138,"_146":147,"_148":149,"_150":151,"_152":51},"tree",[54,55,56,57,58,59,60],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","envVars","id","5f0d37da-ca78-43f3-9571-0679060118af","fileId","01a04dc8-8fae-7098-9e26-8e19d3d7c31b","parentId","branchId","9f511862-944c-463a-b384-3c268a048bf2","branchVersion",6,"latest",true,"createdAt",["D",1788012056830],2,"fileType","content","\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","deleted",false,"label",[19],{"_33":106,"_13":107,"_35":108,"_37":-5,"_38":39,"_40":109,"_42":43,"_44":110,"_17":46,"_47":24,"_48":111,"_50":51,"_52":-5,"_67":112,"_18":113},{"_33":99,"_13":100,"_35":101,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":102,"_17":75,"_47":24,"_48":103,"_50":51,"_52":-5,"_67":104,"_18":105},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":96,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_67":97,"_18":98},{"_33":88,"_13":89,"_35":90,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":91,"_17":75,"_47":92,"_48":93,"_50":51,"_52":-5,"_67":94,"_18":95},{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":73,"_47":24,"_48":85,"_50":51,"_52":-5,"_67":86,"_18":87},{"_33":70,"_13":71,"_35":72,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":74,"_17":75,"_47":76,"_48":77,"_50":51,"_52":-5,"_67":78,"_18":79},{"_33":61,"_13":62,"_35":63,"_37":-5,"_38":39,"_40":64,"_42":43,"_44":65,"_17":46,"_47":24,"_48":66,"_50":51,"_52":-5,"_67":68,"_18":69},"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",[],[62],"94022639-c98d-48fd-9bf6-8000ab542e84","script.js","01a04dc8-8fae-7098-9e26-9543e5d88c56",1,["D",1788011384663],0,"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\");",[],[71],"7d8307a4-275a-422d-89bb-2535d0da209d","note.html","aff9fc62-a3b0-11f1-91df-1607ee4eb77e",9,["D",1788012057425],"

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

\n",[],[81],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx","01a04dc8-8fae-7098-9e26-934a08cfbcca",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[],[89],["D",1788012056830],[],[19],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[],[100],"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",[],[107],"0f019c8b-da7f-4f02-bfe5-7eaaa4bae714",["D",1788011384663],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","HTMX 4 hx-live counter and tabs demo","imageUrl","userId","35ef5666-3780-42d5-ade0-86fe3fdb6bb1","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","47e0b4b2-7d41-46e6-8dce-0ae3d76e1a8f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_168":164},"org",{"_11":12,"_161":162,"_163":164,"_124":125,"_165":166,"_167":51},"branch",{"_17":83,"_13":16,"_33":39,"_153":114,"_154":-5,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":14,"_160":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Cam","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7fcc9ac1-f8fb-41e2-0168-af29ef7c6400/square512?exp=1789549199&sig=9a551d326149fb6e37f736149608677672435b12eacb8d438dd38383d97135a3","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":114,"_13":14,"_44":219,"_116":-5,"_117":51,"_118":119,"_120":119,"_121":122,"_123":-5,"_124":125,"_126":90,"_127":43,"_128":-5,"_129":-5,"_130":75,"_131":132,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":138,"_139":138,"_140":141,"_142":141,"_143":141,"_144":138,"_145":138,"_146":220,"_148":221,"_150":222,"_152":51},[198,199,200,201,202,203,204],"files",[198,199,200,201,202,203,204],"counts",{"_189":75,"_190":73,"_191":75,"_32":192,"_193":194},[],{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_18":188},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks",{"_195":75,"_197":75},"connections",{"_195":75,"_196":75},"count","unfilledCount","emptyCount",{"_33":106,"_13":107,"_35":108,"_37":-5,"_38":39,"_40":109,"_42":43,"_44":110,"_17":46,"_47":24,"_48":111,"_50":51,"_52":-5,"_67":217,"_18":218},{"_33":99,"_13":100,"_35":101,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":102,"_17":75,"_47":24,"_48":103,"_50":51,"_52":-5,"_67":215,"_18":216},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":96,"_17":46,"_47":24,"_48":49,"_50":51,"_52":-5,"_67":213,"_18":214},{"_33":88,"_13":89,"_35":90,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":91,"_17":75,"_47":92,"_48":93,"_50":51,"_52":-5,"_67":211,"_18":212},{"_33":80,"_13":81,"_35":82,"_37":-5,"_38":39,"_40":83,"_42":43,"_44":84,"_17":73,"_47":24,"_48":85,"_50":51,"_52":-5,"_67":209,"_18":210},{"_33":70,"_13":71,"_35":72,"_37":-5,"_38":39,"_40":73,"_42":43,"_44":74,"_17":75,"_47":76,"_48":77,"_50":51,"_52":-5,"_67":207,"_18":208},{"_33":61,"_13":62,"_35":63,"_37":-5,"_38":39,"_40":64,"_42":43,"_44":65,"_17":46,"_47":24,"_48":66,"_50":51,"_52":-5,"_67":205,"_18":206},[],[62],[],[71],[],[81],[],[89],[],[19],[],[100],[],[107],["D",1788011384663],{"_11":12,"_168":164},{"_11":12,"_161":162,"_163":164,"_124":125,"_165":166,"_167":51},{"_17":83,"_13":16,"_33":39,"_153":114,"_154":-5,"_155":-5,"_156":-5,"_157":-5,"_158":-5,"_159":14,"_160":12},"ctx",{"_146":-5,"_185":256,"_257":258,"_259":260,"_261":51,"_262":51,"_263":51,"_264":43,"_265":-5,"_266":-7,"_267":-7,"_268":75,"_269":51,"_270":51,"_271":-5,"_272":51,"_273":51,"_274":51,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":16,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"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"]