In-Browser Mock Server

<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>

<!-- Enable the built-in mock server with a single attribute -->
<rapi-doc
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  mock-server="true"
  mock-server-delay="300"
  mock-server-log="true"
  theme="dark"
> </rapi-doc>

<!-- Cycle through 200, 429, and 500 to test retry logic and banners -->
<rapi-doc
  spec-url="/specs/reqres.yaml"
  mock-server="true"
  mock-server-status-code="200, 429, 500"
  mock-server-status-strategy="cycle"
  mock-server-delay="400"
> </rapi-doc>

// src/App.jsx - Seamless frontend prototyping without waiting for backend
import React, { useEffect, useState } from 'react';

export default function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Intercepted in-page by RapiDoc! Resolves instantly from OpenAPI spec
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => {
        setUsers(data.data || []);
        setLoading(false);
      });
  }, []);

  if (loading) return <div className="spinner">Simulating network latency...</div>;

  return (
    <div>
      <h2>User Directory (Mocked from OpenAPI)</h2>
      <ul>
        {users.map(u => <li key={u.id}>{u.first_name} {u.last_name} ({u.email})</li>)}
      </ul>
    </div>
  );
}