RapiDoc Mini (Embedded Endpoint Cards)

While <rapi-doc> provides a full-page documentation portal with sidebars, global navigation, and search modals, <rapi-doc-mini> is a dedicated lightweight Web Component designed to render isolated endpoints or filtered sub-groups.

It is ideal for embedding interactive “TRY” cards directly inside tutorials, changelogs, markdown blog posts, or internal wiki pages without using clunky <iframe> wrappers.

1. Quickstart

Import the ES module from unpkg or your local build, then specify spec-url and use match-paths to isolate the target endpoint:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  </head>
  <body>
    <!-- Renders only the POST /users endpoint from the OpenAPI specification -->
    <rapi-doc-mini
      spec-url="https://petstore.swagger.io/v2/swagger.json"
      match-paths="post /user"
      color-scheme="dark"
      paths-expanded="false"
    > </rapi-doc-mini>
  </body>
</html>

2. Core Capabilities & Filtering Recipes

Extract a single path and HTTP method:

<rapi-doc-mini
  spec-url="https://petstore.swagger.io/v2/swagger.json"
  match-paths="get /pet/{petId}"
  theme="dark"
  allow-try="true"
></rapi-doc-mini>

Match multiple endpoints using regular expressions by setting match-type="regex":

<rapi-doc-mini
  spec-url="/specs/reqres.yaml"
  match-paths="^get /users/\{userId\}$|^post /users$"
  match-type="regex"
  schema-style="table"
  theme="dark"
></rapi-doc-mini>

Render parameters, models, and execution console inline without accordion toggling:

<rapi-doc-mini
  spec-url="/specs/reqres.yaml"
  match-paths="post /users"
  paths-expanded="true"
  layout="column"
  theme="dark"
></rapi-doc-mini>

Embed endpoints from different services side-by-side to tell a complete business flow:

<!-- Identity Service Spec -->
<rapi-doc-mini
  spec-url="https://api.example.com/auth/openapi.yaml"
  match-paths="post /oauth/token"
  theme="dark"
></rapi-doc-mini>

<!-- Payment Service Spec -->
<rapi-doc-mini
  spec-url="https://api.example.com/billing/openapi.yaml"
  match-paths="post /charges"
  theme="dark"
></rapi-doc-mini>

When a spec URL is invalid or returns a 404, <rapi-doc-mini> displays an inline error message rather than crashing the page:

<rapi-doc-mini
  spec-url="/specs/non-existing-spec.json"
  color-scheme="dark"
></rapi-doc-mini>

3. Configuration Attributes

Every attribute can be set statically in HTML or updated dynamically at runtime via JavaScript element.setAttribute(...).

Attribute	Type / Options	Default	Description
`spec-url`	`String`	`""`	URL to the OpenAPI specification (JSON or YAML).
`match-paths`	`String`	`""`	Target path and method filter (e.g. `"post /users"` or `"/store"`).
`match-type`	`includes` \| `regex`	`includes`	Matching strategy for `match-paths`.
`paths-expanded`	`true` \| `false`	`false`	When `true`, renders operation details expanded by default.
`layout`	`row` \| `column`	`row`	Internal flex alignment of parameters and response console.
`schema-style`	`tree` \| `table`	`tree`	Schema rendering mode: collapsible tree or structured table.
`schema-expand-level`	`Number`	`999`	Default expansion depth for request and response schema models.
`theme`	`dark` \| `light`	`dark`	Base theme preset.
`bg-color`	`Hex / CSS color`	`(preset)`	Background surface color for the widget container.
`text-color`	`Hex / CSS color`	`(preset)`	Primary text and label color.
`primary-color`	`Hex / CSS color`	`#f3705a`	Accent color for buttons, badges, and active tabs.
`allow-try`	`true` \| `false`	`true`	Toggles the interactive execution test console.
`show-curl-before-try`	`true` \| `false`	`false`	Displays copyable cURL syntax before executing a request.
`api-key-name`	`String`	`""`	Name of the authentication header or query parameter.
`api-key-location`	`header` \| `query`	`header`	Location for the API credential.
`api-key-value`	`String`	`""`	Active API token or bearer secret.
`server-url`	`String`	`(from spec)`	Overrides the target server URL for live requests.
`sort-endpoints-by`	`path` \| `method` \| `summary` \| `none`	`none`	Sorting order for operations when multiple paths match.

4. Component Comparison: `<rapi-doc>` vs. `<rapi-doc-mini>`

Feature / Goal	`<rapi-doc>`	`<rapi-doc-mini>`
Primary Use Case	Full-page developer portal & complete API reference manual	Isolated inline endpoint cards for blogs, tutorials & changelogs
Navigation Sidebar	Included (search bar, tag grouping, operation list)	None (pure endpoint content without navigation chrome)
URL Hash Routing	Yes (updates browser address hash via update-route)	Disabled (won't alter host page URL)
Interactive TRY Console	Yes	Yes
Container Flexibility	Typically full viewport height or dedicated portal frame	Responsive, adapts naturally to any parent <div> container
Multi-Spec Mashup	Single spec per instance	Multiple instances with different specs on the same page
Footprint & Layout	Complete portal layout (focused, view, read modes)	Compact, zero-iframe inline element with no external chrome