Scalarで完全にhtml1枚でOpenAPI仕様のドキュメントを表示する方法

scalar

Posted at 2025-05-09

結論

こう

<!doctype html>
<html>
  <head>
    <title>Scalar API Reference</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div id="app"></div>

    <!-- Load the Script -->
    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>

    <!-- Initialize the Scalar API Reference -->
    <script>
      Scalar.createApiReference('#app', {
        servers: [
          {
            url: 'http://localhost:3000.com',
            description: 'ここに設定した値がドキュメント内のURLのベースになる',
          },
        ],
        content: `{"openapi":"3.1.0", ...以下略}` // OpenAPI仕様をここに貼り付ければOK!
      })
    </script>
  </body>
</html>

もっと詳しく

公式ドキュメントに書いてあるので読もう

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up