OpenSpec is a high-performance, professional-grade web application designed to parse, validate, and explore OpenAPI (3.x) and Swagger (2.0) specifications with precision.
Built for QA engineers, developers, and API consumers, OpenSpec transforms complex API definitions into a readable, searchable, and interactive dashboard in seconds.
🚀 Live Demo: openspec.vercel.app
- Tag-Based Grouping: Automatically organizes hundreds of endpoints into logical, collapsible folder categories (e.g.,
repos,issues,users). - Global Search: Instantly filter endpoints and schemas by path, method, name, or tag.
- Recursive Schema Tables: Professional property rendering (Name, Type, Required, Description) consistent with industry standards established by tools like Redoc and Swagger UI.
- Debug Console: Real-time logging of the fetch, parse, and dereference lifecycle.
- Performance Metrics: Step-by-step timing (+Xms) to analyze the scale and complexity of large specifications.
- Contract Validation: Automated Spec Quality Report (Linter) that audits specifications for missing documentation, safety gaps (missing error responses), and industry best practices.
- Download & Export: Export full quality findings as a CSV report for integration with Jira, Confluence, or internal audit documentation.
- Precision Auditing: Clearly highlights required fields, enums, and nested data structures with a real-time filtered issue list.
During validation of the official Petstore Swagger 2.0 spec, OpenSpec identified missing success responses on core endpoints. For example, POST /pet defines only a 405 response, and DELETE /pet/{petId} defines only 400 and 404. No success response of any kind is present in the underlying specification.
Standard documentation viewers silently paper over these gaps. OpenSpec surfaces them as contract errors, providing the evidence engineers need for complete test coverage and accurate code generation.
- YAML & JSON Support: Native handling of both formats via robust internal conversion.
- CORS-Safe Proxying: Server-side proxying ensures you can analyze specifications from any domain without CORS errors.
- Industry Examples: One-click analysis of massive specs like Cloudflare, GitHub, Stripe, and OpenAI.
OpenSpec features a Glassmorphism UI design optimized for modern browsers.
- Vibrant Dark Mode: Sleek, high-contrast interface for reduced eye strain.
- Micro-Animations: Powered by
framer-motionfor smooth, interactive transitions. - Responsive Layout: Designed to be fully functional on desktops, tablets, and mobile devices.
- Framework: Next.js (App Router)
- Styling: Vanilla CSS Modules (Glassmorphism & CSS Variables)
- Icons: Lucide React
- Animations: Framer Motion
- Spec Parsing: @readme/openapi-parser & js-yaml
- Node.js 18.x or later
- npm or yarn
- Clone the repository:
git clone https://github.com/joshchamo/OpenSpec.git
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser.
This project is licensed under the MIT License.
Developed with ❤️ for the QA & Developer Community.