[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_225":226,"_227":228},"routes/_app.x.$handle.$name",{"_96":95,"_32":44,"_105":86,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":58,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a04dc8-8fae-7098-9e26-87176c73e376","name","fileType","content","# 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).\n\n## What it shows\n\n- Reactive counter: `data-count`, `:text`, and `hx-live` on a progress bar\n- `take()` for tabs\n- `q()` plus `toggle()` for a class\n- One HTMX 4 `hx-get` swap from `/note.html`\n\nScripts load from jsDelivr:\n\n- `htmx.org@4.0.0/dist/htmx.min.js`\n- `htmx.org@4.0.0/dist/ext/hx-live.min.js`\n\nOpen [main.tsx](url:main.tsx) for the live page.\n","# 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","createdAt",["D",1788012057203],"branchVersion","branchId","9f511862-944c-463a-b384-3c268a048bf2","id","0f019c8b-da7f-4f02-bfe5-7eaaa4bae714","htmx4-hx-live",["D",1788011384663],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","HTMX 4 hx-live counter and tabs demo","imageUrl","35ef5666-3780-42d5-ade0-86fe3fdb6bb1","pinnedFileId","01a04dc8-8fae-7098-9e26-934a08cfbcca","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","47e0b4b2-7d41-46e6-8dce-0ae3d76e1a8f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cameronpak","handle","displayName","Cam","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7fcc9ac1-f8fb-41e2-0168-af29ef7c6400/square512?exp=1789581599&sig=998e84912a00ae9387152a02418700e2eaa05f8399bc25054982e439ac57952e","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":221,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":222,"_80":223,"_82":224,"_84":25},"tree",[192,193,194,195,196,197,198],"files",[192,193,194,195,196,197,198],"counts",{"_182":62,"_183":148,"_184":62,"_185":186,"_187":188},"contents",[127,128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":179,"_32":28,"_30":31,"_137":-5,"_40":41,"_39":14,"_139":58,"_37":180,"_13":141,"_33":20,"_34":36,"_24":25,"_143":-5,"_27":181},{"_42":173,"_32":174,"_30":175,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":176,"_13":62,"_33":20,"_34":177,"_24":25,"_143":-5,"_27":178},{"_42":166,"_32":167,"_30":168,"_137":-5,"_40":41,"_39":169,"_139":58,"_37":170,"_13":141,"_33":20,"_34":171,"_24":25,"_143":-5,"_27":172},{"_42":160,"_32":161,"_30":56,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":162,"_13":62,"_33":163,"_34":164,"_24":25,"_143":-5,"_27":165},{"_42":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":25,"_37":157,"_13":62,"_33":20,"_34":158,"_24":25,"_143":-5,"_27":159},{"_42":145,"_32":146,"_30":147,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":149,"_13":62,"_33":150,"_34":151,"_24":25,"_143":-5,"_27":152},{"_42":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":58,"_37":140,"_13":141,"_33":20,"_34":142,"_24":25,"_143":-5,"_27":144},"0ad3f64d-b7be-4cff-9cd7-f8d249dd419b","style.css","01a04dc8-8fae-7098-9e26-992d1d8502d8","parentId",7,"latest",["D",1788012057013],2,"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","label",[135],"94022639-c98d-48fd-9bf6-8000ab542e84","script.js","01a04dc8-8fae-7098-9e26-9543e5d88c56",1,["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\");",[146],"3dc2ed23-d8aa-496d-b272-eba0d94960d4","note.html","aff9fc62-a3b0-11f1-91df-1607ee4eb77e",5,["D",1788011468709],"

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

\n",[154],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[161],"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",[167],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[174],"c82d696b-dcc5-4e44-8f36-b0db0ff08ba9",["D",1788012057203],[28],"pulls","branches","forks","envVars",{"_189":62,"_191":62},"connections",{"_189":62,"_190":62},"count","unfilledCount","emptyCount",{"_42":179,"_32":28,"_30":31,"_137":-5,"_40":41,"_39":14,"_139":58,"_37":218,"_13":141,"_33":20,"_34":36,"_24":25,"_143":-5,"_200":219,"_27":220},{"_42":173,"_32":174,"_30":175,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":215,"_13":62,"_33":20,"_34":177,"_24":25,"_143":-5,"_200":216,"_27":217},{"_42":166,"_32":167,"_30":168,"_137":-5,"_40":41,"_39":169,"_139":58,"_37":212,"_13":141,"_33":20,"_34":171,"_24":25,"_143":-5,"_200":213,"_27":214},{"_42":160,"_32":161,"_30":56,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":209,"_13":62,"_33":163,"_34":164,"_24":25,"_143":-5,"_200":210,"_27":211},{"_42":153,"_32":154,"_30":155,"_137":-5,"_40":41,"_39":156,"_139":25,"_37":206,"_13":62,"_33":20,"_34":158,"_24":25,"_143":-5,"_200":207,"_27":208},{"_42":145,"_32":146,"_30":147,"_137":-5,"_40":41,"_39":148,"_139":58,"_37":203,"_13":62,"_33":150,"_34":151,"_24":25,"_143":-5,"_200":204,"_27":205},{"_42":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":58,"_37":199,"_13":141,"_33":20,"_34":142,"_24":25,"_143":-5,"_200":201,"_27":202},["D",1788012057013],"children",[],[135],["D",1788011384663],[],[146],["D",1788011468709],[],[154],["D",1788011384663],[],[161],["D",1788012056830],[],[167],["D",1788011384663],[],[174],["D",1788012057203],[],[28],["D",1788011384663],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_124":258,"_259":260,"_261":262,"_263":25,"_264":25,"_265":25,"_266":58,"_267":-5,"_268":-7,"_269":-7,"_270":62,"_271":25,"_272":25,"_273":-5,"_274":25,"_275":25,"_276":25,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":86,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"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"]

Diff · v8