REST API Client

A simple, modern web-based REST API client built with HTML, CSS, and JavaScript. Test your APIs with an intuitive form-based interface and powerful features for managing requests and responses.

Features

Request Management

• Multiple HTTP Methods: Support for GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS
• Query Parameters: Easily add and remove query parameters with a dynamic key-value interface
• Custom Headers: Add custom request headers as needed
• Request Body: Support for request bodies (automatically hidden for GET/HEAD/OPTIONS methods)
• Automatic URL Updates: Query parameters automatically update the URL field in real-time
• Smart URL Parsing: Paste URLs with query parameters and they're automatically extracted into the form

Response Display

• Organized Response View:
  • Separate containers for status code, headers, and body
  • Color-coded status badges (green for 2xx, yellow for 3xx, red for 4xx, purple for 5xx)
  • Formatted JSON responses
  • Clean, readable header display
• Attachment Handling:
  • Automatic detection of file attachments and binary content
  • Download button for attachments with file information (filename, size, content type)
  • Smart handling of Content-Disposition headers
• Save Response Body: Download any response body as a file with automatic file type detection

Request Persistence

• Save Requests: Save frequently used requests with custom names
• Load Requests: Quickly load saved requests with a single click
• Update Requests: Modify and update existing saved requests
• Rename Requests: Change the name of saved requests
• Delete Requests: Remove requests you no longer need
• Local Storage: All saved requests persist in browser localStorage

User Interface

• Modern Design: Beautiful gradient design with a responsive layout
• Real-time Feedback: Loading states and error handling
• Intuitive Controls: Easy-to-use buttons and form fields
• Keyboard Support: Press Enter to save requests quickly

Usage

Basic Usage

1. Open index.html in your web browser
2. Select the HTTP method from the dropdown
3. Enter the API endpoint URL
4. Add query parameters (if needed) - they'll automatically update the URL
5. Add custom headers (if needed)
6. Enter the request body (for POST/PUT/PATCH requests)
7. Click "Send Request" to make the API call
8. View the response in the organized sections below

Saving Requests

1. Fill out your request (method, URL, parameters, headers, body)
2. Enter a name in the "Enter request name to save..." field
3. Click "Save Request" or press Enter
4. Your request is now saved and appears in the saved requests list

Loading Saved Requests

1. Click on any saved request in the list
2. The request loads into the form automatically
3. The request name appears in the save field for easy updating
4. Make any changes and save again to update

Managing Saved Requests

• Rename: Click the ✏️ button next to a saved request
• Delete: Click the 🗑️ button next to a saved request
• Update: Load a request, make changes, and save again

Saving Response Body

1. Make a request and receive a response
2. Click the "💾 Save as File" button next to "Response Body"
3. The file downloads with the appropriate extension (.json, .xml, .txt, etc.)

Working with URLs

• Paste URLs: Paste a URL with query parameters (e.g., https://api.example.com/users?page=1&limit=10) and the parameters are automatically extracted into the form
• Auto-update: As you type query parameters, the URL field updates automatically
• Bidirectional Sync: Changes to the URL or parameters stay in sync

Response Display

The response is displayed in separate, organized containers:

1. Status Code: Shows the HTTP status code with a color-coded badge and status text
2. Response Headers: Lists all response headers in a clean key-value format
3. Attachment Info (if applicable): Shows file details and download button for attachments
4. Response Body: Displays the response body with automatic JSON formatting

Attachment Handling

When a response contains an attachment or binary content:

• The attachment container automatically appears
• Shows filename, content type, and file size
• Provides a download button to save the file
• Handles both explicit attachments (Content-Disposition: attachment) and binary content types

Examples

Making a GET Request

1. Select GET from the method dropdown
2. Enter URL: https://api.example.com/users
3. Add query parameter: page=1
4. Click "Send Request"

Or paste a URL directly:

• Paste: https://api.example.com/users?page=1&limit=10
• Query parameters are automatically extracted!

Making a POST Request

1. Select POST from the method dropdown
2. Enter URL: https://api.example.com/users
3. Add header: Content-Type: application/json
4. Enter body:

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

5. Click "Send Request"
6. Save the request as "Create User" for future use

Saving and Reusing Requests

1. Configure a request (e.g., GET request to fetch users)
2. Enter name: "Get All Users"
3. Click "Save Request"
4. Later, click "Get All Users" in the saved requests list to load it instantly

Downloading Response Data

1. Make a request that returns JSON data
2. Click "💾 Save as File" next to Response Body
3. File downloads as response.json
4. Works with any response type (JSON, XML, HTML, images, PDFs, etc.)

Browser Compatibility

Works in all modern browsers that support:

• ES6+ JavaScript (async/await)
• Fetch API
• CSS Grid and Flexbox
• LocalStorage API

CORS Note

Due to browser CORS (Cross-Origin Resource Sharing) policies, some APIs may block requests from this client. If you encounter CORS errors:

• Use a browser extension that disables CORS (for development only)
• Set up a backend proxy server
• Ensure the API server allows requests from your origin

Data Storage

• Saved Requests: Stored in browser localStorage under the key restClient_savedRequests
• Persistence: All saved requests persist across browser sessions
• Privacy: All data is stored locally in your browser - nothing is sent to external servers

Keyboard Shortcuts

• Enter (in save request field): Save the current request
• Click saved request: Load the request into the form

Tips & Tricks

1. Quick Testing: Paste URLs directly - query parameters are extracted automatically
2. Organize Requests: Use descriptive names when saving requests
3. Update Requests: Load a saved request, modify it, and save again to update
4. Save Responses: Use "Save as File" to keep response data for analysis
5. Attachment Downloads: Binary responses automatically show download options

License

This project is open source and available for personal and commercial use.

Contributing

Feel free to submit issues, fork the repository, and create pull requests for any improvements.