A beautiful, modern OpenAPI documentation viewer built with Vue 3

Find a file

Leafus ea6665db84 feat: remove hardcoded localhost:3000 for banners		2025-10-03 01:37:37 +02:00
.vscode	feat: add readme and fixup	2025-10-03 00:48:14 +02:00
git-assets	feat: add readme and fixup	2025-10-03 00:48:14 +02:00
public	pawspec v1	2025-10-03 00:33:57 +02:00
src	feat: remove hardcoded localhost:3000 for banners	2025-10-03 01:37:37 +02:00
.gitignore	feat: add readme and fixup	2025-10-03 00:48:14 +02:00
bun.lock	feat: add error handling on app-load and fix NODE_ENV defining	2025-10-03 01:20:52 +02:00
index.html	feat: another thing 😭	2025-10-03 00:55:49 +02:00
package.json	feat: add error handling on app-load and fix NODE_ENV defining	2025-10-03 01:20:52 +02:00
README.md	feat: fix the html formatting in readme	2025-10-03 01:28:11 +02:00
tsconfig.app.json	pawspec v1	2025-10-03 00:33:57 +02:00
tsconfig.json	pawspec v1	2025-10-03 00:33:57 +02:00
tsconfig.node.json	pawspec v1	2025-10-03 00:33:57 +02:00
vite.config.ts	feat: add error handling on app-load and fix NODE_ENV defining	2025-10-03 01:20:52 +02:00

README.md

🐾 PawSpec

A beautiful, modern OpenAPI documentation viewer built with Vue 3

👀 Preview

✨ Features

🎨 Modern UI - Clean, responsive design with Catppuccin Mocha color scheme
🔍 Smart Search - Search through API paths, methods, and groups
🚀 Fast & Lightweight - Built with Vue 3 and Vite for optimal performance
📖 Auto-grouped Paths - Automatically organizes endpoints by path segments
🎯 Interactive Navigation - Collapsible sidebar with smooth scrolling
💡 Syntax Highlighting - Code highlighting with Prism.js
🔗 External Links - Quick access to external documentation
📊 Response Previews - Interactive response schema and example viewers

🚀 Quick Start

Installation

bun install

Development

bun run dev

Build

bun run build

The build will generate a single pawspec.js file that can be embedded in any HTML page.

📖 Usage

Standalone Usage

Include the built JavaScript file in your HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ext.pawlickers.org/pawspec/010/pawspec.js"></script>
  <link rel="stylesheet" href="https://ext.pawlickers.org/pawspec/010/pawspec.css">
  <title>Pawspec</title>
</head>
<body>
  <div id="pawspec"></div>
  <script>
    // From URL
    renderPawspec('/openapi.json', 'api-docs');
    
    // From YAML file
    renderPawspec('./api-spec.yaml', 'api-docs');
    
    // From object
    renderPawspec(myOpenApiSpec, 'pawspec');
  </script>
</body>
</html>

API Reference

window.renderPawspec(specOrUrl, containerId, apiUrl?)

Parameters:

specOrUrl (string | object) - OpenAPI spec object, JSON file URL, or YAML file URL
containerId (string) - ID of the HTML element where PawSpec will be mounted
apiUrl (string, optional) - URL to the API spec file for download link

🎨 Theming

PawSpec uses the Catppuccin Mocha color scheme. Colors are defined as CSS custom properties in src/assets/global.scss:

:root {
  --text: rgb(205, 214, 244);
  --base: rgb(30, 30, 46);
  --mantle: rgb(24, 24, 37);
  --mauve: rgb(203, 166, 247);
  // ... more colors
}