Swagger UI

Interface para documentar e testar APIs a partir de uma especificação OpenAPI.

Site oficial

Instalação

<script src="https://cdn.rscsistemas.com.br/swagger-ui/5.33.1/swagger-ui-bundle.js"
        integrity="sha384-ZPehFMQommnnuaZ4rpxgkgTT2DKFVp4hZC/7pLit+9Lek9T1YGSo23eHFbvNkXkw" crossorigin="anonymous"></script>
<script src="https://cdn.rscsistemas.com.br/swagger-ui/5.33.1/swagger-ui-standalone-preset.js"
        integrity="sha384-My2aDM4r2Mbm3ybHcubKm9O9U8FEjvF/O5nGvE9YK5dzqOTbWEKa79RPJ1krdMaF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rscsistemas.com.br/swagger-ui/5.33.1/swagger-ui.css"
      integrity="sha384-Ov4/wv3j2bmct8cDc5X4ngJZohVPzEmc6uDPH8WeljUxO5vtoykvMEfbu9Vh6RaW" crossorigin="anonymous">

Como usar

Inclua o CSS e os dois scripts (tags acima) e aponte para a especificação OpenAPI da sua API.

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>Documentação da API</title>
    <!-- swagger-ui.css aqui -->
</head>
<body>
    <div id="swagger-ui"></div>

    <!-- swagger-ui-bundle.js e swagger-ui-standalone-preset.js aqui -->
    <script>
        window.ui = SwaggerUIBundle({
            url: '/openapi.json',
            dom_id: '#swagger-ui',
            presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
            layout: 'StandaloneLayout'
        });
    </script>
</body>
</html>

Observações

  • A especificação (openapi.json ou .yaml) deve estar no mesmo domínio da API ou com CORS liberado.
  • Sem a barra superior de busca de URL: use layout: 'BaseLayout' e omita o preset standalone.
  • Documentação oficial: swagger.io/docs/open-source-tools/swagger-ui
Arquivos da versão 5.33.1
URL base
https://cdn.rscsistemas.com.br/swagger-ui/5.33.1/