UI Templates

Flask OpenAPI3 supports Swagger, Redoc and RapiDoc templates by default.

You can customize templates use ui_templates in initializing OpenAPI.

1
2
3
4
5
6
ui_templates = {
    "swagger": swagger_html_string,
    "rapipdf": rapipdf_html_string
}

app = OpenAPI(__name__, info=info, ui_templates=ui_templates)

In the above example, swagger will overwrite the original template and rapipdf is a new template.

You can do anything with swagger_html_string, rapipdf_html_string or any_html_string.

Info

api_doc_url is a necessary parameter for rendering template, so you must define it in your template.

swagger_html_string:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Title</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css">
    <style>
        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *, *:before, *:after {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            background: #fafafa;
        }
    </style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-standalone-preset.js"></script>
<script>
    window.onload = function () {
        // Begin Swagger UI call region
        window.ui = SwaggerUIBundle({
            url: "{{api_doc_url}}",
            dom_id: "#swagger-ui",
            deepLinking: true,
            presets: [
                SwaggerUIBundle.presets.apis,
                SwaggerUIStandalonePreset
            ],
            plugins: [
                SwaggerUIBundle.plugins.DownloadUrl
            ],
            layout: "StandaloneLayout"
        })
    }
</script>
</body>
</html>

rapipdf_html_string:

This will generate a new route, http://127.0.0.1:5000/openapi/rapipdf.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!doctype html>
<html>
<head>
    <script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"></script>
</head>
<body>
<rapi-pdf
        style="width:700px; height:40px; font-size:18px;"
        spec-url="{{api_doc_url}}"
        button-bg="#b44646"
></rapi-pdf>
</body>
</html>