If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.

GET https://buildwithfern.com/learn/docs/writing-content/components/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI3MzU0ZmE0MS01MTZjLTRjNzktYmVlYi1kNTI5YjgzNjgzNWQiLCJleHAiOjE3NzY3MTAxODAsImlhdCI6MTc3NjcwOTg4MH0.XecPpzj0h7ve-BwKQuMQ6JPYnBM1zZ6pSHnOvJNJL50

---

***

title: Runnable endpoint
description: Add testable API endpoints to your docs with RunnableEndpoint. Support multiple environments, examples, and real-time response previews.
---------------------

For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

The `<RunnableEndpoint>` component lets users make real HTTP requests to your APIs directly in the API Reference. It auto-detects endpoint definitions from your API specification and provides a request builder with inputs for headers, path parameters, query parameters, and request bodies.

## Usage

<div>
  <Frame>
    ![Runnable Endpoint component example](https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/b7ea0c6f59e4b95acf5c4f954374dfcc00124508548d0070a9abf5bfbc53f005/products/docs/pages/component-library/default-components/runnable-endpoint.png)
  </Frame>
</div>

```jsx Markdown
<RunnableEndpoint endpoint="GET /api/users/{id}" />
```

## Features

The component supports:

* **Multiple examples** – When your endpoint has multiple pre-configured examples, the component displays a dropdown selector in the header so users can switch between different examples
* **Multiple environments** – If your API defines multiple environments (production, staging, development), the component automatically displays an environment selector so users can test against different base URLs
* **API Reference integration** – Each `<RunnableEndpoint>` includes a button that links users to the full API Reference documentation for the endpoint
* **Real-time response preview** – Users can view response status, headers, body, and response time immediately after sending requests
* **Form persistence** – Form inputs are automatically persisted in the browser's local storage, so users' test data is preserved even when navigating between pages or refreshing the browser

## Properties

<ParamField path="endpoint" type="string" required={false}>
  The endpoint locator in the format "METHOD /path". For example: `"POST /api/users"` or `"GET /api/users/{id}"`. If your API uses [namespaces](/learn/api-definitions/overview/project-structure#combined-sdks-from-multiple-apis), prefix with the namespace and `::` (e.g., `"payments::POST /api/users"`).
</ParamField>

<ParamField path="example" type="string" required={false}>
  Pre-fill the form with a specific example by name. If not specified, the first example is used by default.
</ParamField>

<ParamField path="defaultEnvironment" type="string" required={false}>
  Set the default environment for the endpoint. The value must correspond to the [`x-fern-server-name`](/learn/api-definitions/openapi/extensions/server-names-and-url-templating) of a server URL defined in your API specification. If not specified, the first environment is used by default.
</ParamField>

<ParamField path="readonly" type="list of strings" required={false}>
  Fields to lock by hiding their dropdown selectors. Accepts `"environment"` to lock the server URL and prevent users from switching environments. When set to `readonly={["environment"]}`, the environment selector is hidden and the endpoint uses the environment specified by `defaultEnvironment` (or the first environment if not specified).
</ParamField>

<ParamField path="collapsed" type="boolean" required={false} default="false">
  Controls whether the component renders collapsed by default with the form section hidden. Set as `collapsed={true}` or use the shorthand `collapsed`. Users can expand it by clicking the component.
</ParamField>

<ParamField path="className" type="string" required={false}>
  CSS class name for custom styling of the component container.
</ParamField>