Introducing <rapi-doc-mini> Web Component

<rapi-doc-mini> a new way to expose your API documentation. There are various styles and needs 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. However for the rest of bullets listed below <rapi-doc-mini> is your friend
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 work together in a single document

Usage in a blog 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. Notice how it blends seamlessly with this writeup as if its a part of this page. Go ahead and play with the below APIs, make live request and watch the responses, all from this very blog.

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 only specific APIs from OpenAPI spec

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)

Here we are using regular RegEx to select the paths which is either get /users/{userId} or post /users

      
        <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, 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