> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> Permite que los desarrolladores prueben endpoints de la API directamente en tu documentación.

<div id="overview">
  ## Descripción general
</div>

El playground de API es un entorno interactivo que permite a los usuarios probar y explorar tus endpoints de API. Los desarrolladores pueden crear solicitudes de API, enviarlas y ver las respuestas sin salir de tu documentación.

Consulta [Trigger an update](/es/api/update/trigger) para ver un ejemplo del playground de API en acción.

<Frame>
  <img src="https://mintcdn.com/anotherhorizon/KtT4EXjd_91dkOA7/images/playground/API-playground-light.png?fit=max&auto=format&n=KtT4EXjd_91dkOA7&q=85&s=0909a73e38e7335a50ed3a5624ebe5fd" alt="Playground de API para el endpoint Trigger an update." className="block dark:hidden" width="2534" height="1022" data-path="images/playground/API-playground-light.png" />

  <img src="https://mintcdn.com/anotherhorizon/KtT4EXjd_91dkOA7/images/playground/API-playground-dark.png?fit=max&auto=format&n=KtT4EXjd_91dkOA7&q=85&s=8492d21541faedb47f23bde5a03c2ae6" alt="Playground de API para el endpoint Trigger an update." className="hidden dark:block" width="2534" height="1022" data-path="images/playground/API-playground-dark.png" />
</Frame>

El playground genera páginas interactivas para tus endpoints a partir de tu especificación OpenAPI o esquema AsyncAPI. Si modificas tu API, el playground actualiza automáticamente las páginas correspondientes.

Recomendamos generar tu playground de API a partir de una especificación OpenAPI. Sin embargo, puedes crear manualmente páginas de referencia de API después de definir una URL base y un método de autenticación en tu `docs.json`.

<div id="get-started">
  ## Primeros pasos
</div>

<Steps>
  <Step title="Añade tu archivo de especificación de OpenAPI.">
    <Tip>
      Valida tu archivo de especificación de OpenAPI con el [Swagger Editor](https://editor.swagger.io/) o con el comando de la [Mint CLI](https://www.npmjs.com/package/mint) `mint openapi-check <filename>`.
    </Tip>

    ```bash {3} theme={null}
    /your-project
      |- docs.json
      |- openapi.json
    ```
  </Step>

  <Step title="Genera páginas de endpoints.">
    Actualiza tu `docs.json` para hacer referencia a tu especificación de OpenAPI.

    **Para generar automáticamente páginas para todos los endpoints de tu especificación de OpenAPI**, añade una propiedad `openapi` a cualquier elemento de navegación.

    Este ejemplo genera una página para cada endpoint definido en `openapi.json` y organiza las páginas en el grupo "API reference".

    ```json Generate all endpoint pages theme={null}
    "navigation": {
      "groups": [
        {
          "group": "API reference",
          "openapi": "openapi.json"
        }
      ]
    }
    ```

    **Para generar páginas solo para endpoints específicos**, enumera los endpoints en la propiedad `pages` del elemento de navegación.

    Este ejemplo genera páginas únicamente para los endpoints `GET /users` y `POST /users`. Para generar otras páginas de endpoints, añade más endpoints al arreglo `pages`.

    ```json Generate specific endpoint pages theme={null}
    "navigation": {
      "groups": [
          {
            "group": "API reference",
            "openapi": "openapi.json",
            "pages": [
              "GET /users",
              "POST /users"
            ]
          }
      ]
    }
    ```
  </Step>
</Steps>

<div id="customize-your-playground">
  ## Personaliza tu playground
</div>

Personaliza tu playground de API definiendo las siguientes propiedades en tu `docs.json`.

<ResponseField name="playground" type="object">
  Configuraciones del playground de API.

  <Expandable title="playground" defaultOpen="True">
    <ResponseField name="display" type="&#x22;interactive&#x22; | &#x22;simple&#x22; | &#x22;none&#x22;">
      El modo de visualización del playground de API.

      * `"interactive"`: Muestra el playground interactivo.
      * `"simple"`: Muestra un endpoint copiables sin playground.
      * `"none"`: No muestra nada.

      Valor predeterminado: `interactive`.
    </ResponseField>

    <ResponseField name="proxy" type="boolean" defaultOpen="True">
      Indica si las solicitudes de API deben pasar por un servidor proxy. Valor predeterminado: `true`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="examples" type="object">
  Configuraciones para los ejemplos de API generados automáticamente.

  <Expandable title="examples" defaultOpen="True">
    <ResponseField name="languages" type="array of string">
      Lenguajes para los fragmentos de API generados automáticamente.

      Se muestran en el orden especificado.
    </ResponseField>

    <ResponseField name="defaults" type="&#x22;required&#x22; | &#x22;all&#x22;">
      Indica si se muestran los parámetros opcionales en los ejemplos de API. Valor predeterminado: `all`.
    </ResponseField>

    <ResponseField name="prefill" type="boolean">
      Indica si se debe prellenar el playground de API con datos de ejemplos del esquema. Cuando está habilitado, el playground completa automáticamente los campos de la solicitud con valores de ejemplo de tu especificación OpenAPI. Valor predeterminado: `false`.
    </ResponseField>
  </Expandable>
</ResponseField>

<div id="example-configuration">
  ### Configuración de ejemplo
</div>

Este ejemplo configura el área de pruebas de la API para que sea interactiva, con fragmentos de código de ejemplo para cURL, Python y JavaScript. En los fragmentos solo se muestran los parámetros obligatorios, y el área de pruebas rellena el cuerpo de la solicitud con valores de ejemplo.

```json theme={null}
{
 "api": {
   "playground": {
     "display": "interactive"
   },
   "examples": {
     "languages": ["curl", "python", "javascript"],
     "defaults": "required",
     "prefill": true
   }
 }
}
```

<div id="custom-endpoint-pages">
  ### Páginas de endpoints personalizadas
</div>

Cuando necesites más control sobre la documentación de tu API, usa la extensión `x-mint` en tu especificación OpenAPI o crea páginas MDX individuales para tus endpoints.

Ambas opciones te permiten:

* Personalizar el metadata de la página
* Agregar contenido adicional, como ejemplos
* Controlar el comportamiento del playground por página

Se recomienda la extensión `x-mint` para que toda la documentación de tu API se genere automáticamente a partir de tu especificación OpenAPI y se mantenga en un solo archivo.

Las páginas MDX individuales se recomiendan para APIs pequeñas o cuando quieras experimentar con cambios página por página.

<div id="further-reading">
  ## Lecturas adicionales
</div>

* [Configuración de OpenAPI](/es/api-playground/openapi-setup) para obtener más información sobre cómo crear tu documento OpenAPI.
* [Extensión x-mint](/es/api-playground/openapi-setup#x-mint-extension) para obtener más información sobre cómo personalizar tus páginas de endpoints.
* [Configuración de MDX](/es/api-playground/mdx-setup) para obtener más información sobre cómo crear manualmente páginas individuales de referencia de API.
* [Configuración de AsyncAPI](/es/api-playground/asyncapi-setup) para obtener más información sobre cómo crear tu esquema de AsyncAPI para generar páginas de referencia de WebSocket.