Screenshot Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_242":243,"_244":245},"routes/_app.x.$handle.$name",{"_107":106,"_33":51,"_115":93,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_21":-5,"_127":128,"_129":130,"_131":25,"_132":133,"_134":65,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_33":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",8,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":28,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","components","latestPath","frontend/components","fileId","cbe81a60-52a0-47b6-8e0d-a78b2aebbcc9","name","fileType","directory","content","createdAt",["D",1779828422819],"branchVersion","branchId","f80de87c-5943-11f1-9ec6-ee650bb23af1",{"_31":44,"_33":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"components/Layout.tsx","0c8b2490-5944-11f1-8173-ee650bb23af1","Layout.tsx","script","/** @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",["D",1779828422819],"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",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_18":61,"_111":112,"_113":25},"branch",{"_13":92,"_33":93,"_49":41,"_94":50,"_95":96,"_97":98,"_99":56,"_100":101,"_102":103,"_104":51,"_105":106},"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",{"_49":50,"_33":51,"_37":238,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":239,"_87":240,"_89":241,"_91":25},"tree",[198,200,203,204,205],"files",[198,199,200,201,202,203,204,205],"counts",{"_187":69,"_188":169,"_189":69,"_190":191,"_192":193},"contents",[150,151,152,153,154],"upstreamProject",{"_49":101,"_33":146,"_58":59,"_60":147,"_55":56,"_85":148},"upstreamBranch",{"_49":96,"_37":139,"_140":141,"_33":93,"_94":101,"_13":142,"_95":-5,"_97":-5,"_143":144,"_53":-5,"_91":25,"_55":56,"_105":145,"_70":103,"_104":146},"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=1789545599&sig=91cfcc631bd9f3dd8274549c04838d172adf2572755982193460d49bfd04bd62",{"_107":145,"_114":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31",{"_49":184,"_33":28,"_31":32,"_158":-5,"_40":41,"_39":14,"_160":25,"_37":185,"_13":69,"_34":35,"_36":-5,"_24":25,"_163":-5,"_27":186},{"_49":179,"_33":180,"_31":181,"_158":-5,"_40":41,"_39":169,"_160":65,"_37":182,"_13":69,"_34":35,"_36":-5,"_24":25,"_163":-5,"_27":183},{"_49":173,"_33":174,"_31":175,"_158":-5,"_40":41,"_39":169,"_160":25,"_37":176,"_13":69,"_34":21,"_36":177,"_24":25,"_163":-5,"_27":178},{"_49":165,"_33":166,"_31":63,"_158":-5,"_40":41,"_39":167,"_160":25,"_37":168,"_13":169,"_34":170,"_36":171,"_24":25,"_163":-5,"_27":172},{"_49":155,"_33":156,"_31":157,"_158":-5,"_40":41,"_39":159,"_160":65,"_37":161,"_13":69,"_34":46,"_36":162,"_24":25,"_163":-5,"_27":164},"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",[156],"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",[166],"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",[174],"f814d074-5943-11f1-9ec6-ee650bb23af1","frontend","019e6609-f274-762c-9860-3069faca31d2",["D",1779828388404],[180],"0c8b330e-5944-11f1-8173-ee650bb23af1",["D",1779828422819],[28],"pulls","branches","forks","envVars",{"_194":196,"_197":69},"connections",{"_194":69,"_195":69},"count","unfilledCount",2,"emptyCount",{"_49":184,"_33":28,"_31":32,"_158":-5,"_40":41,"_39":14,"_160":25,"_37":235,"_13":69,"_34":35,"_36":-5,"_24":25,"_163":-5,"_207":236,"_27":237},{"_49":231,"_33":45,"_31":44,"_158":32,"_40":41,"_39":14,"_160":65,"_37":232,"_13":69,"_34":46,"_36":47,"_24":25,"_163":-5,"_207":233,"_27":234},{"_49":179,"_33":180,"_31":181,"_158":-5,"_40":41,"_39":169,"_160":65,"_37":228,"_13":69,"_34":35,"_36":-5,"_24":25,"_163":-5,"_207":229,"_27":230},{"_49":223,"_33":28,"_31":224,"_158":181,"_40":41,"_39":169,"_160":25,"_37":225,"_13":69,"_34":35,"_36":-5,"_24":25,"_163":-5,"_207":226,"_27":227},{"_49":216,"_33":217,"_31":218,"_158":181,"_40":41,"_39":169,"_160":65,"_37":219,"_13":69,"_34":21,"_36":220,"_24":25,"_163":-5,"_207":221,"_27":222},{"_49":173,"_33":174,"_31":175,"_158":-5,"_40":41,"_39":169,"_160":25,"_37":213,"_13":69,"_34":21,"_36":177,"_24":25,"_163":-5,"_207":214,"_27":215},{"_49":165,"_33":166,"_31":63,"_158":-5,"_40":41,"_39":167,"_160":25,"_37":210,"_13":169,"_34":170,"_36":171,"_24":25,"_163":-5,"_207":211,"_27":212},{"_49":155,"_33":156,"_31":157,"_158":-5,"_40":41,"_39":159,"_160":65,"_37":206,"_13":69,"_34":46,"_36":162,"_24":25,"_163":-5,"_207":208,"_27":209},["D",1779828417702],"children",[],[156],["D",1779828411712],[],[166],["D",1779828388404],[],[174],"f814c1e2-5943-11f1-9ec6-ee650bb23af1","favicon.svg","019e6609-f274-762c-9860-26968712ee28",["D",1779828388404],"\n",[],[180,217],"f814c084-5943-11f1-9ec6-ee650bb23af1","019e6609-f274-762c-9860-208f9216701e",["D",1779828388404],[],[180,28],["D",1779828388404],[201,202],[180],"0c8b23c8-5944-11f1-8173-ee650bb23af1",["D",1779828422819],[],[28,45],["D",1779828422819],[199],[28],["D",1779828388404],{"_107":106,"_114":110},{"_107":106,"_108":-5,"_109":110,"_18":61,"_111":112,"_113":25},{"_13":92,"_33":93,"_49":41,"_94":50,"_95":96,"_97":98,"_99":56,"_100":101,"_102":103,"_104":51,"_105":106},"ctx",{"_85":-5,"_136":275,"_276":277,"_278":279,"_280":25,"_281":25,"_282":25,"_283":65,"_284":-5,"_285":-7,"_286":-7,"_287":69,"_288":25,"_289":25,"_290":-5,"_291":25,"_292":25,"_293":25,"_294":-5},"ENV",{"_246":247,"_248":249,"_250":93,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274},"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 · v8