codeasashu/react-openapi-designer

React openapi designer is a react based openapi designer that conforms to Openapi specifications

To quickly get started, you can go to https://codeasashu..io/react-openapi-designer/

You can create a new openapi spec from scratch, or you can just paste any existing yaml to import the spec and edit from the UI.

You can also build and host the repo as a static website. To do so, first build the project.

npm run build

This will put the compiled files in dist/ directory. Upload everything in that directory to a static hosting.

You can pass several options to the target HTML div.

You can listen to changes in the openapi spec and take actions on it

  <react-openapi-designer id="abcdef" />

  <script type="text/javascript">
    window.onload = function () {
      var doc = document.getElementById("abcdef")
      doc.addEventListener("specChanged", function (e) {
        e.data.text().then((s) => {
          const spec = JSON.parse(s);
          console.log("spec in yaml syntax", spec.yaml)
          console.log("spec in json syntax", spec.json)
        })
      })
    }
  </script>

Adding a external url for host mocking for the spec, will show up as a mock url in the Samples widget.

  <react-openapi-designer mock-url="http://domain.tld/your/mock/url" />

To start local development, clone this repo.

git clone https://.com/codeasashu/react-openapi-designer

Then, install npm modules

npm install

and finally start dev server:

npm run dev