Swagger API in Gatsby

Let's add Swagger to a GatsbjyJS site. SwaggerUI does not have a handy Gatsby plugin or a React wrapper, but that's no problem.

Create a new Gatsby site

gatsby new gatsby-swagger

I deleted all non-essentials. I want a simple index page. Reference this repo to see everything I deleted.

Now we install some dependencies.

yarn add swagger-ui
yarn add react-helmet

Now let's add SwaggerUI to the window object.

// gatsby-browser.js
 * Implement Gatsby's Browser APIs in this file.
 * See: https://www.gatsbyjs.com/docs/browser-apis/

import SwaggerUI from "swagger-ui";
window.SwaggerUI = SwaggerUI;

With that in place, we can create a component. Additionally, we want to add some custom styles.

// src/components/swagger.js
import React from "react";
import Helmet from "react-helmet";

export default class Swagger extends React.Component {
  componentDidMount() {
    const { componentId, url } = this.props;
      dom_id: `#${componentId}`,
      url: url,
  render() {
    return (
          // NOTE: I append /gatsby-swagger to support gitlab pages. // I'm sure
          there is a better way to do this
        <div id={this.props.componentId} />

Finally, we use the component.

// src/pages/index.js

import * as React from "react";
import Swagger from "../components/swagger";

const IndexPage = () => (

export default IndexPage;

Copyright © 2020 Code Green LLC