Introducing <rapi-doc-mini> Web Component

<rapi-doc-mini> a new way to expose your API documentation. There are various styles and need how one would like to document their APIs. such as

All the APIs are documented in one central place. This is where <rapi-doc> fits in.
Expose just a few important APIs such as authentication etc as a part of a blog, to provide an initial understanding to your audience
A step by step tutorial where in each step shows you a few APIs
Or you are explaining a business case which uses microservices, where each microservice has its own APIs and the ask is to pick few APIs from each of theses microservice show how they come work together in a single document

Usage in a bolg style writing

It is fairly common to write specifically about few APIs to provide an initial understanding to your users. However in those cases you run the risk of your writeup getting outdated when the actual API changes its shape.

<rapi-doc-mini> gives you this amazing capability to extract and expose any part of you Open-API spec including a built in API console to try out. As an example shown below is how I am exposing a set of APIs in this writeup. It is a very powerful and yet very easy to use tool that comes with many advantages, inluding syntax highlighting, built-in console, markdown support and many others.
Below is the markup that you will put in your html

           
            <rapi-doc-mini
              spec-url = "https://petstore.swagger.io/v2/swagger.json"
              style= "min-width:600px;"
              paths-expanded = "false"
              theme = "light"
              bg-color = "#f9f9fb"
            > </rapi-doc-mini>

Above HTML snippet will result in generating an API doc as shown below. Go ahead and play with the below APIs, make live request and watch the responses

Placement, Resize and Style

If needed it can be resized to fit the layout needs. Just like how you would use an <img> tag, in the same way you can use <rapi-doc-mini> and place and style per your needs.
like shown below, I reduced its width, applied a thick border and attached some shadow

Pick and show specific APIs

Instead of showing entire open-api spec you can just extract and choose to show what you need to show. This is done using match-paths attribute.
Example below uses the same OpenAPI spec as we used above, but showing only the paths that we intend to

        
          <rapi-doc-mini
            style= "min-width:600px;border: 1px solid #eee; border-top-width:0"
            spec-url="../specs/mock.yaml"
            theme = "light"
            paths-expanded = "false"
            match-paths = "post /users"
          > </rapi-doc-mini>

More complex RegEx based filtering of API is possible too (match-paths & match-type)

      
        <rapi-doc-mini
          style= "min-width:600px;border: 1px solid #eee; border-top-width:0"
          spec-url="./specs/mock.yaml"
          theme = "light"
          paths-expanded = "false"
          match-paths = "^get /users/\{userId\}$|^post /users$"
          match-type = "regex"
        > </rapi-doc-mini>

Show it Minimzed or Expanded

If expand/collapse is not your style, or feel it a bit of distraction then have it always expanded and make it more natural and integrated part of your writeup.
Use the attribute paths-expanded = "true" to achive this

Include APIs from multiple specs

Pretty common with micro services, where you like to explain a business flow by consuming APIs from multiple services. Each of these services may be having their own OpenAPI spec. The ask is to pluk some APIs from different services and makeup a story.
Do not rewrite the API specific functionality again, make use of the existing OpenAPI spec and Use <rapi-doc-mini> to pluck and document APIs from differenct specs