Skip to content
STYLESCAPE

API Explorer

Examples for the ss-c-api-explorer module, a frame for GraphiQL, Swagger UI, Redoc or an iframe to any of them. The frame is min(80vh, 45rem) tall (set --ss-api-explorer-height to change it); an iframe or .graphiql-container fills the body, other tools scroll inside it. Inside the frame, GraphiQL's font and radius custom properties and Swagger UI's fonts read the tokens.

Neither tool follows --ss-color-*: GraphiQL has its own dark theme (graphiql-dark on body), and Swagger UI has none, so give its body data-theme="light" to keep a light island in a dark page.

GraphQL

GraphQL

POST /api/graphql/
Schema

GraphiQL mounts here.

HTML 
<section class="ss-c-api-explorer" style="--ss-api-explorer-height: 22rem" aria-labelledby="gql-title">
            <header class="ss-c-api-explorer__header">
                <h3 class="ss-c-api-explorer__title" id="gql-title">GraphQL</h3>
                <span class="ss-c-api-explorer__endpoint">POST /api/graphql/</span>
                <div class="ss-c-api-explorer__actions">
                    <a class="ss-c-button ss-c-button--sm" href="#schema">Schema</a>
                </div>
            </header>
            <div class="ss-c-api-explorer__body">
                <div class="graphiql-container" id="graphiql">
                    <p style="padding: 1rem">GraphiQL mounts here.</p>
                </div>
            </div>
        </section>

OpenAPI (Swagger UI)

REST API

v2.1 /api/schema/
Download schema

Swagger UI renders here and scrolls inside the frame.

HTML 
<section class="ss-c-api-explorer" style="--ss-api-explorer-height: 22rem" aria-labelledby="oas-title">
            <header class="ss-c-api-explorer__header">
                <h3 class="ss-c-api-explorer__title" id="oas-title">REST API</h3>
                <span class="ss-c-badge">v2.1</span>
                <span class="ss-c-api-explorer__endpoint">/api/schema/</span>
                <div class="ss-c-api-explorer__actions">
                    <a class="ss-c-button ss-c-button--sm" href="#openapi.yaml">Download schema</a>
                </div>
            </header>
            <div class="ss-c-api-explorer__body" data-theme="light">
                <div id="swagger-ui" class="swagger-ui">
                    <div class="wrapper"><p>Swagger UI renders here and scrolls inside the frame.</p></div>
                </div>
            </div>
        </section>

Iframe

HTML 
<section class="ss-c-api-explorer" style="--ss-api-explorer-height: 16rem" aria-label="STAC API browser">
            <div class="ss-c-api-explorer__body">
                <iframe title="STAC API browser" srcdoc="&lt;p style='font-family:sans-serif;padding:1rem'&gt;Embedded tool&lt;/p&gt;"></iframe>
            </div>
        </section>