A Plug that serves an HTML page rendering an AsyncAPI document in the browser with the AsyncAPI React component: servers, channels, operations, messages, and schemas.

The page fetches the document from the :path it is given, so mount it next to AsyncApiSpex.Plug.RenderSpec:

# Plug.Router
forward "/asyncapi.json", to: AsyncApiSpex.Plug.RenderSpec, init_opts: [spec: Shop.AsyncApi]
forward "/asyncapi",      to: AsyncApiSpex.Plug.Viewer,     init_opts: [path: "/asyncapi.json"]

# Phoenix router
forward "/asyncapi.json", AsyncApiSpex.Plug.RenderSpec, spec: Shop.AsyncApi
forward "/asyncapi",      AsyncApiSpex.Plug.Viewer,     path: "/asyncapi.json"

The browser resolves :path relative to the page, so give it the absolute path the document is mounted at (including any scope prefix).

Options:

• :path (required) — the URL the browser fetches the document from.
• :title — the page's <title>; defaults to "AsyncAPI".
• :bundle_url — the component's standalone bundle; defaults to @asyncapi/react-component 3.2.1's browser/standalone/index.js on unpkg.
• :stylesheet_url — the component's stylesheet; defaults to the same version's styles/default.min.css on unpkg.
• :config — a map passed to the component as its config prop; defaults to %{"show" => %{"sidebar" => true}}.

The bundle and stylesheet are loaded from unpkg; point :bundle_url and :stylesheet_url at a self-hosted copy to keep the page off a CDN. Under a Content Security Policy the page also needs its one inline <script> (the render call carrying :path and :config) allowed, with 'unsafe-inline' or that script's hash in script-src.