GraphQL Query Plus Response

GraphQL studio

Author the query, watch the shape land

Type a query on the left, the response shape mirrors back on the right — exactly the fields you asked for, nothing else.

orders.gqlquery
# Pull recent paid orders
query GetOrders($status: String!) {
  orders(status: $status, limit: 3) {
    id
    customer {
      email
      name
    }
    amount
    status
    createdAt
  }
}
response.json200 ok
// Mirrors the requested shape
{
  "data": {
    "orders": [
      {
        "id": "ord_3PqA",
        "customer": {
          "email": "lisa@beste.dev",
          "name": "Lisa Park"
        },
        "amount": 4200,
        "status": "paid"
      }
    ]
  }
}
138ms·1 of 247 records
412 B
About this block

GraphQL Query Plus ResponsePRO

Browser-chrome card pairing two minimal code panes — GraphQL query on the left, mirrored JSON response on the right. Monochrome syntax with muted comments and a timing footer. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
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.

PRO

showcase34

Polyglot Code Comparison

Browser-chrome card pairing two minimal code panes — same logic in two languages (TypeScript and Python by default). Monochrome syntax with muted comments and language badges. Every label is editable; no media props required.

PRO

showcase31

TypeScript Types Plus Usage

Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required.

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

showcase29

AI Workspace With Streaming Response

Browser-chrome card rendering an AI prompt and a structured response — markdown blocks (headings, paragraphs, lists, quotes, code), citation list, copy/regenerate/apply footer. Every label is editable; no media props required.

PRO

showcase35

Migration Before And After

Browser-chrome card pairing a before/after code migration — eyebrow + title + description above each pane, monochrome syntax, and an apply-migration footer with diff summary. Every label is editable; no media props required.