cURL to JavaScript (fetch)

What is curl-to-JavaScript?

This tool converts a curl command into a browser-ready JavaScript snippet using the standard fetch API — the kind of code you'd paste into a <script> tag, a frontend module, or directly into DevTools. It's a separate target from cURL to Node.js because the two environments don't share every global: a browser has no Buffer and no filesystem, so the generated code for Basic Auth and file uploads takes a different path in each.

How it works

The same curl parser used across every cURL converter on this site extracts method, URL, headers, body, form fields, and auth from the command. Method, headers, and body map directly onto fetch's options object, with the body passed through as a raw string rather than re-parsed and re-serialized as JSON — so the exact bytes curl would have sent are what fetch sends too. The one browser-specific substitution is -u user:pass: instead of Node's Buffer.from(...).toString('base64'), the generator emits btoa('user:pass'), the browser-native base64 encoder, and builds the Authorization header from that at runtime rather than hardcoding a precomputed value.

Features

• Uses the standard, cross-browser fetch API — no framework, no bundler required
• Body passed through as a raw string, not re-encoded
• -u Basic Auth computed via btoa() at runtime
• -F/--form uploads become a FormData instance, with file fields stubbed for a real File object
• Uses top-level await, ready to paste into a <script type="module"> or the console

Example

Input: curl -X POST https://api.example.com/v1/login -H "Content-Type: application/json" -u admin:s3cret -d '{"username":"admin","remember":true}'

Output:

const credentials = btoa('admin:s3cret');

const response = await fetch('https://api.example.com/v1/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Basic ${credentials}`,
  },
  body: '{"username":"admin","remember":true}',
});

const data = await response.text();
console.log(response.status, data);

Common errors

A request to a different origin than the page running this script will hit the browser's CORS policy — if the target server doesn't send an Access-Control-Allow-Origin header permitting your origin, the browser blocks reading the response even though the request itself went through. That's not something this generator can fix, since CORS is enforced by the server's response headers, not the request. Top-level await also requires a module context — plain inline <script> tags need type="module", or you'll need to wrap the code in an async function.

Best practices

Check response.ok before trusting the body — fetch only rejects on network failure, never on a 4xx/5xx status. Never hardcode real credentials into client-side JavaScript that ships to users' browsers; the -u flow shown here is meant for testing against your own APIs, not for shipping a secret to production frontend code where anyone can read it from DevTools.