feat(openapi): add OpenAPI / Swagger Viewer tool

[Jagadeesh729]

Summary

Adds an OpenAPI / Swagger Viewer tool to DevToolsHub that allows developers to paste OpenAPI (Swagger) specifications in JSON or YAML format and instantly explore API documentation, endpoints, parameters, request/response schemas, and example requests directly in the browser.

Features

OpenAPI & Swagger Support

• Supports OpenAPI 3.x specifications
• Accepts both JSON and YAML input
• Client-side parsing with no backend required

Interactive Endpoint Explorer

• Lists all API endpoints
• Groups endpoints by tags
• Displays HTTP methods (GET, POST, PUT, PATCH, DELETE)
• Expandable endpoint details

Request & Response Inspection

• View request body schemas
• View response schemas
• Inspect path parameters
• Inspect query parameters
• Inspect header parameters

Recursive Schema Viewer

• Nested object rendering
• Component schema support
• $ref resolution
• Hierarchical schema tree visualization

Developer Productivity Features

• Copy endpoint URLs
• Generate mock cURL commands
• Auto-generate placeholder request bodies from schemas
• One-click copy functionality

UI & Accessibility

• Responsive layout
• Light and dark mode support
• Browser-only implementation
• Consistent with existing DevToolsHub design patterns

---

Files Added / Modified

Feature Component

src/features/openapi-swagger-viewer/OpenApiSwaggerViewer.tsx

Tool Page

src/pages/tools/openapi-swagger-viewer.astro

Tool Registration

src/constants/tools.ts

---

Example Usage

Input

openapi: 3.0.0
info:
  title: User API
  version: 1.0.0

paths:
  /users:
    get:
      summary: Get all users

Output

GET /users

Summary:
Get all users

Generated cURL

curl -X GET https://api.example.com/users

---

Testing

• Verified JSON specification parsing
• Verified YAML specification parsing
• Verified endpoint grouping and rendering
• Verified schema tree rendering
• Verified parameter inspection
• Verified mock cURL generation
• Verified copy-to-clipboard functionality
• Verified responsive behavior
• Verified dark mode compatibility
• Verified browser-only execution
• Verified successful build with npm run build

---

Benefits

• Simplifies OpenAPI and Swagger exploration
• Useful for frontend, backend, QA, and DevOps engineers
• Helps developers understand APIs faster
• Eliminates the need for external viewers for quick inspection
• Complements existing developer-focused tools in DevToolsHub

Closes #118

[vercel]

@Jagadeesh729 is attempting to deploy a commit to the Shabeel TT's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hello, @Jagadeesh729!

Thank you for your contribution to DevToolsHub.

The maintainer has been notified and will review your pull request shortly. If any changes are needed, we will let you know in the comments below.