Standalone Endpoint Web Component

RapiDoc Mini

<rapi-doc-mini> is a lightweight, zero-iframe Web Component designed to embed live, interactive OpenAPI endpoints directly into technical blog posts, markdown tutorials, changelogs, and microservice workflows without visual clutter.

100%No <iframe> Friction

GranularPath & RegEx Filtering

Live TRYInteractive Console

Multi-SpecMicroservice Mashup

Why RapiDoc Mini

The Problem with Traditional API Documentation

Blog & Tutorial Writing

Static markdown code snippets and screenshots go stale the moment an API schema changes. <rapi-doc-mini> reads directly from your source OpenAPI spec, guaranteeing your code examples and live consoles are always 100% up to date.

Step-by-Step Onboarding

When guiding a developer through a multistep journey (e.g. Register → Verify → Transact), you don't want to overwhelm them with 100 irrelevant endpoints. Pluck and display only the relevant endpoint at each step.

Microservice Storytelling

Modern architectures divide APIs across dozens of microservices. <rapi-doc-mini> allows you to pluck 1 endpoint from Billing, 1 from Identity, and 1 from Catalog into a unified narrative without merging backend specs.

Release Notes & Changelogs

Announce a new or deprecated endpoint in your product changelog by embedding the live interactive card directly into the release announcement with a working "TRY" console.

Interactive Demo 1

Seamless Blog & Guide Embedding

Just like an <img> tag, <rapi-doc-mini> drops directly into any HTML flow. Notice how it blends seamlessly with the page background, allowing you to trigger live API requests without being trapped inside an iframe or nested card:

blog-embed.html

<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>

<rapi-doc-mini
  spec-url="/specs/reqres.yaml"
  color-scheme="dark"
  paths-expanded="false"
> </rapi-doc-mini>

Live Component Output (Blended with Page)

Interactive Demo 2

Placement, Sizing & Custom CSS Styling

Just like an <img> or <div> tag, <rapi-doc-mini> can be styled with standard CSS. You can easily constrain its width, apply custom border and border-radius, adjust padding, or attach box shadows to fit your exact layout requirements:

custom-styling.html

<!-- Custom width, golden border, table schema, and padding -->
<rapi-doc-mini
  style="max-width: 650px; width: 100%; border: 2px solid #eab308; border-radius: 8px; padding: 12px; margin: 16px 0;"
  spec-url="/specs/reqres.yaml"
  color-scheme="dark"
  schema-style="table"
  layout="column"
  paths-expanded="false"
> </rapi-doc-mini>

<!-- Compact single-endpoint card with salmon accent border -->
<rapi-doc-mini
  style="max-width: 650px; width: 100%; border: 1px solid #f87171; border-radius: 6px; padding: 8px; margin: 16px 0;"
  spec-url="/specs/reqres.yaml"
  color-scheme="dark"
  match-paths="post /users"
  paths-expanded="false"
> </rapi-doc-mini>

Custom Width (650px), Golden Border & Padding

Single-Endpoint Card with Salmon Accent Border

Interactive Demo 3

Selective Endpoint Filtering with `match-paths`

Instead of rendering an entire specification, use match-paths to extract and display only the exact endpoint needed for your narrative (e.g. match-paths="post /users"):

filter-endpoint.html

<rapi-doc-mini
  spec-url="/specs/reqres.yaml"
  color-scheme="dark"
  paths-expanded="false"
  match-paths="post /users"
> </rapi-doc-mini>

Filtered Output: Only POST /users

Interactive Demo 4

Multi-Endpoint Selection with RegEx

Set match-type="regex" to craft powerful regular expression filters. Below, we match both GET /users/{userId} and POST /users simultaneously while rendering schemas as clean data tables:

regex-filter.html

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

RegEx Match: GET /users/{userId} & POST /users

Interactive Demo 5

Always-Expanded Inline Mode (`paths-expanded="true"`)

If click-to-expand accordion controls do not fit your article flow, set paths-expanded="true" to render parameters, request body schemas, and the live test console fully expanded:

expanded-mode.html

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

