cURL Converter
Relevant source files
The following files were used as context for generating this wiki page:
The cURL Converter is a core utility within the DevUtils suite designed to bridge the gap between command-line cURL instructions and functional web requests. It provides a graphical "Request Builder" interface that allows developers to parse, modify, and execute cURL commands directly within the application. Sources: README.md, messages/en.json:23-53
This tool serves two primary purposes: translating complex shell commands into a structured UI for inspection and acting as a lightweight API client to test endpoints without leaving the development environment. Sources: components/tools/curl-converter.tsx:1-55
System Architecture
The cURL Converter is implemented as a React client component utilizing a modular architecture. It integrates with a backend proxy to handle cross-origin (CORS) constraints when executing requests. Sources: components/tools/curl-converter.tsx:1-40, package.json:66-70
Core Components and Logic
The system is divided into three functional layers:
- Parsing Engine: A regex-based parser that deconstructs raw cURL strings into structured JavaScript objects.
- State Management: React state hooks manage the lifecycle of the request (method, URL, headers, body) and the subsequent response.
- Execution Layer: Interacts with the
/api/proxyendpoint to perform the network request and return status codes, timing, and data.
Sources: components/tools/curl-converter.tsx:43-157
Data Flow Overview
The following diagram illustrates the flow from a raw cURL input string to the execution of a network request and the rendering of the response.
The flow starts with input via setCurlInput, which triggers the parseCurl callback to populate the UI state. Sources: components/tools/curl-converter.tsx:159-183
Technical Implementation
The Parsing Engine
The parseCurl function uses a series of regular expressions to extract specific components from the command string. Sources: components/tools/curl-converter.tsx:64-157
| Extraction Target | Logic / Strategy |
|---|---|
| URL | Prioritizes protocol matches (http/https). Falls back to the last quoted non-header string or the last non-flag token. |
| HTTP Method | Scans for -X or --request flags. Defaults to GET unless -d or --data is present (defaults to POST). |
| Headers | Matches -H patterns. Handles both single (') and double (") quotes to preserve values containing colons. |
| Body/Data | Captures content following -d, --data, or --data-raw flags. |
Sources: components/tools/curl-converter.tsx:75-150
Request Builder State
The request state is modeled using the ParsedRequest and KeyValue interfaces. Sources: components/tools/curl-converter.tsx:30-41
interface ParsedRequest {
method: string;
url: string;
headers: Record<string, string>;
body?: string;
}
interface KeyValue {
id: string;
key: string;
value: string;
enabled: boolean;
}
Headers are stored as an array of KeyValue objects to allow individual headers to be toggled on or off without deleting them. Sources: components/tools/curl-converter.tsx:48-55
Network Execution and Proxy
To bypass browser-enforced CORS policies, the tool does not call the destination URL directly. Instead, it sends the request configuration to an internal proxy. Sources: components/tools/curl-converter.tsx:219-245
The proxy returns a unified object containing the response data, the HTTP status, and the responseTime in milliseconds. Sources: components/tools/curl-converter.tsx:238-245
Key Features
The following features are exposed via the user interface:
| Feature | Description | File Reference |
|---|---|---|
| Paste from Clipboard | Automatically parses clipboard contents upon paste. | curl-converter.tsx:159 |
| Header Management | Add, remove, or toggle HTTP headers using a dynamic list. | curl-converter.tsx:185-208 |
| Export to cURL | Re-generates a shell-safe cURL command from current UI state. | curl-converter.tsx:254-266 |
| Response Inspection | Displays status badges (success/error), latency, and formatted body. | curl-converter.tsx:428-472 |
Sources: components/tools/curl-converter.tsx:1-475, messages/en.json:23-53
Shell Safety
When exporting the configuration back to a cURL string via copyAsCurl, the system utilizes an escapeShellArg helper to ensure that single quotes within headers or the body are properly escaped (e.g., ' becomes '\'') to prevent command injection or syntax errors in a terminal. Sources: components/tools/curl-converter.tsx:250-252
Summary
The cURL Converter acts as a sophisticated interface for the fetch API, providing robust parsing of shell commands and a flexible request builder. By utilizing a Next.js proxy and regex-based deconstruction, it allows developers to interact with external APIs directly from the DevUtils desktop or web environment. Sources: components/tools/curl-converter.tsx, README.md