    <!DOCTYPE html>
    <html>
        <head>

        <title>{{ service_title }} AsyncAPI</title>

        <link rel="icon" href="https://www.asyncapi.com/favicon.ico">
        <link rel="icon" type="image/png" sizes="16x16" href="https://www.asyncapi.com/favicon-16x16.png">
        <link rel="icon" type="image/png" sizes="32x32" href="https://www.asyncapi.com/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="194x194" href="https://www.asyncapi.com/favicon-194x194.png">
        <link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@1.2.11/styles/default.min.css">
        </head>

        <style>
        html {
            font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
            line-height: 1.5;
        }
        </style>

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

        <script src="https://unpkg.com/@asyncapi/react-component@1.2.11/browser/standalone/index.js"></script>
        {{ asyncapi_json|json_script:"asyncapi_json" }}
        <script>
            const asyncapi_as_json = JSON.parse(document.getElementById('asyncapi_json').textContent);
            AsyncApiStandalone.render(asyncapi_as_json, document.getElementById('asyncapi'));
        </script>
        </body>
    </html>