✦ Preact Dev Request Inspector

A browser-native HTTP workbench for composing requests, inspecting responses, replaying history, and exporting reproducible traces.

---

✨ Highlights

• Request Builder: Supports GET, POST, PUT, PATCH, and DELETE with configurable timeout.
• Query and Headers: Adds, disables, edits, and removes key/value rows independently.
• Body Editor: Sends validated JSON or plain text for methods that accept a body.
• Real Browser Requests: Uses ky over the browser Fetch API without a hidden proxy.
• Response Inspection: Shows status, response size, readable JSON, headers, and browser-observed duration.
• Replayable History: Stores the latest 30 complete exchanges and reloads any request into the builder.
• cURL Generation: Copies a shell-quoted command for the current request.
• Trace Export: Downloads request and response history as structured JSON.
• Validated Persistence: Uses Zod and IndexedDB with sample reset and error recovery.
• Responsive Workspace: Provides dedicated Request, Response, and History views below desktop width.

🧱 Project Structure

public/
|-- favicon.svg
|-- sample-api-response.json
`-- sample-request-workspace.json
src/
|-- app.tsx
|-- main.tsx
|-- index.css
|-- components/
|   |-- history-panel.tsx
|   |-- request-builder.tsx
|   |-- response-panel.tsx
|   `-- workspace-state.tsx
|-- domain/
|   `-- request.ts
`-- services/
    `-- request-store.ts

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• ky for browser HTTP execution
• filesize and date-fns
• zod, idb-keyval, and lucide-preact

📦 Included Sample Data

public/sample-request-workspace.json provides the validated initial request and local history state. Its default request targets public/sample-api-response.json, so the complete send, response, history, replay, cURL, and export workflow works without relying on a third-party API.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Requests run directly in the browser. External APIs must permit the deployed origin through CORS.
• Credentials are explicitly omitted. This workbench is not designed to bypass browser security controls or proxy private APIs.
• Duration includes fetch, response headers, and body download. Fine-grained DNS, TCP, and TLS phases are not universally available for cross-origin resources.
• JSON bodies are parsed before sending so malformed payloads fail locally with clear feedback.
• Response bodies are retained as text and formatted as JSON only when the response content type indicates JSON.
• Request history is local to the browser and capped at 30 exchanges.
• Avoid placing production secrets in URLs, headers, or bodies because browser storage and exported history are not secret vaults.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a Vite-ready vercel.json with SPA rewrites.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.