Network panel, response body, and timing waterfall sit beside the route they hit. No browser console, no curl, no second screen.
Response body
{"id":"ord_3PqA2x9YxK","status":"paid","amount":4200,"currency":"USD","captured":true,"customer":"lisa@beste.dev"}// Configure the API clientimport { 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;
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.
showcase17
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.
showcase19
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.
showcase18
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.
showcase23
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.