Supported Formats

cURL Commands

Most popular format from terminal and documentation

curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer your_token" \
  -d '{"name":"John","email":"john@example.com"}'

Copy directly from browser DevTools Network tab

Supports multi-line format with backslashes

Automatically extracts headers, body, and method

JavaScript Fetch

Modern browser API for HTTP requests

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
})

Paste from your JavaScript code

Automatically parses JavaScript objects

Raw HTTP

RFC-standard HTTP request format

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer your_token

{"name":"John","email":"john@example.com"}

Standard HTTP protocol format

Great for learning HTTP fundamentals

HAR Files

HTTP Archive format from browser exports

{
  "request": {
    "method": "POST",
    "url": "https://api.example.com/users",
    "headers": [...],
    "postData": {
      "mimeType": "application/json",
      "text": "{\"name\":\"John\"}"
    }
  }
}

Export from Chrome/Firefox DevTools

Contains full request and response data

Build Requests

🔨

Request Builder

Now you can build requests from scratch without knowing cURL syntax!

How It Works:

Switch to Build Mode

Click the "🔨 Build Request" tab

Enter URL & Method

Type the endpoint and select GET/POST/etc.

Configure Request

Add headers, auth, query params, body

Send & Visualize

Click Send to generate flow diagram

🌐

Query Params

Add key-value pairs that auto-update the URL

🔐

Auth Support

Bearer token, Basic auth, or API key

📋

Custom Headers

Add unlimited headers with enable/disable toggle

📦

Body Editor

JSON, raw text, or form data support

💡 Pro Tip: Use the Preview tab to see the generated cURL command before sending!

Key Features

🎨 Flow Visualization

Converts your request into an interactive flow diagram showing method, URL, headers, and body.

• Color-coded HTTP methods
• Expandable sections
• Export as PNG image

💻 Code Generation

Convert your request to 7 different programming languages instantly.

• JavaScript, Python, Go, PHP
• Ruby, Rust, cURL
• Copy or download code

⚡ Test Execution

Execute requests directly from the browser and view real responses.

• View status codes and headers
• Response time tracking
• CORS troubleshooting help

📚 Request History

Automatically saves your requests for quick access later.

• Search and filter history
• One-click reload
• Stored locally in browser

Tips & Tricks

💡 Quick Samples

Click the "Sample" button to load example requests, or use the "More" button for advanced templates like GitHub API, Stripe, and OpenAI.

🔍 DevTools Integration

In Chrome DevTools, right-click any network request → Copy → Copy as cURL, then paste directly into Flow API.

⚡ Keyboard Shortcuts

Speed up your workflow with 15+ shortcuts:

• ? - View all shortcuts
• Ctrl+K - Clear all data
• Ctrl+H - Open request history
• Ctrl+F - Add to favorites
• Ctrl+Z / Ctrl+Shift+Z - Undo/Redo
• Ctrl+T - Test request
• Ctrl+E / Ctrl+S - Export PNG/JSON

🔐 Security Best Practice

Always use test API keys or placeholder tokens when sharing. Flow API will warn you if it detects real credentials.

📤 Sharing

Click "Share" to generate a URL with your visualization. Perfect for team collaboration or bug reports.

⭐ Favorites & History

Press Ctrl+F to save frequently used requests. Export your entire history with Ctrl+I and import it on another device or share with your team.

🔄 Undo/Redo

Made a mistake? Press Ctrl+Z to undo or Ctrl+Shift+Z to redo. Perfect for comparing multiple request variations.

📊 Interactive Flow Diagram

Click any stage in the flow diagram to see detailed timing breakdown. Toggle between "Stages" and "Timeline" views for different perspectives. Copy stage details to clipboard for documentation.

📁 Organize with Collections

Keep your API requests organized by project or API:

• Click Collections button in toolbar
• New Collection to organize by API or project
• Click any request to load it instantly
• Bulk select and move requests between collections
• Star favorites and filter by recent (7-day window)

Advanced Features

📁 Collections & Organization

Organize your API requests into logical collections and sub-folders for better project management.

Create nested collections and sub-folders
Bulk select and move multiple requests
Request timestamps, favorites, and recent filter
Export collections as JSON

Real HAR Timing Data

Import HAR files exported from DevTools to see actual network timing data including DNS lookup, SSL handshake, and response times.

Extracts real timing values from HAR files
Shows SSL/TLS handshake duration
Displays request/response sizes

Performance Insights

Automatic performance analysis identifies bottlenecks and provides optimization recommendations.

Identifies slowest stage automatically
Shows percentage contribution per stage
Performance ratings (Excellent/Good/Needs Optimization)

History & Favorites

Save, organize, and share your API request collections across devices.

Auto-saves last 10 analyzed requests
Star favorites for quick access
Export/import JSON for backups or sharing

Multi-Language Code Generation

Convert any request to 7 different programming languages with one click.

JavaScript (Fetch, Axios), Python, Go, PHP, Ruby, Java
Syntax highlighting with Prism.js
One-click copy to clipboard

Frequently Asked Questions

Is my data safe? Does it get sent to a server?

No! Flow API runs 100% in your browser. Your requests are processed entirely client-side using JavaScript. Nothing is sent to our servers or third parties. You can verify this by checking the Network tab in DevTools - you'll see no outbound requests to our API. Learn more about our security.

Can I use this offline?

Yes! Once the page loads, all functionality works offline. The app is cached in your browser and doesn't require an internet connection to parse or visualize requests. Testing requests obviously requires internet.

Why do I get CORS errors when testing?

CORS (Cross-Origin Resource Sharing) is a browser security feature. When testing from Flow API, the target API needs to allow requests from our domain. Solutions: (1) Use a CORS proxy for development, (2) Test from Postman or backend instead, (3) Ask the API owner to whitelist our domain. We provide detailed CORS help when errors occur.

Is there a file size limit?

Yes, for performance reasons. Text input is limited to 1MB, and file uploads to 10MB. This is more than enough for typical API requests. Very large payloads might impact browser performance.

How do I use Collections to organize requests?

Collections help you organize requests by project, API, or team. Click the Collections button, create folders, and use Save to store requests. You can create nested folders, bulk-select requests to move them, mark favorites with the star icon, and filter by recent (last 7 days) or favorites. Collections auto-save to localStorage and support export as JSON for sharing with your team.

How do I report bugs or request features?

Open an issue on GitHub or reach out on Twitter. We're actively developing and love feedback!

How to Use Flow API

Quick Start

3 Simple Steps

Copy Your API Request

Paste & Select Format

View & Interact