\n Screenshot of {url}\n

\n New screenshot\n

This may take 10-30s on first load.

\n );\n}\n",[191,92,90],"0c8b23c8-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",[191,92,66],"0eea8e6a-5944-11f1-b083-ee650bb23af1",["D",1779828426799],"/** @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",[191,92,81],"pulls","branches","forks","envVars",{"_215":217,"_218":26},"connections",{"_215":26,"_216":26},"count","unfilledCount",2,"emptyCount",{"_35":272,"_13":191,"_64":185,"_45":-5,"_37":38,"_187":184,"_196":24,"_39":273,"_41":26,"_67":93,"_183":-5,"_69":30,"_189":-5,"_234":274,"_17":275},{"_35":182,"_13":92,"_64":91,"_45":185,"_37":38,"_187":188,"_196":24,"_39":269,"_41":184,"_67":93,"_183":-5,"_69":30,"_189":-5,"_234":270,"_17":271},{"_35":204,"_13":81,"_64":80,"_45":91,"_37":38,"_187":75,"_196":24,"_39":266,"_41":26,"_67":68,"_183":206,"_69":30,"_189":-5,"_234":267,"_17":268},{"_35":200,"_13":66,"_64":65,"_45":91,"_37":38,"_187":42,"_196":24,"_39":263,"_41":26,"_67":68,"_183":202,"_69":30,"_189":-5,"_234":264,"_17":265},{"_35":195,"_13":90,"_64":89,"_45":91,"_37":38,"_187":84,"_196":24,"_39":260,"_41":26,"_67":68,"_183":198,"_69":30,"_189":-5,"_234":261,"_17":262},{"_35":253,"_13":254,"_64":255,"_45":185,"_37":38,"_187":184,"_196":24,"_39":256,"_41":26,"_67":21,"_183":257,"_69":30,"_189":-5,"_234":258,"_17":259},{"_35":245,"_13":246,"_64":247,"_45":-5,"_37":38,"_187":248,"_196":24,"_39":249,"_41":184,"_67":21,"_183":250,"_69":30,"_189":-5,"_234":251,"_17":252},{"_35":237,"_13":238,"_64":106,"_45":-5,"_37":38,"_187":130,"_196":24,"_39":239,"_41":240,"_67":241,"_183":242,"_69":30,"_189":-5,"_234":243,"_17":244},{"_35":228,"_13":229,"_64":230,"_45":-5,"_37":38,"_187":231,"_196":24,"_39":232,"_41":26,"_67":68,"_183":233,"_69":30,"_189":-5,"_234":235,"_17":236},"097e359e-5944-11f1-8ba9-ee650bb23af1","screenshot.ts","097e36a2-5944-11f1-8ba9-ee650bb23af1",7,["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","children",[],[229],"15eca23c-594b-11f1-9660-ee650bb23af1","index.tsx",["D",1779831445024],5,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4\";\nimport { Layout } from \"./frontend/components/Layout.tsx\";\nimport { Home } from \"./frontend/components/Home.tsx\";\nimport { Result } from \"./frontend/components/Result.tsx\";\nimport { screenshotUrl } from \"./screenshot.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html(\n \n \n ,\n );\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 \n ,\n );\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;",[],[238],"13e13324-5944-11f1-b18a-ee650bb23af1","README.md","019e6609-f274-762c-9860-35e4a2014df3",11,["D",1779828435125],"# screenshot-generator\n\nA Val Town HTTP val that captures full-page screenshots of any URL via\n[Browserbase](https://browserbase.com) + headless Chromium.\n\n- `GET /` — form to enter a URL\n- `GET /view?url=...` — result page that embeds the screenshot\n- `GET /api/screenshot?url=...` — raw `image/png` bytes\n\n## Env vars\n\n- `BROWSERBASE_API_KEY`\n- `BROWSERBASE_PROJECT_ID`\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[index.ts]\n Browser -->|GET /api/screenshot| Hono\n Hono -->|wss connect| BB[Browserbase CDP]\n BB -->|PNG bytes| Hono\n Hono -->|image/png| Browser\n```\n",[],[246],"f814c1e2-5943-11f1-9ec6-ee650bb23af1","favicon.svg","019e6609-f274-762c-9860-26968712ee28",["D",1779828388404],"\n",[],[191,254],["D",1779828431399],[],[191,92,90],["D",1779828422819],[],[191,92,66],["D",1779828426799],[],[191,92,81],["D",1779831368769],[221,222,223],[191,92],"f814d074-5943-11f1-9ec6-ee650bb23af1",["D",1779828388404],[220,224],[191],["D",1779828388404],{"_11":12,"_147":72},{"_11":12,"_143":-5,"_71":72,"_31":70,"_144":145,"_146":30},{"_41":130,"_13":16,"_35":38,"_131":95,"_132":133,"_134":135,"_136":100,"_137":138,"_139":140,"_141":14,"_142":12},"ctx",{"_54":-5,"_168":313,"_314":315,"_316":317,"_318":30,"_319":30,"_320":30,"_321":24,"_322":-5,"_323":-7,"_324":-7,"_325":26,"_326":30,"_327":30,"_328":-5,"_329":30,"_330":30,"_331":30,"_332":-5},"ENV",{"_284":285,"_286":287,"_288":16,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312},"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"]

History · components