API reference components

Components5 min read|
|

DocsLit includes purpose-built components for documenting APIs — endpoints, parameters, response fields, and interactive API testers.

Endpoints

Display an API endpoint with its HTTP method and URL:

<wc-endpoint method="GET" url="/api/v1/users"></wc-endpoint> <wc-endpoint method="POST" url="/api/v1/users"></wc-endpoint> <wc-endpoint method="PUT" url="/api/v1/users/:id"></wc-endpoint> <wc-endpoint method="DELETE" url="/api/v1/users/:id"></wc-endpoint>

The HTTP method. Options: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`. The endpoint URL path. An OpenAPI `operationId` to resolve against the loaded spec. When set, DocsLit automatically populates `method`, `url`, `summary`, `description`, parameters, request body, and response fields from the spec data. A short one-line summary of what the endpoint does. Rendered in bold above the description. A longer description of the endpoint. Supports inline Markdown (bold, italic, code, links). JSON-encoded security requirements for the endpoint.

OpenAPI-driven endpoints

When you have an OpenAPI spec configured, use ref to pull all endpoint data from the spec automatically:

<wc-endpoint ref="createUser"> </wc-endpoint>

DocsLit resolves the ref at build time and injects all parameters, request body fields, response schemas, and examples. See OpenAPI integration for setup details.

Interactive API tester

Use wc-runnable-endpoint to create an interactive API tester where readers can edit the request and see live responses:

<wc-runnable-endpoint method="GET" url="https://jsonplaceholder.typicode.com/posts/1"> </wc-runnable-endpoint> The interactive API tester sends real HTTP requests from the reader's browser. Use it with public APIs or your own staging endpoints.

Parameter fields

Document request parameters with wc-fields and wc-field. The title attribute controls the section header (defaults to "Parameter"):

The section header text. When populated from an OpenAPI spec, this is set automatically to values like "Headers", "Query Parameters", or "Body application/json". <wc-fields header="Request parameters"> <wc-field name="name" type="string" required> The user's full name. </wc-field> <wc-field name="email" type="string" required> A valid email address. Must be unique across all accounts. </wc-field> <wc-field name="role" type="string" default="viewer"> The user's role. Options: `admin`, `editor`, `viewer`. </wc-field> <wc-field name="notify" type="boolean" default="true"> Send a welcome email to the new user. </wc-field> </wc-fields> The user's full name. A valid email address. Must be unique across all accounts. The user's role. Options: `admin`, `editor`, `viewer`. Send a welcome email to the new user. The parameter name. The data type (e.g., `string`, `number`, `boolean`, `array`, `object`). Mark the field as required. The default value if the field is omitted. Mark the field as deprecated. The parameter location. Options: `header`, `path`, `query`, `cookie`, `body`. Displayed as a badge next to the field name. A description of the field. Supports inline Markdown (bold, italic, code, links). The data format (e.g., `uuid`, `email`, `date-time`). Displayed alongside the type. Comma-separated list of allowed values. Displayed as a constraint. A regex pattern the value must match. Minimum numeric value. Maximum numeric value. Minimum string length. Displayed as a character count constraint. Maximum string length. Displayed as a character count constraint. An example value for the field. When set, the field becomes a collapsible section. Nested `wc-field` children are hidden until the user expands it. Used automatically for nested object and array schemas from OpenAPI specs.

Response fields

Document response data with wc-response-fields:

<wc-response-fields header="Response"> <wc-field name="id" type="number"> The unique identifier for the created user. </wc-field> <wc-field name="created_at" type="string"> ISO 8601 timestamp of when the user was created. </wc-field> <wc-field name="status" type="string"> The account status. Always `active` for new users. </wc-field> </wc-response-fields> The unique identifier for the created user. ISO 8601 timestamp of when the user was created. The account status. Always `active` for new users.

Schema

Display type definitions with wc-schema:

<wc-schema name="User" extends="BaseModel"> <wc-field name="id" type="number" required> Unique identifier. </wc-field> <wc-field name="name" type="string" required> The user's display name. </wc-field> <wc-field name="permissions" type="string[]"> List of permission slugs. </wc-field> </wc-schema> Unique identifier. The user's display name. List of permission slugs.

Prompt component

Display AI prompts with a copy button:

<wc-prompt> You are a documentation assistant. Help users find the right page for their question. Be concise and link to specific sections. </wc-prompt> You are a documentation assistant. Help users find the right page for their question. Be concise and link to specific sections.