✦ Preact OpenAPI Contract Studio

A desktop-first OpenAPI editor for YAML parsing, endpoint browsing, lint checks, and mock response preview.

---

✨ Highlights

• YAML Parsing: Uses yaml to parse editable OpenAPI 3.1 documents.
• Import & Validate: Loads YAML files and records validation status from contract checks.
• Endpoint Tree: Lists operations by method, path, summary, and response count.
• Method Filters & cURL: Filters operations by HTTP method and copies a ready cURL command.
• Contract Lint: Checks for version, info title, server URL, and operation responses.
• Mock Preview: Generates a lightweight JSON payload for the selected operation.
• Desktop-First Contract UI: Three-pane editor layout with mobile stacking and scrollable panes.

🧱 Project Structure

src/
|-- main.tsx
|-- app.tsx           # YAML editor, endpoint explorer, lint panel, mock response
`-- index.css

🛠️ Tech Stack

• Preact 10 with Vite 8
• TypeScript 6
• Tailwind CSS 4
• lucide-preact
• yaml

📦 Included Sample Data

• public/sample-openapi.yaml includes a complete OpenAPI 3.1 contract.
• Use the in-app Load sample action to repopulate the YAML editor and endpoint explorer.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• This is a desktop-first tool because contract editors benefit from simultaneous code, navigation, and inspector panels.
• The current lint checks are intentionally lightweight; integrate Spectral for production-grade OpenAPI rules.
• Mock responses are deterministic placeholders and can be replaced with schema-driven generation.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a Vite-ready vercel.json with SPA rewrites.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.