[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_104":105,"_106":107},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22},"handle","cameronpak","name","htmx4-hx-live","path","index.html","project",{"_23":45,"_11":12,"_34":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":33,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":42},"file",{"_23":24,"_11":14,"_25":26,"_27":-5,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":17,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/cameronpak/htmx4-hx-live/code/index.html","extension","html","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],"version",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",[14],"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","01a04dc8-8fae-7098-9e26-934a08cfbcca","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","47e0b4b2-7d41-46e6-8dce-0ae3d76e1a8f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_103":99},"org",{"_9":10,"_96":97,"_98":99,"_55":56,"_100":101,"_102":42},"branch",{"_36":86,"_11":87,"_23":29,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":12,"_95":10},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Cam","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7fcc9ac1-f8fb-41e2-0168-af29ef7c6400/square512?exp=1789531199&sig=5a65ebc4eb57dd26953116b2196a9d191721da421d85fe76c455184a5660ed08","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_79":-5,"_137":138,"_139":140,"_141":142,"_143":42,"_144":42,"_145":42,"_146":33,"_147":-5,"_148":-7,"_149":-7,"_150":63,"_151":42,"_152":42,"_153":-5,"_154":42,"_155":42,"_156":42,"_157":-5},"ENV",{"_108":109,"_110":111,"_112":87,"_113":114,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]