API playgroundPro

• Endpoint list
• Headers and body editor
• JSON response with status and timing
• cURL snippet

• API reference and developer portals.

• Production consoles that change data without confirmation.

Import it from @/components/blocks/api-playground after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { ApiPlayground } from "@/components/blocks/api-playground";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ApiPlayground />
    </main>
  );
}

• Every field is labelled; the response is announced when it arrives.

• The response panel fades in with its status.

• Request and response stack below 1024px.

• Responses are simulated locally; nothing is sent.

• Replace the simulated fetch with a proxy route so keys stay on the server.