|
1 | | -## Enhanced Runnable Endpoint Component |
| 1 | +## Introducing Runnable Endpoint |
2 | 2 |
|
3 | | -We've improved the Runnable Endpoint component with a cleaner, more maintainable architecture and new features that make testing API endpoints even easier. |
| 3 | +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. |
4 | 4 |
|
5 | | -### What's New |
| 5 | +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. |
6 | 6 |
|
7 | | -**Componentized Architecture**: The Runnable Endpoint has been refactored into modular, reusable components for better maintainability and easier future enhancements. |
| 7 | +Key features include: |
8 | 8 |
|
9 | | -**Multiple Examples Support**: When your endpoint has multiple pre-configured examples, a dropdown selector now appears in the header, making it easy to switch between different scenarios. |
| 9 | +- **Interactive form builder** that automatically generates inputs based on your endpoint definition |
| 10 | +- **Multiple examples support** with a dropdown selector when you have multiple pre-configured scenarios |
| 11 | +- **Environment selector** for testing against production, staging, or development |
| 12 | +- **Form persistence** that saves user input in local storage across sessions |
| 13 | +- **Direct navigation** to the full API reference with an "Open in API reference" button |
10 | 14 |
|
11 | | -**Environment Selector**: If your API defines multiple environments, users can now select which environment to test against directly from the component interface. |
12 | | - |
13 | | -**Open in API Reference**: A new button links directly to the full API reference page for the endpoint, providing quick access to detailed documentation. |
14 | | - |
15 | | -**Improved Form Persistence**: Form state is now automatically saved to local storage, preserving your test data across page navigation and browser sessions. |
16 | | - |
17 | | -### Component Structure |
18 | | - |
19 | | -The refactored component includes: |
20 | | -- `RunnableEndpointHeader`: Endpoint URL display, example selector, and navigation controls |
21 | | -- `RunnableEndpointFormSection`: Input forms for headers, path parameters, query parameters, and body |
22 | | -- `RunnableEndpointActions`: Clear and send request buttons |
23 | | -- `RunnableEndpointResponseSection`: Response preview with syntax highlighting |
| 15 | +The component is built with a modular architecture, making it maintainable and extensible for future enhancements. |
24 | 16 |
|
25 | 17 | To learn more about using Runnable Endpoints in your documentation, visit the [Runnable Endpoint docs](/learn/docs/building-and-customizing-your-docs/component-library/runnable-endpoint). |
0 commit comments