[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_211":212,"_213":214},"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",3,"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","style.css","latestPath","fileId","01a04dc8-8fae-7098-9e26-992d1d8502d8","name","fileType","content","/* CSS files add styling rules to your content */\n\nbody {\n font-family: Arial, sans-serif;\n margin: 2em;\n}\n\nh1 {\n font-style: italic;\n color: #373fff;\n}","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","createdAt",["D",1788011468432],"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=1789545599&sig=281d1f56060445b983555700813a266600f2b90f9398d146fc085342bd3c4299","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":207,"_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":208,"_80":209,"_82":210,"_84":25},"tree",[182,183,184,185,186,187],"files",[182,183,184,185,186,187],"counts",{"_172":62,"_173":137,"_174":62,"_175":176,"_177":178},"contents",[127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":166,"_32":167,"_30":168,"_134":-5,"_40":41,"_39":137,"_135":25,"_37":169,"_13":62,"_33":20,"_34":170,"_24":25,"_138":-5,"_27":171},{"_42":160,"_32":161,"_30":162,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":163,"_13":62,"_33":20,"_34":164,"_24":25,"_138":-5,"_27":165},{"_42":153,"_32":154,"_30":155,"_134":-5,"_40":41,"_39":156,"_135":25,"_37":157,"_13":137,"_33":20,"_34":158,"_24":25,"_138":-5,"_27":159},{"_42":147,"_32":148,"_30":56,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":149,"_13":62,"_33":150,"_34":151,"_24":25,"_138":-5,"_27":152},{"_42":140,"_32":141,"_30":142,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":143,"_13":62,"_33":144,"_34":145,"_24":25,"_138":-5,"_27":146},{"_42":133,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_135":25,"_37":136,"_13":137,"_33":20,"_34":36,"_24":25,"_138":-5,"_27":139},"a7edeb7c-3cf1-4eab-a988-67110fcb4690","parentId","latest",["D",1788011468432],1,"label",[28],"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\");",[141],"090b5d68-4b1e-4e03-9ac4-f7d226b9b651","main.tsx",["D",1788011384663],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[148],"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",[154],"e8661e7e-0e99-4091-bdab-f851456fdaed","favicon.svg","01a04dc8-8fae-7098-9e26-8a64f5ea93e5",["D",1788011384663],"",[161],"0c8e8b02-3524-4096-8245-c9f7e5e4bf22","README.md","01a04dc8-8fae-7098-9e26-87176c73e376",["D",1788011384663],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| **[`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter)** *(you're here)* | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## Getting started\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.\n",[167],"pulls","branches","forks","envVars",{"_179":62,"_181":62},"connections",{"_179":62,"_180":62},"count","unfilledCount","emptyCount",{"_42":166,"_32":167,"_30":168,"_134":-5,"_40":41,"_39":137,"_135":25,"_37":204,"_13":62,"_33":20,"_34":170,"_24":25,"_138":-5,"_189":205,"_27":206},{"_42":160,"_32":161,"_30":162,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":201,"_13":62,"_33":20,"_34":164,"_24":25,"_138":-5,"_189":202,"_27":203},{"_42":153,"_32":154,"_30":155,"_134":-5,"_40":41,"_39":156,"_135":25,"_37":198,"_13":137,"_33":20,"_34":158,"_24":25,"_138":-5,"_189":199,"_27":200},{"_42":147,"_32":148,"_30":56,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":195,"_13":62,"_33":150,"_34":151,"_24":25,"_138":-5,"_189":196,"_27":197},{"_42":140,"_32":141,"_30":142,"_134":-5,"_40":41,"_39":137,"_135":58,"_37":192,"_13":62,"_33":144,"_34":145,"_24":25,"_138":-5,"_189":193,"_27":194},{"_42":133,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_135":25,"_37":188,"_13":137,"_33":20,"_34":36,"_24":25,"_138":-5,"_189":190,"_27":191},["D",1788011468432],"children",[],[28],["D",1788011384663],[],[141],["D",1788011384663],[],[148],["D",1788011468301],[],[154],["D",1788011384663],[],[161],["D",1788011384663],[],[167],["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":244,"_245":246,"_247":248,"_249":25,"_250":25,"_251":25,"_252":58,"_253":-5,"_254":-7,"_255":-7,"_256":62,"_257":25,"_258":25,"_259":-5,"_260":25,"_261":25,"_262":25,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":86,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"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 · v3