Search API Playground

\n {children}\n

\n \n \n \n \n );\n}\n\ninterface SearchFormProps {\n config?: Partial & { body?: string };\n}\n\nexport function SearchForm({ config }: SearchFormProps) {\n const headersJson = config?.headers && Object.keys(config.headers).length > 0\n ? JSON.stringify(config.headers, null, 2)\n : \"\";\n const extraParamsJson = config?.extraParams && Object.keys(config.extraParams).length > 0\n ? JSON.stringify(config.extraParams, null, 2)\n : \"\";\n \n return (\n \n );\n}\n\nexport function ResultsPanel({ result }: { result: ProxyResult }) {\n const statusClass = result.status === 0 ? \"0xx\"\n : result.status < 300 ? \"2xx\"\n : result.status < 400 ? \"3xx\"\n : result.status < 500 ? \"4xx\"\n : \"5xx\";\n \n const jsonString = typeof result.data === \"string\"\n ? result.data\n : JSON.stringify(result.data, null, 2);\n \n return (\n

\n Status\n

\n \n {result.status} {result.statusText}\n \n

\n Timing\n

{result.timing}ms

\n \n

\n Constructed URL\n

{result.constructedUrl}

\n \n {result.error && (\n

\n Error: {result.error}\n

\n )}\n \n

Response Headers ({Object.keys(result.responseHeaders).length})

{JSON.stringify(result.responseHeaders, null, 2)}

\n \n

Response Body

{jsonString}

\n );\n}\n","deleted","label","children",[],[160],{"_104":180,"_97":181,"_161":117,"_163":-5,"_164":146,"_165":145,"_167":119,"_106":182,"_101":183,"_170":184,"_172":185,"_174":22,"_175":-5,"_176":186,"_100":187},"2591a220-ee73-11f0-9071-42dde27851f2","main.tsx",["D",1768083876735],1,"http","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { Layout, SearchForm, ResultsPanel } from \"./components.tsx\";\nimport { proxyRequest } from \"./proxy.ts\";\nimport type { RequestConfig, ProxyResult } from \"./types.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) => {\n return c.html(\n \n \n \n );\n});\n\napp.post(\"/search\", async (c) => {\n const formData = await c.req.formData();\n \n const parseJson = (val: string | null, fallback: Record) => {\n if (!val?.trim()) return fallback;\n try {\n return JSON.parse(val);\n } catch {\n return fallback;\n }\n };\n \n const config: RequestConfig = {\n baseUrl: formData.get(\"baseUrl\") as string,\n query: formData.get(\"query\") as string || \"\",\n queryParam: formData.get(\"queryParam\") as string || \"q\",\n method: (formData.get(\"method\") as \"GET\" | \"POST\") || \"GET\",\n headers: parseJson(formData.get(\"headers\") as string, {}),\n extraParams: parseJson(formData.get(\"extraParams\") as string, {}),\n body: formData.get(\"body\") as string || undefined,\n };\n \n const result = await proxyRequest(config);\n \n return c.html(\n \n \n

