Blazing Gopher - OpenAPI Viewer

A modern, React-based OpenAPI specification viewer with support for OpenAPI 3.0, 3.1, and 3.2.

Features

Core Capabilities

• ✅ Multi-version Support: Automatic detection and rendering of OpenAPI 3.0.x, 3.1.x, and 3.2.x specifications
• ✅ Visual Version Badges: Color-coded badges (Blue for 3.0, Purple for 3.1, Green for 3.2)
• ✅ File Upload: Drag-and-drop support for JSON and YAML files
• ✅ Search & Filter: Real-time search across endpoints with method filtering
• ✅ Schema Viewer: Interactive schema visualization with type arrays and nullable support
• ✅ Colorized Methods: Distinct colors for all HTTP methods including QUERY (3.2)

OpenAPI 3.2 Support (Latest)

• ✅ $self Field: Base URI resolution for multi-document OADs
• ✅ Named Servers: Server identification with name field
• ✅ QUERY Method: Support for draft-ietf-httpbis-safe-method-w-body-08
• ✅ Tag Hierarchies: Organize tags with kind, parent, and summary
• ✅ Security Deprecation: Mark security schemes as deprecated
• ✅ OAuth2 Device Flow: Device authorization grant (RFC8628)
• ✅ OAuth2 Metadata: OAuth2 authorization server metadata URLs (RFC8414)
• ✅ Querystring Parameters: New parameter location for structured queries
• ✅ Mutual TLS: Explicit mutualTLS security scheme type

OpenAPI 3.1 Support

• ✅ Type Arrays: ["string", "null"] for nullable types
• ✅ Webhooks: Event-driven API support
• ✅ JSON Schema 2020-12: Full JSON Schema compatibility
• ✅ Info Summary: Additional summary field in API info
• ✅ SPDX Identifiers: License identification with SPDX IDs

OpenAPI 3.0 Support

• ✅ Complete 3.0 Compatibility: Full support for OpenAPI 3.0.x specifications

Tech Stack

• React 19.1.1 - Latest React with concurrent features
• TypeScript 5.9.3 - Strict type checking
• Vite 7.1.7 - Lightning-fast build tool with HMR
• Tailwind CSS - Utility-first styling
• pnpm - Fast, disk-efficient package manager

Getting Started

Prerequisites

• Node.js 18+
• pnpm (install via npm install -g pnpm)

Installation

pnpm install

Development

pnpm dev

Starts the development server on http://localhost:5173

Build

pnpm build

Creates optimized production build in dist/

Preview

pnpm preview

Preview the production build locally

Lint

pnpm lint

Run ESLint to check code quality

Usage

1. Start the app: Run pnpm dev
2. Upload a spec: Drag-and-drop an OpenAPI JSON/YAML file or click "Choose File"
3. Browse: View API info, search endpoints, and explore schemas
4. Version detection: The app automatically detects 3.0, 3.1, or 3.2 and displays the appropriate badge

Sample Files

Try these sample specifications in public/samples/:

• petstore.json - OpenAPI 3.0 example
• petstore-3.2.json - OpenAPI 3.2 example with all new features

Documentation

• OpenAPI 3.2 Support Guide - Comprehensive 3.2 feature documentation
• Version Comparison - Visual guide comparing 3.0, 3.1, and 3.2
• HTTP Method Colors - Color coding reference

Project Structure

src/
├── components/
│   ├── api-info/          # API information display
│   ├── common/            # Reusable components (badges, search, uploader)
│   ├── endpoint-list/     # Endpoint rendering
│   └── schema-viewer/     # Schema visualization
├── context/               # React context (OpenAPI state)
├── hooks/                 # Custom hooks (parser)
├── lib/                   # Core libraries (validator, YAML parser)
├── types/                 # TypeScript definitions
└── utils/                 # Helper functions

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);