A powerful, modern HTTP API testing tool built with React. Test APIs, manage collections, automate workflows with custom scripts, and use variables for dynamic requests.

Available as:

• 🌐 Web Application (Launch Online)
• 🦊 Firefox Extension (Install from Mozilla Add-ons | Installation Guide)
• 🔵 Chrome Extension (Install from Chrome Web Store)

• Multiple HTTP Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
• Request Management: Headers, body, and URL configuration
• Response Viewer: Syntax-highlighted JSON, XML, HTML, and text responses
• Status Code Display: Clear status codes with descriptions
• Response Headers: View all response headers

• Organize Requests: Group related requests into collections
• Save & Load: Save requests to collections for reuse
• Run Collections: Execute all requests in a collection sequentially
• Drag & Drop: Reorder requests within collections
• Import/Export: Share collections as JSON

• Collection Variables: Define reusable variables per collection
• Dynamic Interpolation: Use ${variableName} syntax in URLs, headers, and body
• Variable Management: Easy-to-use modal for managing variables
• See VARIABLES_GUIDE.md for detailed documentation

• Pre-Request Scripts: Modify requests before they're sent
• Post-Request Scripts: Extract data from responses
• Context Sharing: Pass data between requests
• Variable Access: Use collection variables in scripts
• See SCRIPTING_GUIDE.md for detailed documentation

• Multiple Tabs: Work on multiple requests simultaneously
• Request History: Track and reload recent requests
• Syntax Highlighting: Beautiful code highlighting for responses
• Auto-Save: Collections saved to browser localStorage

• Node.js (v14 or higher)
• npm or yarn

1. Clone the repository:

git clone https://github.com/yourusername/hitop.git
cd hitop

2. Install dependencies:

cd frontend
npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 in your browser

npm run build

1. Build the extension:

./build-extension.sh

2. Install in Firefox:
   • Open about:debugging
   • Click "This Firefox"
   • Click "Load Temporary Add-on"
   • Select extension/manifest.json

See EXTENSION_GUIDE.md for detailed instructions.

1. Enter a URL in the URL field (e.g., https://jsonplaceholder.typicode.com/todos/1)
2. Select HTTP method (GET, POST, etc.)
3. Click "Make Request"
4. View the response below

1. Click "Add Header" in the Headers section
2. Enter header name and value
3. Headers are automatically included in the request

1. Click the save icon next to "Make Request"
2. Enter a request name
3. Select or create a collection
4. Click "Save"

1. Click "Variables" under a collection name
2. Add variable key-value pairs (e.g., apiUrl = https://api.example.com)
3. Use in requests: ${apiUrl}/users
4. See VARIABLES_GUIDE.md for more

1. Scroll to "Pre-Request Script" or "Post-Request Script" sections
2. Write JavaScript code to modify requests or extract data
3. See SCRIPTING_GUIDE.md for examples

• Variables Guide - Complete guide to using collection variables
• Scripting Guide - Custom scripting documentation with examples
• Components README - Component architecture
• Services README - Service layer documentation

hitop/
├── frontend/
│   ├── public/
│   └── src/
│       ├── components/          # React components
│       │   ├── Sidebar.js
│       │   ├── RequestPanel.js
│       │   ├── *Modal.js        # Various modal components
│       │   └── README.md
│       ├── services/            # Business logic services
│       │   ├── variableInterpolation.js
│       │   └── README.md
│       ├── App.js               # Main application component
│       ├── App.css              # Styles
│       └── index.js             # Entry point
├── VARIABLES_GUIDE.md           # Variables documentation
├── SCRIPTING_GUIDE.md           # Scripting documentation
└── README.md                    # This file

Collections are groups of related API requests. Each collection can have:

• Multiple requests
• Collection-specific variables
• Shared context across requests

Variables are key-value pairs defined at the collection level. They can be used in:

• URLs: ${apiUrl}/users
• Headers: Authorization: ${authToken}
• Request body: {"user": "${username}"}
• Scripts: getVariable('apiUrl')

Context is runtime data shared between requests in a collection:

• Set in post-request scripts: setContext('userId', 123)
• Use in pre-request scripts: getContext('userId')
• Persists across requests in the same session

Custom JavaScript code that runs before or after requests:

• Pre-Request: Modify URL, headers, body before sending
• Post-Request: Extract data from response, store in context

Test your APIs during development with different methods, headers, and payloads.

// Login request (post-request script)
const token = getResponseValue('token');
setContext('authToken', token);

// Authenticated request (pre-request script)
const token = getContext('authToken');
setHeader('Authorization', `Bearer ${token}`);

Create collections for different environments:

• Dev: apiUrl = https://dev-api.example.com
• Staging: apiUrl = https://staging-api.example.com
• Production: apiUrl = https://api.example.com

// Request 1: Create user (post-request)
const userId = getResponseValue('id');
setContext('userId', userId);

// Request 2: Get user (pre-request)
const userId = getContext('userId');
setUrl(`${getVariable('apiUrl')}/users/${userId}`);

• Chrome (recommended)
• Firefox
• Safari
• Edge

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with React
• UI components from Material-UI
• Syntax highlighting by highlight.js

For issues, questions, or suggestions, please open an issue on GitHub.