OpenAPI & Swagger Viewer
Interactive OpenAPI 3.x & Swagger 2.0 spec viewer with cURL and Fetch code generators.
OpenAPI / Swagger Spec (JSON or YAML)
Petstore API
v1.0.0A sample Petstore API spec for demonstrating OpenAPI / Swagger rendering
https://petstore.swagger.io/v2What is OpenAPI & Swagger Viewer?
The OpenAPI & Swagger Spec Viewer lets you paste any OpenAPI 3.0, 3.1, or Swagger 2.0 specification in JSON or YAML format and instantly transforms it into an interactive, visual API documentation interface. Endpoints are grouped by tag, tagged with HTTP method badges (GET, POST, PUT, DELETE, PATCH), and expand into parameter tables, request body definitions, and per-status-code response schemas. It also surfaces header authentication requirements (Bearer JWT, API Keys, Basic Auth) and provides one-click cURL and JavaScript Fetch code snippet generation for each operation. Under the hood, the parser normalizes both spec dialects into a single internal model — Swagger 2.0's `host`/`basePath`/`schemes` and `securityDefinitions`/`definitions` are mapped onto the same shape as OpenAPI 3.x `servers` and `components.securitySchemes`/`schemas` — so the rendered UI looks identical no matter which version you paste in. Referenced schema models get their own expandable panel separate from the endpoint list, and untagged operations are automatically bucketed under a 'Default' group rather than being dropped.
How to use OpenAPI & Swagger Viewer
- Paste your OpenAPI 3.x or Swagger 2.0 specification (JSON or YAML) into the left panel editor.
- The interactive viewer on the right parses your spec instantly and renders all API endpoints.
- Use the method filters (GET, POST, PUT, etc.) or search bar to filter endpoints by path, summary, or tag.
- Click any endpoint accordion to view required parameters, request bodies, and response schemas.
- Click 'cURL' or 'Fetch' to copy ready-to-run terminal or browser request code snippets.
Examples
Inspecting an OpenAPI 3.0 spec
Input
openapi: 3.0.3 info: title: My API version: 1.0.0 paths: /users: get: summary: List Users
Output
Interactive documentation showing GET /users endpoint with status codes and parameter schemas
Generating cURL for a POST endpoint
Input
openapi: 3.0.0 info: title: Orders API version: 1.0.0 paths: /orders: post: summary: Create Order
Output
One-click copy cURL command with JSON payload headers and authorization Bearer token
Expanding a referenced schema model
Input
components: schemas: Pet: type: object required: [id, name] properties: id: { type: integer } name: { type: string }
Output
Adds a 'Pet' entry to the Schemas / Models panel showing its required fields and property types, expandable independently of any single endpoint.
Common mistakes
- Pasting invalid YAML or JSON with syntax errors — ensure your document is valid before viewing.
- Forgetting to define securitySchemes in components — without security definitions, default bearer tokens are generated for authorization.
- Expecting real network requests to execute inside the viewer — this tool is designed for specification rendering and code snippet generation.
- Trusting the generated cURL/Fetch request bodies as realistic sample payloads — they're built directly from your schema definition (including any unresolved `$ref` placeholders), not fake data, so swap in real values before running the request.
- Leaving operations without a `tags` array — they're automatically grouped under a generic 'Default' tag, which can make a large multi-resource spec harder to scan.
Why use this tool
- Runs entirely client-side — your API contracts, internal endpoints, and tokens never leave the browser.
- Generates ready-to-run cURL and Fetch snippets per operation instead of assembling headers and a request body by hand from the spec.
- Supports both OpenAPI 3.x and Swagger 2.0 in JSON and YAML.
- Normalizes Swagger 2.0's `securityDefinitions`/`definitions` and OpenAPI 3.x `components.securitySchemes`/`schemas` into one consistent UI, so you don't have to remember which version's field names to look for.
- A resizable, collapsible editor column plus a dedicated focus mode make it usable for both a quick lookup and an extended documentation review session.