[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_219":220,"_221":222},"routes/_app.x.$handle.$name",{"_99":98,"_31":43,"_107":85,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":24,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","screenshot.ts","latestPath","fileId","097e36a2-5944-11f1-8ba9-ee650bb23af1","name","fileType","script","content","import puppeteer from \"https://deno.land/x/puppeteer@16.2.0/mod.ts\";\n\n/**\n * Take a full-page screenshot of `url` using Browserbase + deno-puppeteer.\n * Returns the PNG bytes.\n */\nexport async function screenshotUrl(url: string): Promise {\n const apiKey = Deno.env.get(\"BROWSERBASE_API_KEY\");\n const projectId = Deno.env.get(\"BROWSERBASE_PROJECT_ID\");\n if (!apiKey) throw new Error(\"Missing BROWSERBASE_API_KEY env var\");\n\n const wsParams = new URLSearchParams({ apiKey });\n if (projectId) wsParams.set(\"projectId\", projectId);\n\n const browser = await puppeteer.connect({\n browserWSEndpoint: `wss://connect.browserbase.com?${wsParams.toString()}`,\n });\n\n try {\n const pages = await browser.pages();\n const page = pages[0] ?? (await browser.newPage());\n await page.setViewport({ width: 1280, height: 800 });\n await page.goto(url, { waitUntil: \"networkidle2\", timeout: 45_000 });\n const buf = await page.screenshot({ fullPage: true, type: \"png\" });\n return buf as Uint8Array;\n } finally {\n await browser.close();\n }\n}\n","createdAt",["D",1779828417702],"branchVersion","branchId","f80de87c-5943-11f1-9ec6-ee650bb23af1","id","f8087824-5943-11f1-9ec6-ee650bb23af1","screenshot-generator",["D",1779828388404],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019e6609-f274-762c-9860-3a8aab16c213","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":88,"_89":90,"_91":48,"_92":93,"_94":95,"_96":43,"_97":98},"isOwned",17,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",88,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":215,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":216,"_79":217,"_81":218,"_83":24},"tree",[183,186,187,188],"files",[183,184,185,186,187,188],"counts",{"_172":61,"_173":156,"_174":61,"_175":176,"_177":178},"contents",[142,143,144,145],"upstreamProject",{"_41":93,"_31":138,"_50":51,"_52":139,"_47":48,"_77":140},"upstreamBranch",{"_41":88,"_36":131,"_132":133,"_31":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":136,"_45":-5,"_83":24,"_47":48,"_97":137,"_62":95,"_96":138},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789552799&sig=b32577280eb127e4de2b63a06a7bd0de022303ec239a56e6599056e91939e4de",{"_99":137,"_106":141},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789552799&sig=d49f90d93e120483cdf15d03d3545ffc812712f79bb9ed726650e50aa3216f06",{"_41":166,"_31":167,"_29":168,"_147":-5,"_39":40,"_38":156,"_148":57,"_36":169,"_13":61,"_32":170,"_34":-5,"_23":24,"_150":-5,"_26":171},{"_41":160,"_31":161,"_29":162,"_147":-5,"_39":40,"_38":156,"_148":24,"_36":163,"_13":61,"_32":20,"_34":164,"_23":24,"_150":-5,"_26":165},{"_41":152,"_31":153,"_29":55,"_147":-5,"_39":40,"_38":154,"_148":24,"_36":155,"_13":156,"_32":157,"_34":158,"_23":24,"_150":-5,"_26":159},{"_41":146,"_31":27,"_29":30,"_147":-5,"_39":40,"_38":14,"_148":57,"_36":149,"_13":61,"_32":33,"_34":35,"_23":24,"_150":-5,"_26":151},"097e359e-5944-11f1-8ba9-ee650bb23af1","parentId","latest",["D",1779828417702],"label",[27],"05ed9ed8-5944-11f1-9e25-ee650bb23af1","index.ts",6,["D",1779828411712],1,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Layout } from \"./components/Layout.tsx\";\nimport { Home } from \"./components/Home.tsx\";\nimport { Result } from \"./components/Result.tsx\";\nimport { screenshotUrl } from \"./screenshot.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html();\n});\n\napp.get(\"/view\", (c) => {\n const url = c.req.query(\"url\");\n if (!url) return c.redirect(\"/\");\n return c.html();\n});\n\napp.get(\"/api/screenshot\", async (c) => {\n const url = c.req.query(\"url\");\n if (!url) return c.text(\"Missing url query param\", 400);\n try {\n // Basic validation\n new URL(url);\n } catch {\n return c.text(\"Invalid url\", 400);\n }\n const png = await screenshotUrl(url);\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=300\",\n },\n });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[153],"f814d1f0-5943-11f1-9ec6-ee650bb23af1","README.md","019e6609-f274-762c-9860-35e4a2014df3",["D",1779828388404],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types",[161],"f814d074-5943-11f1-9ec6-ee650bb23af1","frontend","019e6609-f274-762c-9860-3069faca31d2",["D",1779828388404],"directory",[167],"pulls","branches","forks","envVars",{"_179":181,"_182":61},"connections",{"_179":61,"_180":61},"count","unfilledCount",2,"emptyCount",{"_41":166,"_31":167,"_29":168,"_147":-5,"_39":40,"_38":156,"_148":57,"_36":212,"_13":61,"_32":170,"_34":-5,"_23":24,"_150":-5,"_190":213,"_26":214},{"_41":206,"_31":207,"_29":208,"_147":168,"_39":40,"_38":156,"_148":24,"_36":209,"_13":61,"_32":170,"_34":-5,"_23":24,"_150":-5,"_190":210,"_26":211},{"_41":199,"_31":200,"_29":201,"_147":168,"_39":40,"_38":156,"_148":57,"_36":202,"_13":61,"_32":20,"_34":203,"_23":24,"_150":-5,"_190":204,"_26":205},{"_41":160,"_31":161,"_29":162,"_147":-5,"_39":40,"_38":156,"_148":24,"_36":196,"_13":61,"_32":20,"_34":164,"_23":24,"_150":-5,"_190":197,"_26":198},{"_41":152,"_31":153,"_29":55,"_147":-5,"_39":40,"_38":154,"_148":24,"_36":193,"_13":156,"_32":157,"_34":158,"_23":24,"_150":-5,"_190":194,"_26":195},{"_41":146,"_31":27,"_29":30,"_147":-5,"_39":40,"_38":14,"_148":57,"_36":189,"_13":61,"_32":33,"_34":35,"_23":24,"_150":-5,"_190":191,"_26":192},["D",1779828417702],"children",[],[27],["D",1779828411712],[],[153],["D",1779828388404],[],[161],"f814c1e2-5943-11f1-9ec6-ee650bb23af1","favicon.svg","019e6609-f274-762c-9860-26968712ee28",["D",1779828388404],"\n",[],[167,200],"f814c084-5943-11f1-9ec6-ee650bb23af1","components","019e6609-f274-762c-9860-208f9216701e",["D",1779828388404],[],[167,207],["D",1779828388404],[184,185],[167],["D",1779828388404],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":53,"_103":104,"_105":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":88,"_89":90,"_91":48,"_92":93,"_94":95,"_96":43,"_97":98},"ctx",{"_77":-5,"_128":252,"_253":254,"_255":256,"_257":24,"_258":24,"_259":24,"_260":57,"_261":-5,"_262":-7,"_263":-7,"_264":61,"_265":24,"_266":24,"_267":-5,"_268":24,"_269":24,"_270":24,"_271":-5},"ENV",{"_223":224,"_225":226,"_227":85,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251},"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 · v7