RapiDocv11.0
GitHub
Developer Cheatsheet & Integration Recipes

RapiDoc Quick Start

Curated integration recipes showing how to embed <rapi-doc> into your HTML, configure themes and layout modes, inject custom slots, and programmatically interact with DOM methods and lifecycle events.

16Code Recipes3Layout Modes100%No <iframe> Needed11HTML Slots6+DOM Methods & Events
JS Playground ↗
Getting Started

Getting Started#

Zero-Config HTML Embed

#
Launch Demo

The simplest way to embed RapiDoc. Import the ES module directly from a CDN (unpkg or jsdelivr) and add the <rapi-doc> custom element with your OpenAPI spec URL. No build tools or backend server required.

CDNHTML5Zero-ConfigQuickstart
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"> <!-- Required: RapiDoc uses UTF-8 characters -->
    <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  </head>
  <body>
    <rapi-doc 
      spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
    > </rapi-doc>
  </body>
</html>

Modern Bundlers & Frameworks (React, Vue, Vite)

#
Launch Demo

Install RapiDoc as an npm dependency. Because it is a standardized W3C Web Component, it runs natively inside React, Vue, Svelte, Angular, Astro, Next.js, and Vite without framework-specific wrappers.

npmReactVueViteBundler
App.jsx
// 1. Install via npm or yarn:
// npm install rapidoc

// 2. Import into your application entrypoint:
import 'rapidoc';

// Example in React:
export function ApiDocsPortal() {
  return (
    <rapi-doc
      spec-url="https://petstore.swagger.io/v2/swagger.json"
      render-style="focused"
      style={{ height: '100vh', width: '100%' }}
    />
  );
}
Layout & Modes

Layout & Modes#

Focused Layout (Sidebar + Active Operation)

#
Launch Demo

Displays a high-performance sidebar navigation on the left and renders only the currently selected endpoint on the right. Employs lazy DOM instantiation for lightning-fast speeds even with 10MB+ specs.

render-stylefocusedperformancesidebar
focused-mode.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  render-style="focused"
  show-header="false"
>
</rapi-doc>

Read Layout (Continuous Document Reader)

#
Launch Demo

Renders all endpoints sequentially into a continuous, printable technical document. Ideal for comprehensive API reference manuals, product guides, and technical whitepapers.

render-stylereaddocumentationscroll
read-mode.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  render-style="read"
>
</rapi-doc>

View Layout (Collapsible Accordion Operations)

#
Launch Demo

Presents API tags and operations as an expandable/collapsible accordion hierarchy. Balances overview density with focused exploration.

render-styleviewaccordioncollapsible
view-mode.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  render-style="view"
>
</rapi-doc>

Tabular Schema View (Data Contract Rows)

#
Launch Demo

Switches complex JSON schema models in request bodies and response payloads from interactive collapsible tree views to clean, structured data tables.

schema-styletablemodelstypes
tabular-schemas.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  schema-style="table"
  default-schema-tab="schema"
>
</rapi-doc>
Theming & Branding

Theming & Branding#

Light Theme & Custom Brand Palette

#
Launch Demo

Tailor RapiDoc to match your brand identity. Configure background surfaces, header colors, primary action buttons, and sidebar navigation accents.

themecolorslightbrandingpalette
branded-theme.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  color-scheme="light"
  theme="#2563eb"
  radius="md"
>
</rapi-doc>

Custom Typography & Google Web Fonts

#
Launch Demo

Apply modern typography using Google Fonts or custom font faces. Set regular-font for general interface text and mono-font for code payloads and parameter definitions.

fontstypographyGoogle Fontsstyling
custom-fonts.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
  <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
</head>
<body>
  <rapi-doc
    spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
    regular-font="Outfit, sans-serif"
    mono-font="'JetBrains Mono', monospace"
    font-size="default"
  >
  </rapi-doc>
</body>
</html>

Seamless In-Page Embedding (No <iframe>)

#
Launch Demo

Because RapiDoc is a native custom element, you can seamlessly integrate it directly into existing dashboards or web applications. Disable header bars, server selectors, and intro banners to merge cleanly into your layout.

embeddingno-iframedashboardintegration
embedded-dashboard.html
<!-- Direct embedding inside your dashboard grid without any <iframe> -->
<div class="api-portal-container" style="display: flex; height: 100vh;">
  <aside class="dashboard-sidebar" style="width: 240px;">
    <!-- Your internal app navigation -->
  </aside>

  <main style="flex: 1; overflow: hidden;">
    <rapi-doc
      spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
      render-style="read"
      show-header="false"
      show-info="false"
      allow-authentication="false"
      allow-server-selection="false"
      allow-api-list-style-selection="false"
      style="height: 100%; width: 100%;"
    >
    </rapi-doc>
  </main>
</div>
Slots & Custom HTML

Slots & Custom HTML#

Custom Brand Logo (nav-logo Slot)

#
Launch Demo

Replace default branding with your organization or product logo inside the sidebar navigation header using slot="nav-logo".

slotnav-logobrandinglogo
custom-logo.html
<rapi-doc
  spec-url="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/specs/petstore.yaml"
  render-style="read"
>
  <!-- Injects custom logo into sidebar navigation -->
  <img
    slot="nav-logo"
    src="https://raw.githubusercontent.com/mrin9/RapiDoc/master/docs/assets/images/dog.png"
    alt="Brand Logo"
    style="width: 32px; height: 32px; margin-right: 8px;"
  />
