courierStudio
Open demo
Dev-only · runs locally · off in production builds

See every request your app makes

Courier Studio is a visual debugger for your API layer. Inspect live traffic, replay calls, mock backends, inject failures and audit quality — from one tab next to your dev server.

Try the live demo

ONE PLUGIN FOR EVERY STACK

Nine frameworks, one line to connect

@noverax/courier-studio/react
  • Reactvite plugin
  • Vuevite plugin
  • Next.jsinstrumentation
  • Nuxtmodule
  • SvelteKitvite plugin
  • Remixvite plugin
  • Astrointegration
  • Angularmain.ts
  • SolidStartvite plugin

INSPECT

Every call, live, with its full story

Timeline streams requests as they happen — HTTP, SSE and WebSockets. Waterfall shows how they overlap, down to middleware, fetch and validation.

  • Live stream with pause, pinning and filters by status, source and transport.
  • One detail panel for response trees, headers, timing, snippets and errors.
  • Replay and copy any call as cURL, fetch or a typed Courier call.
Open Timeline

EXPLORE

Your whole API surface on one map

Explorer turns courier.config.ts into a live graph of sources, groups and endpoints — colored by latency, errors or traffic.

  • Health at a glance with animated edges wherever traffic is flowing.
  • Heatmaps show which endpoints degrade and when.
  • Playground sends typed requests straight from any endpoint.
Open Explorer

MOCK & CHAOS

Build against a backend that isn’t there yet

Generate mock servers from your schemas, script scenarios like “checkout fails”, then dial in latency and faults to see how the UI copes.

  • Schema-driven mocks with a stateful store you can edit, kept between restarts.
  • Scenarios swap handlers for empty states, auth expiry or payment errors.
  • Chaos presets from Degraded to Down, plus a custom fault mix.
Open Mocks

QUALITY

A code review for your network layer

Audit scores the session across performance, reliability, security and best practices — with the exact fix for each finding.

  • Pattern detection for N+1 calls, duplicates and sequential waterfalls.
  • Middleware profiler shows what every auth, retry and logger step costs.
  • Compare diffs two calls to pinpoint what changed.
Open Audit
Good3 issues to fix before release
High error ratebilling.invoices.list fails on 28% of calls
Retry on non-idempotent mutationretry wraps POST without an idempotency key
N+1 request patternusers.get called 8× after users.list
Mutations are authenticatedAll 9 mutations send a bearer token

And everything around it

Twelve views that share one request model — click a call anywhere and the same detail panel opens.

  • AnalyticsLatency distribution, status breakdown and per-endpoint percentiles for the session.
  • PlaygroundPick any endpoint, edit typed variables with schema hints, send and subscribe.
  • API importGenerate typed sources from OpenAPI or Postman and review spec updates as diffs.
  • MiddlewareTrace the chain for any request and see which step adds the most overhead.
  • CompareSide-by-side diffs of responses, headers, timing and variables.
  • ⌘K everywhereJump to any view, recent request or action from the command palette.

SETUP

Running in under a minute

One command sets it up and connects your app; start Studio, and it opens next to your app.

terminal

By hand: npm install -D @noverax/courier-studio

Pick your package manager
  • Nothing ships to prodThe plugin only runs in development builds.
  • Local by defaultRequests never leave your machine unless you export them.
  • No accountNo sign-up, no telemetry, no cloud dashboard.

Stop guessing what your API layer is doing

Free and open source, part of Courier. It stays out of your production builds.

Set up StudioRead the docs