RestConsole

<caos-rest-console>

compose a request and read its response, with headers and bodies as four tabs

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
method	method, markup only	The request method. Anything unrecognised reads as GET rather than being sent as typed. Reading it back gives The resolved method — always one of the six, never whatever was written on the attribute.	text — one of GET, POST, PUT, PATCH, DELETE, HEAD	GET	Optional
uri	uri, markup only	The address, set in markup. There is a uri getter for reading back what is composed, but no setter — so the page says markup only rather than promising an assignment that would throw. Send is disabled while it is empty, rather than raising an event with nothing in it.	text	none declared	Optional
headers	property only	The request headers as { name, value }[]. A LIST rather than an object, because order is kept and a header list is not a set — the same name can legitimately appear twice.	json	empty list	Optional
body	property only	The request body text. Kept even for a method that carries none, so switching from GET to POST gets it back.	json	none declared	Optional
response	property only	What came back: { status, reason?, headers?, body?, tookMs?, bytes? }. Setting it moves to the response body pane — the thing somebody pressed Send for should not be behind a tab they have to know to press. null clears it.	json	none declared	Optional
pane	pane, markup only	Which of the four panes is showing.	text — one of request-headers, request-body, response-body, response-headers	request-headers	Optional
sending	sending, markup only	A request is in flight: Send reads “Sending…” and raises nothing.	boolean	false	Optional
sendLabel	send-label, markup only	What the send button is called.	text	Send	Optional

Events

Name	When it fires	What it carries
caos-rest-send	Send is pressed, or Enter in the address, or Ctrl/Cmd+Enter in the body. Never while sending, never with an empty address.	{ method, uri, headers, body? } — body is OMITTED for a method that carries none, rather than sent as an empty string. An empty body and no body are different requests.

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
request	{ method, uri, headers, body? }	The request as it stands — exactly what the send event would carry.
carriesBody	boolean	Whether this method has a body at all. Read it to decide what to send.

Styling parts

Part	Which piece of it	When it is there
::part(console)	The outer column.	Always
::part(request-line)	The method, address and send row.	Always
::part(method)	The method dropdown.	Always
::part(uri)	The address box.	Always
::part(send)	The send button.	Always
::part(status)	The response status, timing and size line.	Always
::part(tabs)	The four-pane tab strip.	Always
::part(tab)	One pane tab.	Always
::part(pane)	The showing pane.	Always
::part(headers)	The editable request-header grid.	The request-headers pane is showing.
::part(editor-surface)	The body editing surface.	A body pane is showing and the built-in plain-text engine is mounted.

When to use it

When somebody is exploring an API rather than consuming one — composing a request, reading the whole response, and changing one thing at a time.

What to use instead

• QueryEditor — the question is a QUERY rather than a request — that surface knows about tabs of saved queries.
• CodeEditor — the text is a stored artifact being edited rather than a request being composed.

Accessibility

The status line is a role="status" live region and states the code, the reason, the timing and the size AS WORDS — colour repeats the band, it never carries it, so a 500 is not distinguished from a 200 by red alone. The four panes are a real role="tablist" with a roving tabindex. Every header box carries its own numbered accessible name, so a grid of unlabelled text inputs is not what a screen reader finds. A method that carries no body states that in the pane as readable text rather than hiding the tab or disabling a box.

Examples

A request and what came back

The ordinary case: the status, the timing and the size stated in words above the panes, with the response body showing because that is what Send was pressed for.

{
  "id": "example",
  "section": "A request and what came back",
  "columns": 1,
  "items": [
    {
      "id": "rest_console_1",
      "type": "component",
      "key": "rest_console",
      "inputs": {
        "method": "GET",
        "uri": "/services/data/v1/accounts?limit=2",
        "pane": "response-body",
        "headers": [
          {
            "name": "Accept",
            "value": "application/json"
          }
        ],
        "response": {
          "status": 200,
          "reason": "OK",
          "tookMs": 142,
          "bytes": 318,
          "headers": {
            "content-type": "application/json",
            "x-request-id": "7c1f…"
          },
          "body": "{\n  \"records\": [\n    { \"id\": \"001C\", \"name\": \"Northwind Traders\" }\n  ]\n}"
        }
      }
    }
  ]
}

<caos-rest-console id="restConsole1" method="GET" uri="/services/data/v1/accounts?limit=2" pane="response-body"></caos-rest-console>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const restConsole1 = document.getElementById('restConsole1');
restConsole1.headers = [
  {
    "name": "Accept",
    "value": "application/json"
  }
];
restConsole1.response = {
  "status": 200,
  "reason": "OK",
  "tookMs": 142,
  "bytes": 318,
  "headers": {
    "content-type": "application/json",
    "x-request-id": "7c1f…"
  },
  "body": "{\n  \"records\": [\n    { \"id\": \"001C\", \"name\": \"Northwind Traders\" }\n  ]\n}"
};

A method that carries no body

Said, not hidden and not silently dropped. Anything typed is kept, so switching to POST gets it back — choosing the wrong method first is the ordinary way this happens.

{
  "id": "example",
  "section": "A method that carries no body",
  "columns": 1,
  "items": [
    {
      "id": "rest_console_1",
      "type": "component",
      "key": "rest_console",
      "inputs": {
        "method": "GET",
        "uri": "/services/data/v1/limits",
        "pane": "request-body"
      }
    }
  ]
}

<caos-rest-console method="GET" uri="/services/data/v1/limits" pane="request-body"></caos-rest-console>

A response that failed

The code and the reason are the text of the line, not its colour — a 500 read aloud says “500 Internal Server Error” rather than nothing.

{
  "id": "example",
  "section": "A response that failed",
  "columns": 1,
  "items": [
    {
      "id": "rest_console_1",
      "type": "component",
      "key": "rest_console",
      "inputs": {
        "method": "POST",
        "uri": "/services/data/v1/accounts",
        "pane": "response-body",
        "response": {
          "status": 500,
          "reason": "Internal Server Error",
          "tookMs": 2310,
          "bytes": 96,
          "body": "{ \"error\": \"the save plan did not compile\" }"
        }
      }
    }
  ]
}

<caos-rest-console id="restConsole1" method="POST" uri="/services/data/v1/accounts" pane="response-body"></caos-rest-console>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const restConsole1 = document.getElementById('restConsole1');
restConsole1.response = {
  "status": 500,
  "reason": "Internal Server Error",
  "tookMs": 2310,
  "bytes": 96,
  "body": "{ \"error\": \"the save plan did not compile\" }"
};