/** * This val creates a Postman-like interface for testing HTTP requests directly in the browser. * It uses React for the UI and the Fetch API to make requests. * The server function serves the HTML and handles the API requests. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [url, setUrl] = useState('https://jsonplaceholder.typicode.com/posts/1'); const [method, setMethod] = useState('GET'); const [headers, setHeaders] = useState(''); const [body, setBody] = useState(''); const [response, setResponse] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); try { const options = { method, headers: headers ? JSON.parse(headers) : {}, body: method !== 'GET' && body ? body : undefined }; const res = await fetch('/proxy', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url, options }) }); const data = await res.json(); setResponse(JSON.stringify(data, null, 2)); } catch (error) { setResponse(`Error: ${error.message}`); } }; return (

🚀 Browser Postman Clone

URL: setUrl(e.target.value)} required />

Method:

Headers (JSON):

setHeaders(e.target.value)}
            placeholder='{"Content-Type": "application/json"}'
          />
        </div>
        <div>
          <label htmlFor="body">Body:</label>
          <textarea
            id="body"
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder="Request body (if applicable)"
          />
        </div>
        <button type="submit">Send Request</button>
      </form>
      <div className="response">
        <h2>Response:</h2>
        <pre>{response}</pre>
      </div>
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank">View Source</a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

async function server(request: Request): Promise<Response> {
  const url = new URL(request.url);

if (url.pathname === '/proxy' && request.method === 'POST') {
    const { url: targetUrl, options } = await request.json();
    try {
      const response = await fetch(targetUrl, options);
      const data = await response.json();
      return new Response(JSON.stringify({
        status: response.status,
        statusText: response.statusText,
        headers: Object.fromEntries(response.headers),
        data
      }), {
        headers: { 'Content-Type': 'application/json' }
      });
    } catch (error) {
      return new Response(JSON.stringify({ error: error.message }), {
        status: 500,
        headers: { 'Content-Type': 'application/json' }
      });
    }
  }

return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Browser Postman Clone</title>
      <style>${css}</style>
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="${import.meta.url}"></script>
    </body>
    </html>
  `, {
    headers: { 'Content-Type': 'text/html' }
  });
}

export default server;</article></body></html>

postmanClone

Version 2