{"id":31646466,"url":"https://github.com/abdallahsaber065/openapi-tester-frontend","last_synced_at":"2026-05-09T03:32:02.915Z","repository":{"id":311918895,"uuid":"1045587070","full_name":"abdallahsaber065/openapi-tester-frontend","owner":"abdallahsaber065","description":"A clean, user-friendly frontend application for testing any OpenAPI-compliant API dynamically. This tool loads your API specification from OpenAPI JSON files or URLs and provides an intuitive interface for testing all endpoints without needing external tools like Postman.","archived":false,"fork":false,"pushed_at":"2025-09-15T12:02:30.000Z","size":224,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-07T05:57:46.340Z","etag":null,"topics":["api","api-testing","fastapi","openapi","rest-api","restful-api","test"],"latest_commit_sha":null,"homepage":"https://openapi-tester-frontend.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abdallahsaber065.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-27T12:13:44.000Z","updated_at":"2025-09-15T12:02:34.000Z","dependencies_parsed_at":"2025-08-27T21:38:05.872Z","dependency_job_id":"a960265e-4ad0-4e31-a581-7e33cc6a8ed9","html_url":"https://github.com/abdallahsaber065/openapi-tester-frontend","commit_stats":null,"previous_names":["abdallahsaber065/openapi-tester-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abdallahsaber065/openapi-tester-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdallahsaber065%2Fopenapi-tester-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdallahsaber065%2Fopenapi-tester-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdallahsaber065%2Fopenapi-tester-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdallahsaber065%2Fopenapi-tester-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abdallahsaber065","download_url":"https://codeload.github.com/abdallahsaber065/openapi-tester-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdallahsaber065%2Fopenapi-tester-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32805899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-testing","fastapi","openapi","rest-api","restful-api","test"],"created_at":"2025-10-07T05:50:52.027Z","updated_at":"2026-05-09T03:32:02.906Z","avatar_url":"https://github.com/abdallahsaber065.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenAPI Tester\n\nA clean, user-friendly frontend application for testing any OpenAPI-compliant API dynamically. This tool loads your API specification from OpenAPI JSON files or URLs and provides an intuitive interface for testing all endpoints without needing external tools like Postman.\n\n## 🚀 Live Demo\n\nTry the application at: **\u003chttps://openapi-tester-frontend.netlify.app\u003e**\n\n\u003e **⚠️ For full features and data security, we strongly recommend running locally!**  \n\u003e The live demo is great for quick testing, but running locally ensures:\n\u003e\n\u003e - Complete feature access without any limitations\n\u003e - Enhanced data security (your API keys and tokens never leave your machine)\n\u003e - Better performance and reliability\n\u003e - Full control over your testing environment\n\n## 💡 Why This Project?\n\nWhile Swagger UI provides excellent API documentation (and we love it for that!), its testing interface can feel clunky and outdated. This project was born from the frustration of switching between documentation and external tools like Postman for actual API testing.\n\n**OpenAPI Tester** bridges this gap by offering:\n\n- A modern, intuitive testing interface that doesn't sacrifice functionality\n- Seamless integration with any OpenAPI specification\n- Better user experience for developers who need to test APIs frequently\n- All the power of Swagger's documentation with a superior testing experience\n\nThink of it as \"Swagger UI, but designed specifically for testing\" - keeping the comprehensive API coverage while dramatically improving the user experience.\n\n## Features\n\n- **Multiple Input Methods**: Load OpenAPI specs from URLs, file uploads, or direct JSON input\n- **Dynamic API Loading**: Automatically fetches and parses any OpenAPI 3.0+ specification\n- **Organized Sidebar**: Collapsible sections grouped by API tags, ordered as in your spec\n- **Interactive Testing**: Easy-to-use forms for testing endpoints with different parameters\n- **Comprehensive Authentication**: Support for all OpenAPI security schemes:\n  - **API Key**: Header, query parameter, or cookie-based authentication\n  - **HTTP Authentication**: Basic, Bearer (JWT), and Digest authentication\n  - **OAuth 2.0**: All flows (Authorization Code, Implicit, Password, Client Credentials)\n  - **OpenID Connect**: Full OIDC support with discovery\n- **Smart Authentication UI**: Authorize button with modal for configuring all auth methods\n- **Request \u0026 Response History**: Each endpoint remembers its last 10 requests and responses\n- **Request Reuse**: Click to reuse any previous request from history\n- **Real-time Response Display**: Clean JSON formatting with syntax highlighting for body and headers\n- **Per-Endpoint Persistence**: Each endpoint maintains its own request/response history\n- **Local Data Storage**: All user data (auth tokens, history) stored locally in browser\n- **Auto-Detection**: Automatically extracts API base URL from OpenAPI specifications\n- **Responsive Design**: Modern, clean UI that works on different screen sizes\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- npm or yarn\n\n### Installation\n\n1. Clone or download this repository:\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd openapi-tester\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\n4. Open your browser to `http://localhost:3000`\n\n### Getting Started\n\nOnce the application loads, you have three ways to load your OpenAPI specification:\n\n1. **URL Input**: Enter the URL to your OpenAPI JSON file (e.g., `https://api.example.com/openapi.json`)\n2. **File Upload**: Upload a local OpenAPI JSON file from your computer\n3. **Direct Input**: Paste your OpenAPI JSON directly into the text area\n\nThe application will automatically parse your specification and generate a testing interface.\n\n## Usage\n\n### 1. Loading Your API\n\n#### Method 1: URL Input\n\n1. Click \"Load from URL\"\n2. Enter your OpenAPI JSON URL (e.g., `https://petstore.swagger.io/v2/swagger.json`)\n3. The base API URL will be auto-detected, but you can modify it if needed\n4. Click \"Load Specification\"\n\n#### Method 2: File Upload\n\n1. Click \"Upload File\"\n2. Select your OpenAPI JSON file from your computer\n3. The API base URL will be auto-detected from the file (if available) or you can enter it manually\n4. Click \"Load Specification\"\n\n#### Method 3: Direct Input\n\n1. Click \"Direct Input\"\n2. Paste your OpenAPI JSON content\n3. Enter your API base URL\n4. Click \"Load Specification\"\n\n### 2. Authentication\n\nThe application automatically detects and supports all authentication methods defined in your OpenAPI specification:\n\n#### Modern Authentication (Recommended)\n\n1. Click the **\"Authorize\"** button in the header (appears when security schemes are detected)\n2. Select the authentication method you want to configure:\n   - **API Key**: Enter your API key (automatically placed in correct location: header, query, or cookie)\n   - **HTTP Basic**: Enter username and password\n   - **HTTP Bearer**: Enter your JWT or bearer token\n   - **OAuth 2.0**: Enter your access token (view available flows and scopes)\n   - **OpenID Connect**: Enter your access token from OIDC provider\n3. Click \"Save Authentication\"\n\n#### Legacy Token Support\n\nFor APIs without defined security schemes, use the legacy token option:\n\n1. Click the \"Auth Token\" button in the header (only appears when no modern auth is detected)\n2. Enter your JWT access token\n3. Click \"Save Token\"\n\nAll authentication data is stored locally in your browser and automatically applied to requests that require it.\n\n### 3. Testing Endpoints\n\n1. **Select an Endpoint**: Browse the sidebar and click on any endpoint you want to test\n2. **Fill Parameters**: Enter required path parameters, query parameters, and request body\n3. **Send Request**: Click the \"Send Request\" button\n4. **View Response**: See the formatted response with status code, headers, and body\n5. **View History**: Check the \"History\" tab to see all previous requests for this endpoint\n6. **Reuse Requests**: Click \"Reuse\" on any historical request to load it back into the form\n\n### 4. API Documentation\n\nSwitch to the \"Documentation\" tab to view detailed information about each endpoint, including:\n\n- Parameters and their types\n- Required vs optional fields\n- Response schemas\n- Authentication requirements\n- Security schemes and scopes\n\n## Project Structure\n\n```bash\nopenapi-tester/\n├── public/\n│   └── index.html          # HTML template\n├── src/\n│   ├── components/         # React components\n│   │   ├── Header.js       # Top navigation with load API and auth\n│   │   ├── AuthModal.js    # Authentication configuration modal\n│   │   ├── Sidebar.js      # Endpoint navigation\n│   │   ├── MainContent.js  # Main testing interface\n│   │   └── RequestForm.js  # Form for endpoint testing\n│   ├── services/\n│   │   ├── api.js          # API communication layer\n│   │   └── auth.js         # Authentication service\n│   ├── App.js              # Main application component\n│   └── index.js            # Application entry point\n├── package.json            # Dependencies and scripts\n└── README.md              # This file\n```\n\n## Configuration\n\n### Environment Variables\n\nYou can set default values by creating a `.env` file:\n\n```env\nREACT_APP_DEFAULT_API_URL=https://api.example.com\nREACT_APP_DEFAULT_OPENAPI_URL=https://api.example.com/openapi.json\n```\n\n### Supported OpenAPI Features\n\nThis tool supports OpenAPI 3.0+ specifications and includes:\n\n1. **All HTTP Methods**: GET, POST, PUT, PATCH, DELETE, etc.\n2. **Parameter Types**: Path, query, header, and request body parameters\n3. **Complete Authentication Support**:\n   - API Key (header, query, cookie)\n   - HTTP (Basic, Bearer, Digest)\n   - OAuth 2.0 (all flows with scope support)\n   - OpenID Connect\n4. **Schema Validation**: Automatic form generation based on your schemas\n5. **Multiple Content Types**: JSON, form data, and other content types\n6. **Response Schemas**: Formatted display of response data and headers\n7. **Security Requirements**: Per-operation and global security handling\n\n## Features in Detail\n\n### Dynamic Schema Loading\n\nThe app intelligently reads your OpenAPI specification and:\n\n- Groups endpoints by tags (e.g., \"Users\", \"Orders\", \"Authentication\", etc.)\n- Maintains the original order of endpoints as defined in your specification\n- Generates appropriate form fields for each parameter type\n- Provides example values based on your schema definitions\n- Handles different content types and authentication requirements\n\n### Smart Form Generation\n\nFor each endpoint, the app automatically:\n\n- Creates input fields for path parameters (e.g., `{id}` in URLs)\n- Adds form fields for query parameters\n- Generates JSON editors for request bodies\n- Validates required vs optional fields\n- Provides helpful descriptions and examples\n\n### Response Handling\n\nResponses are displayed with:\n\n- Color-coded status indicators (green for success, red for errors)\n- Formatted JSON with syntax highlighting\n- Response headers information\n- Error details for debugging\n\n## Development\n\n### Adding New Features\n\nThe app is built with modularity in mind:\n\n- Add new components in the `src/components` directory\n- Extend API functionality in `src/services/api.js`\n- Modify styling in the corresponding CSS files\n\n### Customization\n\nYou can easily customize:\n\n- **Colors and Themes**: Edit the CSS files to match your brand\n- **Layout**: Modify the component structure as needed\n- **Features**: Add new tabs, views, or functionality\n\n## Troubleshooting\n\n### Common Issues\n\n1. **\"Failed to load API specification\"**\n   - Verify the OpenAPI JSON URL is accessible and returns valid JSON\n   - Check for CORS issues if loading from a different domain\n   - Ensure the OpenAPI specification follows the 3.0+ format\n\n2. **\"Invalid OpenAPI specification\"**\n   - Validate your OpenAPI file using tools like [Swagger Editor](https://editor.swagger.io/)\n   - Check that required fields like `openapi`, `info`, and `paths` are present\n   - Ensure the JSON is properly formatted\n\n3. **Authentication not working**\n   - Use the \"Authorize\" button to configure authentication properly\n   - Verify you're using the correct authentication method as defined in your OpenAPI spec\n   - For API Keys: ensure the key is valid and placed in the correct location (header/query/cookie)\n   - For OAuth 2.0: ensure your access token is valid and has the required scopes\n   - Check that tokens haven't expired\n   - Ensure the API base URL is correct\n\n4. **Request failures**\n   - Check the browser's network tab for detailed error information\n   - Verify the API base URL matches your actual API endpoint\n   - Ensure all required parameters are provided\n   - Check for CORS configuration on your API server\n\n### Development Tips\n\n- Use the browser's developer tools to debug network requests\n- Check the console for any JavaScript errors\n- The app includes detailed error logging for API interactions\n\n## Contributing\n\nTo contribute to this project:\n\n1. Make your changes in the appropriate component files\n2. Test thoroughly with your backend API\n3. Update this README if you add new features\n4. Follow the existing code style and patterns\n\n## Technology Stack\n\n- **React 18**: Modern React with hooks\n- **React Hook Form**: Form handling and validation\n- **Axios**: HTTP client for API requests\n- **React Syntax Highlighter**: JSON response formatting\n- **React Hot Toast**: User notifications\n- **React Icons**: Icon components\n\nThis frontend provides a complete solution for testing any OpenAPI-compliant API without needing external tools like Postman. It's specifically designed to work with any API that provides an OpenAPI specification, making it a universal API testing tool.\n\n## Data Privacy \u0026 Security\n\n- **Local Storage Only**: All user data (authentication credentials, request history) is stored locally in your browser\n- **No Server Storage**: The deployed application doesn't store any user data on the server\n- **Multi-User Safe**: Each user's data is completely isolated in their own browser\n- **GDPR Compliant**: No personal data is processed or stored on the server side\n- **Secure by Design**: API keys and tokens never leave your browser\n\n## Examples\n\n### Popular APIs you can test\n\n- **Swagger Petstore**: `https://petstore.swagger.io/v2/swagger.json`\n- **JSONPlaceholder**: `https://jsonplaceholder.typicode.com/` (create your own OpenAPI spec)\n- **Any API with OpenAPI documentation**\n\n### Sample OpenAPI URLs to try\n\n```bash\nhttps://petstore.swagger.io/v2/swagger.json\nhttps://api.github.com/openapi.json (if available)\nhttps://httpbin.org/spec.json\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahsaber065%2Fopenapi-tester-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdallahsaber065%2Fopenapi-tester-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdallahsaber065%2Fopenapi-tester-frontend/lists"}