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.

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:

<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.

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.

Familiar names

These Mintlify-style tag names work directly:

MDX-style Resolves to Notes
<ParamField> <wc-field> path, query, body, and header attributes are all renamed to name. Wrap groups in <wc-fields> yourself — Mintlify has no equivalent wrapper.
<ResponseField> <wc-field> name, type, and required are preserved. Wrap groups in <wc-response-fields> yourself.