</rapi-doc>

Custom Header Actions & Controls (header Slot)

#
Launch Demo

Inject custom UI components directly into the top navigation bar. Perfect for environment switchers, quick links to external developer portals, or custom login modals.

slotheaderactionscustom-ui
custom-header.html
<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json">
  <!-- Custom controls injected into the top header bar -->
  <div slot="header" style="display: flex; align-items: center; gap: 10px; margin-right: 16px;">
    <span style="background: rgba(16, 185, 129, 0.2); color: #10b981; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 600;">
      v2.4 Production
    </span>
    <button onclick="window.open('https://help.example.com', '_blank')" style="background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;">
      Developer Support ↗
    </button>
  </div>
</rapi-doc>
JavaScript & DOM Interaction

JavaScript & DOM Interaction#

Reactive Attribute Updates via JavaScript

#
Launch Demo

RapiDoc reacts immediately to runtime attribute changes. Use standard document.querySelector("rapi-doc").setAttribute(...) to dynamically switch specifications, toggle dark mode, or supply API credentials.

javascriptsetAttributereactiveapi-keydynamic
reactive-attributes.js
const rapidocEl = document.querySelector('rapi-doc');

// Dynamically swap OpenAPI specification (e.g. from a version dropdown)
rapidocEl.setAttribute('spec-url', 'https://api.example.com/v3/openapi.yaml');

// Toggle between light and dark theme at runtime
rapidocEl.setAttribute('theme', isDarkMode ? 'dark' : 'light');

// Dynamically supply API credentials for interactive 'TRY' requests
rapidocEl.setAttribute('api-key-name', 'Authorization');
rapidocEl.setAttribute('api-key-location', 'header');
rapidocEl.setAttribute('api-key-value', 'Bearer YOUR_JWT_TOKEN');

Programmatic Viewport & State Methods

#
Launch Demo

Control navigation and state programmatically through standard DOM methods exposed on the <rapi-doc> element instance.

methodsscrollToPathsetApiServerDOMcontroller
dom-methods.js
const doc = document.getElementById('the-doc');

// 1. Programmatically scroll to and open a specific endpoint
// Format required: '{http_method}-{path}'
doc.scrollToPath('get-/pets/{petId}');

// 2. Programmatically switch active target API server
doc.setApiServer('https://staging-api.example.com/v1');

// 3. Programmatically supply Basic Auth credentials
doc.setHttpUserNameAndPassword('basic_auth', 'admin_user', 'super_secret_pw');

Intercept Requests & Lifecycle Event Listeners

#
Launch Demo

Listen to custom lifecycle events on <rapi-doc> to intercept outgoing "TRY" requests, inject authorization headers or HMAC signatures, and log server changes.

eventsbefore-tryinterceptheaderstelemetry
lifecycle-events.js
const doc = document.querySelector('rapi-doc');

// Fires before an interactive 'TRY' HTTP request is dispatched
doc.addEventListener('before-try', (e) => {
  const { request } = e.detail;
  // Inject custom correlation ID or dynamic OAuth token
  request.headers.append('X-Request-Trace-ID', crypto.randomUUID());
  request.headers.append('X-Tenant-Slug', 'acme-corp');
});

// Fires when the OpenAPI specification finishes loading and parsing
doc.addEventListener('spec-loaded', (e) => {
  console.log('Spec loaded:', e.detail.title, e.detail.version);
});

// Fires when user selects a different target server
doc.addEventListener('api-server-change', (e) => {
  console.log('Active server changed to:', e.detail.selectedServer);
});

Interactive Authorization Widget (Slots + JS)

#
Launch Demo

A complete working example combining custom HTML header injection with JavaScript to create a 1-click token authorization bar.

interactiveauthslotheaderJavaScript
interactive-auth.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  <script>
    function updateApiKey() {
      const docEl = document.getElementById('api-doc');
      const tokenInput = document.getElementById('token-input');
      docEl.setAttribute('api-key-name', 'api_key');
      docEl.setAttribute('api-key-location', 'header');
      docEl.setAttribute('api-key-value', tokenInput.value);
      alert('API key configured for all interactive TRY requests!');
    }
  </script>
</head>
<body>
  <rapi-doc
    id="api-doc"
    spec-url="https://petstore.swagger.io/v2/swagger.json"
    allow-authentication="false"
  >
    <!-- Custom interactive login bar injected into header slot -->
    <div slot="header" style="display: flex; align-items: center; gap: 8px; margin: 0 16px;">
      <input
        id="token-input"
        type="text"
        placeholder="Enter API token..."
        style="padding: 5px 10px; border-radius: 4px; border: 1px solid #38bdf8; background: transparent; color: #fff; font-size: 13px;"
      />
      <button
        onclick="updateApiKey()"
        style="padding: 6px 14px; background: #0284c7; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;"
      >
        Authorize
      </button>
    </div>
  </rapi-doc>
</body>
</html>
Interactive Sandboxes & Exploration

Looking for Complete Working Examples?

Explore over 50+ live demonstrations covering OpenAPI 3.1 features, OAuth2 workflows, custom schemas, and performance benchmarks in our gallery.

Browse Full Examples GalleryOpen JavaScript Playground ↗Complete API Specification ↗