cURL to Fetch Converter — Convert curl Commands to JavaScript fetch()

cURL to Fetch Converter is a free, browser-based tool that translates any curl command into ready-to-use JavaScript fetch() or TypeScript code in real time. Paste a curl command, see clean fetch code immediately, copy it, and move on. No signup. No data sent to any server. 100% client-side.

The Problem

API documentation almost universally uses curl for code examples. Request bodies, headers, authentication — it's all shown as curl flags. But most web applications use the fetch() API, not curl.

The mental translation from curl to fetch is error-prone:

curl -X POST https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{"model": "gpt-4", "messages": [{"role": "user", "content": "Hello"}]}'

Becomes this in fetch — but getting there by hand means remembering the RequestInit structure, wrapping the body in JSON.stringify(), setting the right headers object format, and not forgetting that method defaults to "GET". One mistake and the request silently fails or returns a confusing error.

Developers either manually translate (slow, error-prone) or use search engines to find incomplete conversions. Neither is good.

How It Works

Paste and Convert

Paste any curl command into the input box — single-line, multi-line, with backslash continuations — and the equivalent fetch() code appears instantly in the output panel. No button click required.

The converter handles all the awkward quoting patterns that appear in real curl commands: single-quoted JSON bodies, nested quotes, escaped characters, and the '...''"'"'...' patterns used in shell-escaped strings.

Supported Flags

The converter handles every flag a developer is likely to encounter from API documentation:

| Flag | Effect | |------|--------| | -X / --request | Sets the HTTP method | | -H / --header | Adds a header to the headers object | | -d / --data / --data-raw / --data-binary | Sets the request body | | --data-urlencode | URL-encoded form body using URLSearchParams | | -F / --form | Multipart form data using FormData | | -u / --user | Basic auth — converted to Authorization: Basic ... header | | -A / --user-agent | Sets the User-Agent header | | -e / --referer | Sets the Referer header | | -b / --cookie | Sets the Cookie header | | --compressed | Adds Accept-Encoding: gzip, deflate, br header | | -L / --location | Adds redirect: "follow" to fetch options | | -I / --head | Sets method to HEAD |

Display-only flags (-s, -v, -i, -k) are silently ignored.

Body Type Detection

The converter intelligently detects what kind of body you're sending:

• JSON: If the body parses as valid JSON, it uses JSON.stringify() and pretty-prints the object in the output for readability.
• Form data: If -F or --form flags are used, it generates FormData object code.
• URL-encoded: If --data-urlencode is used, it generates URLSearchParams code.
• Content-Type inference: If you set Content-Type: application/json in headers without an explicit flag, the body is treated as JSON.

JavaScript and TypeScript Output

Toggle between JavaScript and TypeScript output. TypeScript mode adds satisfies RequestInit type annotation so your editor can validate the fetch options object.

Parsed Request Summary

Below the output, summary chips show the detected HTTP method, target URL, number of headers, and body type at a glance — useful for quickly confirming the converter understood your command correctly.

Technical Implementation

Built as a Next.js 16 app with TypeScript strict mode, shadcn/ui components, and Tailwind CSS v4.

The curl parser is a custom tokenizer that handles:

• Shell quoting rules (single quotes, double quotes, backslash escapes)
• Multiline commands with backslash continuations (\)
• The '"'"' shell escape pattern used inside single-quoted strings
• Space-separated and equals-separated flag values

The tokenizer runs in a single pass — no regex-heavy fragile patterns, no external curl-parsing library. The entire tool is under 400 lines of TypeScript.

Key Features

• Instant conversion — output updates as you type, no button needed
• Full flag support — handles all common curl flags from API documentation
• Smart body detection — automatically detects JSON, form, and multipart bodies
• JS and TS output — toggle between JavaScript and TypeScript
• Basic auth conversion — -u user:pass becomes a proper Authorization header
• FormData support — -F fields become FormData.append() calls
• URLSearchParams support — --data-urlencode becomes URLSearchParams
• Redirect handling — -L maps to redirect: "follow" in fetch options
• 100% private — no data leaves your browser

Use Cases

Integrating API documentation: Copy the curl example from any API reference page, convert it to fetch, and paste it directly into your frontend code.

Postman / Insomnia export: When tools export requests as curl commands, convert them to fetch for use in browser-based code.

Backend to frontend migration: Convert curl-based server scripts to browser-compatible fetch calls.

Learning the fetch API: See how curl flags map to fetch options — an educational tool for developers learning the fetch API from a curl background.

Code reviews: Quickly understand what a curl command does by seeing its fetch equivalent with clearly labeled headers and body.