\n \n \n );\n});\n\nexport default app.fetch;\n",[],[181],{"_104":189,"_97":190,"_161":191,"_163":-5,"_164":146,"_165":192,"_167":119,"_106":193,"_101":33,"_170":171,"_172":194,"_174":22,"_175":-5,"_176":195,"_100":196},"e29f8834-ee71-11f0-9c51-42dde27851f2","proxy.ts","e29f88fc-ee71-11f0-9c51-42dde27851f2",2,["D",1768083334912],"import type { RequestConfig, ProxyResult } from \"./types.ts\";\n\nexport function buildUrl(config: RequestConfig): string {\n const url = new URL(config.baseUrl);\n \n if (config.query) {\n url.searchParams.set(config.queryParam, config.query);\n }\n \n for (const [key, value] of Object.entries(config.extraParams)) {\n if (key && value) {\n url.searchParams.set(key, value);\n }\n }\n \n return url.toString();\n}\n\nexport async function proxyRequest(config: RequestConfig): Promise {\n const constructedUrl = buildUrl(config);\n const start = performance.now();\n \n try {\n const fetchOptions: RequestInit = {\n method: config.method,\n headers: config.headers,\n };\n \n if (config.method === \"POST\" && config.body) {\n fetchOptions.body = config.body;\n }\n \n const response = await fetch(constructedUrl, fetchOptions);\n const timing = Math.round(performance.now() - start);\n \n const responseHeaders: Record = {};\n response.headers.forEach((value, key) => {\n responseHeaders[key] = value;\n });\n \n let data: unknown;\n const contentType = response.headers.get(\"content-type\") || \"\";\n \n if (contentType.includes(\"application/json\")) {\n data = await response.json();\n } else {\n data = await response.text();\n }\n \n return {\n success: response.ok,\n constructedUrl,\n status: response.status,\n statusText: response.statusText,\n timing,\n responseHeaders,\n data,\n };\n } catch (err) {\n const timing = Math.round(performance.now() - start);\n return {\n success: false,\n constructedUrl,\n status: 0,\n statusText: \"Network Error\",\n timing,\n responseHeaders: {},\n data: null,\n error: err instanceof Error ? err.message : \"Unknown error\",\n };\n }\n}\n",[],[190],{"_104":198,"_97":199,"_161":200,"_163":-5,"_164":146,"_165":183,"_167":119,"_106":201,"_101":33,"_170":171,"_172":202,"_174":22,"_175":-5,"_176":203,"_100":204},"dd9b7410-ee71-11f0-857a-42dde27851f2","types.ts","dd9b74ba-ee71-11f0-857a-42dde27851f2",["D",1768083326507],"export interface RequestConfig {\n baseUrl: string;\n query: string;\n queryParam: string;\n method: \"GET\" | \"POST\";\n headers: Record;\n extraParams: Record;\n body?: string;\n}\n\nexport interface ProxyResult {\n success: boolean;\n constructedUrl: string;\n status: number;\n statusText: string;\n timing: number;\n responseHeaders: Record;\n data: unknown;\n error?: string;\n}\n",[],[199],"files",[158,179,188,197],"counts",{"_209":33,"_210":183,"_211":33,"_212":213,"_216":217},"pulls","branches","forks","envVars",{"_214":33,"_215":33},"count","emptyCount","connections",{"_214":33,"_218":33},"unfilledCount","contents",[221,224,227,230],{"_104":159,"_97":160,"_161":162,"_163":-5,"_164":146,"_165":166,"_167":119,"_106":222,"_101":169,"_170":171,"_172":173,"_174":22,"_175":-5,"_100":223},["D",1768083871827],[160],{"_104":180,"_97":181,"_161":117,"_163":-5,"_164":146,"_165":145,"_167":119,"_106":225,"_101":183,"_170":184,"_172":185,"_174":22,"_175":-5,"_100":226},["D",1768083876735],[181],{"_104":189,"_97":190,"_161":191,"_163":-5,"_164":146,"_165":192,"_167":119,"_106":228,"_101":33,"_170":171,"_172":194,"_174":22,"_175":-5,"_100":229},["D",1768083334912],[190],{"_104":198,"_97":199,"_161":200,"_163":-5,"_164":146,"_165":183,"_167":119,"_106":231,"_101":33,"_170":171,"_172":202,"_174":22,"_175":-5,"_100":232},["D",1768083326507],[199],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_95":96,"_97":98,"_99":-7,"_101":-7,"_102":242,"_219":247,"_256":-7,"_257":-5,"_258":-5,"_205":259,"_272":263,"_273":-5,"_274":-5,"_275":22,"_276":22},{"_104":105,"_97":98,"_106":243,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":244,"_138":245,"_143":246,"_155":22},["D",1768083319998],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":115,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":98,"_154":96},[248,250,252,254],{"_104":159,"_97":160,"_161":162,"_163":-5,"_164":146,"_165":166,"_167":119,"_106":222,"_101":169,"_170":171,"_172":173,"_174":22,"_175":-5,"_100":249},[160],{"_104":180,"_97":181,"_161":117,"_163":-5,"_164":146,"_165":145,"_167":119,"_106":225,"_101":183,"_170":184,"_172":185,"_174":22,"_175":-5,"_100":251},[181],{"_104":189,"_97":190,"_161":191,"_163":-5,"_164":146,"_165":192,"_167":119,"_106":228,"_101":33,"_170":171,"_172":194,"_174":22,"_175":-5,"_100":253},[190],{"_104":198,"_97":199,"_161":200,"_163":-5,"_164":146,"_165":183,"_167":119,"_106":231,"_101":33,"_170":171,"_172":202,"_174":22,"_175":-5,"_100":255},[199],"readme","upstream","pull",[260,263,266,269],{"_104":159,"_97":160,"_161":162,"_163":-5,"_164":146,"_165":166,"_167":119,"_106":168,"_101":169,"_170":171,"_172":173,"_174":22,"_175":-5,"_176":261,"_100":262},[],[160],{"_104":180,"_97":181,"_161":117,"_163":-5,"_164":146,"_165":145,"_167":119,"_106":182,"_101":183,"_170":184,"_172":185,"_174":22,"_175":-5,"_176":264,"_100":265},[],[181],{"_104":189,"_97":190,"_161":191,"_163":-5,"_164":146,"_165":192,"_167":119,"_106":193,"_101":33,"_170":171,"_172":194,"_174":22,"_175":-5,"_176":267,"_100":268},[],[190],{"_104":198,"_97":199,"_161":200,"_163":-5,"_164":146,"_165":183,"_167":119,"_106":201,"_101":33,"_170":171,"_172":202,"_174":22,"_175":-5,"_176":270,"_100":271},[],[199],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

kamalnrf

search-api-playground