API Inspector With Code Editor

DevTools-grade

Inspect every call without leaving your code

Network panel, response body, and timing waterfall sit beside the route they hit. No browser console, no curl, no second screen.

api.tsclient.config.tstokens.css
POST/api/orders200 OK
HeadersBodyPreview

Response body

{
"id":"ord_3PqA2x9YxK",
"status":"paid",
"amount":4200,
"currency":"USD",
"captured":true,
"customer":"lisa@beste.dev"
}
200
142ms·3.2 kB
// Configure the API client
import { client } from "@beste/client";
// Auth via JWT cookie
const api = await client.create({ base: "/api/v1" });
// Type-safe routes from your schema
const orders = api.r("/orders");
const inventory = api.r("/inventory");
// Wire idempotency keys
orders.idempotent(true);
export default api;
About this block

API Inspector With Code EditorPRO

Browser-chrome card pairing a DevTools-style API inspector on the left with a syntax-highlighted code editor on the right — method badge, response body, timing footer. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.

PRO

showcase19

Code Editor With PR Review

Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.

PRO

showcase18

Code Editor With Live Logs

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

PRO

showcase23

Component Preview With Code Editor

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.

PRO

showcase15

Code Editor With Live Activity Feed

Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.

PRO

showcase22

Database Query With Code Editor

Browser-chrome card pairing a typed query result table on the left with a syntax-highlighted code editor on the right — sortable columns, status-toned cells, row count footer. Every label is editable; no media props required.