Swagra

Swagra

Featured Project

Client-Only OpenAPI Workspace

Swagra is a modern, client-only OpenAPI workspace — a friendlier Swagger UI alternative and API client in one. Import an openapi.json, browse endpoints and schemas, run live requests, compare specs, and generate mock data. No backend — everything runs in the browser.

React 19TypeScriptVite 6TailwindCSS v4ZustandOpenAPI
Live Website GitHub Repository
0.2.0
openapi.json
GET
POST
PUT
GET
DELETE
GET
GET
Send200 OK · 42ms
GitHub Stars—Coming soon
Chrome Web Store Users—Coming soon
VSCode Installs—Coming soon
Versionv0.2.0Latest Release
Launched—Coming soon
LicenseMITOpen Source

Project Overview

Swagra is a client-only OpenAPI workspace that ships three ways from a single Vite build — a web app, a Chrome extension, and a VSCode extension — switched by a BUILD_TARGET env var. Import a spec via drag-drop, URL, or paste, and your specs, environments, auth, collections, and history are parsed in-browser and persisted to local storage. Nothing is sent to any developer-owned server.

Problem

Swagger UI is read-only and dated, and full API clients are heavyweight. Developers juggle separate tools to browse specs, run requests, diff versions, and mock data.

Solution

One modern workspace that explores, tests, compares, and mocks OpenAPI specs — fully client-side, with the same codebase delivered as a web app, Chrome extension, and VSCode extension.

Impact

A zero-backend, privacy-first tool: no server to run, no data leaves the browser. Works offline and installs directly into the browser or editor.

Screenshots

Explorer
API Client
Diff
Mock Studio

Video Demo

Demo video coming soon

Key Highlights

  • Three Targets, One Build

    Web app, Chrome extension, and VSCode extension from a single Vite build via BUILD_TARGET.

  • 100% Client-Side

    No backend. Specs, auth, environments, and history persist to local storage only.

  • Cross-Target Transport Seam

    Every request routes through getTransport() so CORS just works on web, Chrome, and VSCode.

  • Postman-Style Environments

    {{var}} substitution, collections/folders, and auto token refresh.

Architecture

Single React 19 + Vite app. A transport seam abstracts outbound requests per target; a zustand store is the single source of truth, persisted to localStorage.

UI (React 19)React / Tailwind v4
Statezustand → localStorage
OpenAPI Engineparse / resolve / example
Transport SeamgetTransport()

Performance

Performance metrics not measured yet

Recent Changelog

  • 0.2.0

    Rebrand + Diff & Mock

    Latest

    Rebranded to Swagra with a new dashboard home screen.

  • 0.1.0

    Initial Release

    Initial release of the Chrome extension with Explorer and API Client.

What People Say

No testimonials yet — check back soon