Fully Expanded Inline View

Interactive Demo 6

Multi-Spec Microservice Integration

Seamlessly weave endpoints from multiple independent OpenAPI specs into a cohesive story. Below, we embed an endpoint from a Syntax Highlighting service alongside an endpoint from a Petstore service in the same article:

microservices-flow.html

<!-- Service A: Code Highlighting Service -->
<rapi-doc-mini
  spec-url="/specs/code-highlight.yaml"
  color-scheme="dark"
  match-paths="get /code"
  paths-expanded="false"
> </rapi-doc-mini>

<!-- Service B: Store & Inventory Service -->
<rapi-doc-mini
  spec-url="/specs/petstore.json"
  color-scheme="dark"
  match-paths="/store"
  paths-expanded="false"
> </rapi-doc-mini>

Microservice A: Code Highlighting Spec (/specs/code-highlight.yaml)

Microservice B: Petstore Inventory Spec (/specs/petstore.json)

Interactive Demo 7

Handling Unavailable Specs (404 / Network Errors)

If an OpenAPI spec URL is missing, invalid, or returns a 404 HTTP status, <rapi-doc-mini> renders a clean built-in error message without throwing unhandled exceptions or breaking your page layout:

spec-not-found.html

<!-- Graceful error rendering when a spec is unavailable or returns 404 -->
<rapi-doc-mini
  spec-url="/specs/fake-non-existing.json"
  color-scheme="dark"
> </rapi-doc-mini>

Graceful Error State (Non-Existent Spec URL)

API Reference

Supported `<rapi-doc-mini>` Attributes

Configure any of the following HTML attributes directly on the custom element tag to control filtering, theming, layout, and authorization:

Attribute	Type / Allowed	Default	Description
`spec-url`	String	(empty)	URL of the OpenAPI specification file (JSON or YAML) to load and render.
`match-paths`	String	(empty)	Target path and HTTP method filter to selectively render specific endpoints (e.g. "post /users" or "/store").
`match-type`	includes \| regex	includes	Matching strategy for match-paths. Set to "regex" for regular expression matching.
`paths-expanded`	true \| false	false	Controls whether matching endpoints are expanded by default or rendered as collapsible items.
`layout`	row \| column	row	Internal layout of endpoint details (side-by-side parameters and console, or stacked in a column).
`schema-style`	tree \| table	tree	Visual representation of request and response JSON schemas: interactive tree or structured table.
`schema-expand-level`	Number	999	Initial expansion depth for nested schema models and properties.
`theme`	dark \| light	dark	Base color theme preset for the component.
`bg-color`	Hex / CSS color	#1a1a1a	Custom background color for the component container, allowing seamless blending with your page.
`text-color`	Hex / CSS color	(theme default)	Base text color for endpoint descriptions, labels, and parameters.
`primary-color`	Hex / CSS color	#f3705a	Accent highlight color used for primary buttons, active tabs, and HTTP method badges.
`allow-try`	true \| false	true	Enables or disables the interactive "TRY" execution console.
`show-curl-before-try`	true \| false	false	Generates and displays copyable cURL commands directly in the card before execution.
`api-key-name`	String	(empty)	Name of the API key header or query parameter to include in interactive requests.
`api-key-location`	header \| query	header	Target location where the API key value will be injected.
`api-key-value`	String	(empty)	Value of the API key or bearer authorization token.
`server-url`	String	(from spec)	Overrides the base API server URL for all requests made from the widget.
`regular-font`	String	(system font)	Custom font family for body text and labels (e.g. "Outfit, sans-serif").
`mono-font`	String	(monospace)	Custom font family for code blocks, payloads, and parameter definitions.

Architecture

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

Understanding when to use the comprehensive full-portal <rapi-doc> component versus the lightweight, embeddable <rapi-doc-mini> widget:

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

Next Steps

Ready to Integrate RapiDoc?

Check out our Quick Start for copy-paste integration recipes, or explore the complete API reference for full-portal documentation options.

Quick Start Guide Full API Specification Starlight Docs Guide ↗