Quiet API Reference

Devtools96: Quiet API Reference

An endpoint list beside a code panel: pick a call on the left and its description, request and response swap in on the right with a soft blur.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/devtools96?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/devtools96?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/devtools96.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports devtools96Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Devtools96, devtools96Demo } from "@/components/beste/block/devtools96";

export default function Page() {
  return <Devtools96 {...devtools96Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Devtools96 } from "@/components/beste/block/devtools96";

export default function Page() {
  return (
    <Devtools96
      eyebrow="API reference"
      heading="Four calls, one small surface."
      description="Everything the editor can do, the API can do."
      buttons={[{ label: "Get an API key", href: "/keys", tone: "outline" }]}
      labels={{ request: "Request", response: "Response", copy: "Copy request", copied: "Copied" }}
      endpoints={[
        {
          method: "GET",
          path: "/v1/sections",
          title: "Search sections",
          description: "Search the library by meaning.",
          request: "curl https://api.example.com/v1/sections?q=pricing",
          response: '{ "results": [] }',
        },
      ]}
    />
  );
}

Props

type Endpoint = {
  method: "GET" | "POST" | "PUT" | "DELETE";
  path: string;
  title: string;
  description: string;
  request: string;
  response: string;
};

type Labels = {
  request: string;
  response: string;
  copy: string;
  copied: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Request and response are plain strings holding real newlines, not arrays of lines, so you can paste a curl command in with its backslashes intact.
• Both are rendered in pre inside an overflow-x-auto wrapper, so a long line scrolls within the panel rather than widening the page.
• The panel swaps with AnimatePresence mode="wait", meaning the outgoing call finishes leaving before the next one arrives and the two never overlap.
• The method column is fixed width so GET and DELETE leave the paths aligned down the list.
• The selected row is marked with aria-current and a dot that fades in, while hovering a row shows the same dot at partial opacity as a hint.
• Copying takes the request only, since the response is output rather than something you would paste anywhere.
• The list keeps its own selection in state and does not touch the URL, so several references can sit on one page without fighting over the hash.