Document Runnable Endpoint component and add changelog entry (#1281)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Deep Singhvi <[email protected]>
Co-authored-by: Devin Logan <[email protected]>

Author: 3 people

fern/products/docs/docs.yml

@@ -77,6 +77,9 @@ navigation:
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
             icon: fa-duotone fa-sitemap
             slug: schema-snippet
+          - page: Runnable Endpoint
+            path: ./pages/component-library/default-components/runnable-endpoint.mdx
+            icon: fa-duotone fa-play-circle
           - page: Frames
             path: ./pages/component-library/default-components/frames.mdx
             icon: fa-duotone fa-window-maximize

fern/products/docs/pages/changelog/2025-10-17.mdx

@@ -0,0 +1,19 @@
+## Introducing Runnable Endpoint
+
+Test API endpoints directly from your documentation with our new interactive component. Runnable Endpoint allows your users to send real HTTP requests to your API without leaving your docs, making it easier for developers to explore and understand your API.
+
+<Frame>
+![Runnable Endpoint component](runnable-endpoint.png)
+</Frame>
+
+Embed the component anywhere in your MDX documentation to create an interactive request builder with form inputs for headers, path parameters, query parameters, and request bodies. Users can execute requests and see real-time responses, complete with status codes and syntax highlighting.
+
+Key features include:
+
+- **Interactive form builder** that automatically generates inputs based on your endpoint definition
+- **Multiple examples support** with a dropdown selector when you have multiple pre-configured scenarios
+- **Environment selector** for testing against production, staging, or development
+- **Form persistence** that saves user input in local storage across sessions
+- **Direct navigation** to the full API reference with an "Open in API reference" button
+
+To learn more about using Runnable Endpoints in your documentation, visit the [Runnable Endpoint docs](/learn/docs/writing-content/components/runnable-endpoint).

fern/products/docs/pages/changelog/runnable-endpoint.png

@@ -0,0 +1,42 @@
+---
+title: Runnable Endpoint
+description: Test API endpoints directly from your documentation with an interactive request builder.
+---
+
+The `<RunnableEndpoint>` component enables users to 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.
+
+<Tabs>
+<Tab title="Example">
+
+![Runnable Endpoint component example](runnable-endpoint.png)
+
+</Tab>
+<Tab title="Markdown">
+````jsx
+<RunnableEndpoint endpoint="GET /api/users/{id}" />
+````
+</Tab>
+</Tabs>
+
+## Features
+
+The Runnable Endpoint 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 Runnable Endpoint 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}"`.
+</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="className" type="string" required={false}>
+  CSS class name for custom styling of the component container.
+</ParamField>