[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_247":248,"_249":250},"routes/_app.x.$handle.$name",{"_100":99,"_31":44,"_108":86,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":24,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_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":24},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","components/Home.tsx","latestPath","fileId","0eea8f6e-5944-11f1-b083-ee650bb23af1","name","Home.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\n\nexport function Home() {\n return (\n

Website Screenshot Generator

\n Enter a URL and we'll capture a full-page screenshot via a real headless browser.\n

\n );\n}\n","createdAt",["D",1779828426799],"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",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":85,"_31":86,"_42":41,"_87":43,"_88":89,"_90":91,"_92":49,"_93":94,"_95":96,"_97":44,"_98":99},"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",{"_42":43,"_31":44,"_37":243,"_46":-5,"_47":24,"_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":244,"_80":245,"_82":246,"_84":24},"tree",[195,198,201,202,203],"files",[195,196,197,198,199,200,201,202,203],"counts",{"_184":62,"_185":162,"_186":62,"_187":188,"_189":190},"contents",[143,144,145,146,147],"upstreamProject",{"_42":94,"_31":139,"_51":52,"_53":140,"_48":49,"_78":141},"upstreamBranch",{"_42":89,"_37":132,"_133":134,"_31":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_46":-5,"_84":24,"_48":49,"_98":138,"_63":96,"_97":139},"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=1789541999&sig=8fad4d8ed521ff338d1e7bb443f46241d1f9e0e657d24a41f82306e6eb92823c",{"_100":138,"_107":142},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789541999&sig=156ae2b8ac752fc06f52d45eab428b512e0d31e2aab99a830d8bb32149c64f0f",{"_42":178,"_31":179,"_29":180,"_151":-5,"_40":41,"_39":181,"_153":24,"_37":182,"_13":62,"_33":176,"_35":-5,"_23":24,"_156":-5,"_26":183},{"_42":172,"_31":173,"_29":174,"_151":-5,"_40":41,"_39":162,"_153":58,"_37":175,"_13":62,"_33":176,"_35":-5,"_23":24,"_156":-5,"_26":177},{"_42":166,"_31":167,"_29":168,"_151":-5,"_40":41,"_39":162,"_153":24,"_37":169,"_13":62,"_33":20,"_35":170,"_23":24,"_156":-5,"_26":171},{"_42":158,"_31":159,"_29":56,"_151":-5,"_40":41,"_39":160,"_153":24,"_37":161,"_13":162,"_33":163,"_35":164,"_23":24,"_156":-5,"_26":165},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":58,"_37":154,"_13":62,"_33":34,"_35":155,"_23":24,"_156":-5,"_26":157},"097e359e-5944-11f1-8ba9-ee650bb23af1","screenshot.ts","097e36a2-5944-11f1-8ba9-ee650bb23af1","parentId",7,"latest",["D",1779828417702],"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","label",[149],"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",[159],"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",[167],"f814d074-5943-11f1-9ec6-ee650bb23af1","frontend","019e6609-f274-762c-9860-3069faca31d2",["D",1779828388404],"directory",[173],"0c8b330e-5944-11f1-8173-ee650bb23af1","components","cbe81a60-52a0-47b6-8e0d-a78b2aebbcc9",8,["D",1779828422819],[179],"pulls","branches","forks","envVars",{"_191":193,"_194":62},"connections",{"_191":62,"_192":62},"count","unfilledCount",2,"emptyCount",{"_42":178,"_31":179,"_29":180,"_151":-5,"_40":41,"_39":181,"_153":24,"_37":240,"_13":62,"_33":176,"_35":-5,"_23":24,"_156":-5,"_205":241,"_26":242},{"_42":236,"_31":32,"_29":30,"_151":180,"_40":41,"_39":14,"_153":58,"_37":237,"_13":62,"_33":34,"_35":36,"_23":24,"_156":-5,"_205":238,"_26":239},{"_42":229,"_31":230,"_29":231,"_151":180,"_40":41,"_39":181,"_153":58,"_37":232,"_13":62,"_33":34,"_35":233,"_23":24,"_156":-5,"_205":234,"_26":235},{"_42":172,"_31":173,"_29":174,"_151":-5,"_40":41,"_39":162,"_153":58,"_37":226,"_13":62,"_33":176,"_35":-5,"_23":24,"_156":-5,"_205":227,"_26":228},{"_42":221,"_31":179,"_29":222,"_151":174,"_40":41,"_39":162,"_153":24,"_37":223,"_13":62,"_33":176,"_35":-5,"_23":24,"_156":-5,"_205":224,"_26":225},{"_42":214,"_31":215,"_29":216,"_151":174,"_40":41,"_39":162,"_153":58,"_37":217,"_13":62,"_33":20,"_35":218,"_23":24,"_156":-5,"_205":219,"_26":220},{"_42":166,"_31":167,"_29":168,"_151":-5,"_40":41,"_39":162,"_153":24,"_37":211,"_13":62,"_33":20,"_35":170,"_23":24,"_156":-5,"_205":212,"_26":213},{"_42":158,"_31":159,"_29":56,"_151":-5,"_40":41,"_39":160,"_153":24,"_37":208,"_13":162,"_33":163,"_35":164,"_23":24,"_156":-5,"_205":209,"_26":210},{"_42":148,"_31":149,"_29":150,"_151":-5,"_40":41,"_39":152,"_153":58,"_37":204,"_13":62,"_33":34,"_35":155,"_23":24,"_156":-5,"_205":206,"_26":207},["D",1779828417702],"children",[],[149],["D",1779828411712],[],[159],["D",1779828388404],[],[167],"f814c1e2-5943-11f1-9ec6-ee650bb23af1","favicon.svg","019e6609-f274-762c-9860-26968712ee28",["D",1779828388404],"\n",[],[173,215],"f814c084-5943-11f1-9ec6-ee650bb23af1","019e6609-f274-762c-9860-208f9216701e",["D",1779828388404],[],[173,179],["D",1779828388404],[199,200],[173],"0c8b23c8-5944-11f1-8173-ee650bb23af1","Layout.tsx","0c8b2490-5944-11f1-8173-ee650bb23af1",["D",1779828422819],"/** @jsxImportSource npm:hono@4/jsx */\nimport type { FC } from \"npm:hono@4/jsx\";\n\nexport const Layout: FC = ({ children }) => (\n \n \n \n \n Screenshot Generator\n \n \n \n \n

{children}

\n \n \n \n);\n",[],[179,230],"0eea8e6a-5944-11f1-b083-ee650bb23af1",["D",1779828426799],[],[179,32],["D",1779828422819],[196,197],[179],["D",1779828388404],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":24},{"_13":85,"_31":86,"_42":41,"_87":43,"_88":89,"_90":91,"_92":49,"_93":94,"_95":96,"_97":44,"_98":99},"ctx",{"_78":-5,"_129":280,"_281":282,"_283":284,"_285":24,"_286":24,"_287":24,"_288":58,"_289":-5,"_290":-7,"_291":-7,"_292":62,"_293":24,"_294":24,"_295":-5,"_296":24,"_297":24,"_298":24,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":86,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"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 · v9