@websublime/vite-plugin-open-api-devtools

Vue-based DevTools SPA for debugging and inspecting the OpenAPI mock server.

Features

- Routes Page - Browse all available API endpoints from your OpenAPI spec
- Timeline Page - Monitor request/response traffic in real-time
- Models Page - View and edit in-memory store data
- Simulator Page - Simulate errors and slow responses for testing

Installation

``bash
pnpm add @websublime/vite-plugin-open-api-devtools
`

Usage

The DevTools SPA is typically served automatically by the Vite plugin. However, you can also use it standalone for development:

$3

`bash


Start the dev server

pnpm dev

Build for production

pnpm build

Type check

pnpm typecheck
`

$3

`typescript
import { bootstrap } from '@websublime/vite-plugin-open-api-devtools';
import '@websublime/vite-plugin-open-api-devtools/style.css';

// Mount the DevTools SPA
bootstrap();
`

Architecture

`text
devtools-client/
├── src/
│ ├── App.vue # Main layout with tabs
│ ├── main.ts # Entry point
│ ├── router.ts # Vue Router setup
│ │
│ ├── pages/
│ │ ├── RoutesPage.vue # Endpoint listing
│ │ ├── TimelinePage.vue # Request/response log
│ │ ├── ModelsPage.vue # Store data editor
│ │ └── SimulatorPage.vue# Error simulation
│ │
│ ├── components/ # Reusable UI components
│ │
│ ├── composables/
│ │ ├── useWebSocket.ts # WebSocket connection (TODO)
│ │ └── useTheme.ts # Dark/light mode
│ │
│ ├── stores/ # Pinia stores
│ │
│ └── assets/
│ └── main.css # Global styles with OpenProps
`

Tech Stack

- Vue 3 - Composition API with