diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index b885a805f..300965eaa 100644 --- a/fern/products/docs/docs.yml +++ b/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 diff --git a/fern/products/docs/pages/changelog/2025-10-17.mdx b/fern/products/docs/pages/changelog/2025-10-17.mdx new file mode 100644 index 000000000..c1dd92b59 --- /dev/null +++ b/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. + + +![Runnable Endpoint component](runnable-endpoint.png) + + +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). diff --git a/fern/products/docs/pages/changelog/runnable-endpoint.png b/fern/products/docs/pages/changelog/runnable-endpoint.png new file mode 100644 index 000000000..034e0bff9 Binary files /dev/null and b/fern/products/docs/pages/changelog/runnable-endpoint.png differ diff --git a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx new file mode 100644 index 000000000..86416ca7b --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.mdx @@ -0,0 +1,42 @@ +--- +title: Runnable Endpoint +description: Test API endpoints directly from your documentation with an interactive request builder. +--- + +The `` 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. + + + + +![Runnable Endpoint component example](runnable-endpoint.png) + + + +````jsx + +```` + + + +## 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 + + + The endpoint locator in the format "METHOD /path". For example: `"POST /api/users"` or `"GET /api/users/{id}"`. + + + + Pre-fill the form with a specific example by name. If not specified, the first example is used by default. + + + + CSS class name for custom styling of the component container. + diff --git a/fern/products/docs/pages/component-library/default-components/runnable-endpoint.png b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.png new file mode 100644 index 000000000..034e0bff9 Binary files /dev/null and b/fern/products/docs/pages/component-library/default-components/runnable-endpoint.png differ