[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_222":223,"_224":225},"routes/_app.x.$handle.$name",{"_94":93,"_31":42,"_103":84,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":56,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","note.html","latestPath","fileId","aff9fc62-a3b0-11f1-91df-1607ee4eb77e","name","fileType","content","

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

\n","createdAt",["D",1788011468709],"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",{"_94":93,"_102":98},"org",{"_94":93,"_95":96,"_97":98,"_18":52,"_99":100,"_101":24},"branch",{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"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=1789538399&sig=466c6eb094040d2b22d5073347b3e3f3d939c24e9366b4a0d3323fb0554fbba2","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":218,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":219,"_78":220,"_80":221,"_82":24},"tree",[189,190,191,192,193,194,195],"files",[189,190,191,192,193,194,195],"counts",{"_179":60,"_180":139,"_181":60,"_182":183,"_184":185},"contents",[125,126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":172,"_31":173,"_29":174,"_135":-5,"_38":39,"_37":175,"_137":24,"_35":176,"_13":139,"_32":20,"_33":177,"_23":24,"_141":-5,"_26":178},{"_40":166,"_31":167,"_29":168,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":169,"_13":60,"_32":20,"_33":170,"_23":24,"_141":-5,"_26":171},{"_40":159,"_31":160,"_29":161,"_135":-5,"_38":39,"_37":162,"_137":24,"_35":163,"_13":139,"_32":20,"_33":164,"_23":24,"_141":-5,"_26":165},{"_40":153,"_31":154,"_29":54,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":155,"_13":60,"_32":156,"_33":157,"_23":24,"_141":-5,"_26":158},{"_40":150,"_31":27,"_29":30,"_135":-5,"_38":39,"_37":14,"_137":24,"_35":151,"_13":60,"_32":20,"_33":34,"_23":24,"_141":-5,"_26":152},{"_40":143,"_31":144,"_29":145,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":146,"_13":60,"_32":147,"_33":148,"_23":24,"_141":-5,"_26":149},{"_40":132,"_31":133,"_29":134,"_135":-5,"_38":39,"_37":136,"_137":24,"_35":138,"_13":139,"_32":20,"_33":140,"_23":24,"_141":-5,"_26":142},"a7edeb7c-3cf1-4eab-a988-67110fcb4690","style.css","01a04dc8-8fae-7098-9e26-992d1d8502d8","parentId",3,"latest",["D",1788011468432],1,"body {\n font-family: Georgia, serif;\n margin: 0 auto;\n max-width: 40rem;\n padding: 2rem 1.25rem 4rem;\n color: #1a1a1a;\n line-height: 1.5;\n}\n\n.eyebrow {\n margin: 0;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n font-size: 0.8rem;\n color: #555;\n}\n\nh1, h2 {\n font-family: Arial, sans-serif;\n line-height: 1.2;\n}\n\nh1 { margin: 0.25rem 0 0.5rem; }\nh2 { margin: 0 0 0.5rem; font-size: 1.1rem; }\n\nheader { margin-bottom: 2.5rem; }\nsection { margin: 2rem 0; }\n\n.row, .tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }\n\nbutton {\n font: inherit;\n padding: 0.4rem 0.75rem;\n border: 1px solid #222;\n background: #fff;\n cursor: pointer;\n}\n\nbutton.on, .hilite {\n background: #fff3a3;\n}\n\noutput {\n display: block;\n font-size: 2.5rem;\n font-family: Arial, sans-serif;\n margin: 0.5rem 0;\n}\n\nprogress { width: 100%; }\n\ncode { font-size: 0.9em; }\n","label",[133],"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\");",[144],"3dc2ed23-d8aa-496d-b272-eba0d94960d4",["D",1788011468709],[27],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[154],"09211af8-5275-4bbb-b03e-093cf85a8054","index.html","01a04dc8-8fae-7098-9e26-8e19d3d7c31b",2,["D",1788011468301],"\n\n \n HTMX 4 + hx-live\n \n \n \n \n \n \n \n \n \n

HTMX 4

hx-live on Val Town

DOM state. Reactive bindings. One server swap.

\n view source\n

\n\n

1. Reactive counter

data-count lives on this section. :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

\n \n \n \n

This is the details pane.

\n \n \n

\n\n

3. q() + toggle()

\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",[160],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[167],"3fb99783-feeb-4543-bdd0-8584e4b58d0b","README.md","01a04dc8-8fae-7098-9e26-87176c73e376",4,["D",1788011468547],"# 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",[173],"pulls","branches","forks","envVars",{"_186":60,"_188":60},"connections",{"_186":60,"_187":60},"count","unfilledCount","emptyCount",{"_40":172,"_31":173,"_29":174,"_135":-5,"_38":39,"_37":175,"_137":24,"_35":215,"_13":139,"_32":20,"_33":177,"_23":24,"_141":-5,"_197":216,"_26":217},{"_40":166,"_31":167,"_29":168,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":212,"_13":60,"_32":20,"_33":170,"_23":24,"_141":-5,"_197":213,"_26":214},{"_40":159,"_31":160,"_29":161,"_135":-5,"_38":39,"_37":162,"_137":24,"_35":209,"_13":139,"_32":20,"_33":164,"_23":24,"_141":-5,"_197":210,"_26":211},{"_40":153,"_31":154,"_29":54,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":206,"_13":60,"_32":156,"_33":157,"_23":24,"_141":-5,"_197":207,"_26":208},{"_40":150,"_31":27,"_29":30,"_135":-5,"_38":39,"_37":14,"_137":24,"_35":203,"_13":60,"_32":20,"_33":34,"_23":24,"_141":-5,"_197":204,"_26":205},{"_40":143,"_31":144,"_29":145,"_135":-5,"_38":39,"_37":139,"_137":56,"_35":200,"_13":60,"_32":147,"_33":148,"_23":24,"_141":-5,"_197":201,"_26":202},{"_40":132,"_31":133,"_29":134,"_135":-5,"_38":39,"_37":136,"_137":24,"_35":196,"_13":139,"_32":20,"_33":140,"_23":24,"_141":-5,"_197":198,"_26":199},["D",1788011468432],"children",[],[133],["D",1788011384663],[],[144],["D",1788011468709],[],[27],["D",1788011384663],[],[154],["D",1788011468301],[],[160],["D",1788011384663],[],[167],["D",1788011468547],[],[173],["D",1788011384663],{"_94":93,"_102":98},{"_94":93,"_95":96,"_97":98,"_18":52,"_99":100,"_101":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":42,"_92":93},"ctx",{"_76":-5,"_122":255,"_256":257,"_258":259,"_260":24,"_261":24,"_262":24,"_263":56,"_264":-5,"_265":-7,"_266":-7,"_267":60,"_268":24,"_269":24,"_270":-5,"_271":24,"_272":24,"_273":24,"_274":-5},"ENV",{"_226":227,"_228":229,"_230":84,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254},"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 · v5