HTML Slots & Custom UI

RapiDoc provides built-in extension points through standard Web Component <slot> elements. This allows you to inject brand logos, corporate announcement banners, or custom authorization widgets directly into RapiDoc’s internal layout without modifying source code.

Web Component Named Slots

Because <rapi-doc> is a custom element encapsulated in a Shadow DOM, external DOM elements cannot be arbitrarily injected into its tree. Standard Web Component <slot> elements expose designated insertion zones where you can target specific internal locations using the HTML slot="..." attribute.

<rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json">
  <!-- 1. Brand Logo in Header -->
  <div slot="logo" style="display: flex; align-items: center; gap: 8px;">
    <img src="/brand/logo.svg" alt="Company Logo" width="28" height="28" />
    <span style="font-weight: 700; color: #38bdf8;">Acme API</span>
  </div>

  <!-- 2. Header Utility Link -->
  <div slot="header">
    <a href="https://github.com/company/repo" target="_blank" style="color: #cbd5e1; text-decoration: none; font-size: 13px;">
      GitHub Repo ↗
    </a>
  </div>

  <!-- 3. Fixed Banner (Always visible, does not scroll out of view) -->
  <div
    slot="fixed-header"
    style="background: #10b981; color: #042f2e; text-align: center; padding: 8px; font-weight: 600; font-size: 13px;"
  >
    🚀 Maintenance window scheduled for Sunday at 02:00 UTC.
  </div>

  <!-- 4. Default Slot: Announcement Banner at top of document canvas -->
  <div
    style="background: linear-gradient(90deg, #1e293b, #0f172a); padding: 16px; border-radius: 8px; margin: 16px; border: 1px solid #334155;"
  >
    <h4 style="margin: 0; color: #f8fafc;">✨ Welcome to Acme Cloud API v2.4</h4>
    <p style="margin: 4px 0 0; color: #94a3b8; font-size: 13px;">Review our updated authentication guides and deprecation timelines.</p>
  </div>

  <!-- 5. Auth Notice in Security Modal -->
  <div
    slot="auth"
    style="background: rgba(6, 182, 212, 0.1); border: 1px solid #06b6d4; padding: 12px; border-radius: 6px; margin-bottom: 16px;"
  >
    <p style="margin: 0; font-size: 13px; color: #e2e8f0;">
      🔑 <strong>Need an API Key?</strong> Generate test tokens in the
      <a href="https://console.company.com" target="_blank" style="color: #38bdf8;">Developer Dashboard</a>.
    </p>
  </div>

  <!-- 6. Overview Section Slot -->
  <div
    slot="overview"
    style="margin-top: 12px; padding: 12px; background: rgba(56, 189, 248, 0.08); border-left: 3px solid #38bdf8; border-radius: 4px;"
  >
    <p style="margin: 0; font-size: 13px; color: #cbd5e1;">
      Need assistance integrating our APIs? Join our
      <a href="https://discord.gg" target="_blank" style="color: #38bdf8;">Developer Discord</a>.
    </p>
  </div>

  <!-- 7. Corporate Footer -->
  <footer slot="footer" style="text-align: center; padding: 24px; color: #64748b; font-size: 12px; border-top: 1px solid #1e293b;">
    © 2026 Acme Corp. All rights reserved. • <a href="/terms" style="color: #94a3b8;">Terms of Service</a> •
    <a href="/privacy" style="color: #94a3b8;">Privacy Policy</a>
  </footer>
</rapi-doc>

Complete Slots Reference

The table below outlines all available slot locations defined in RapiDoc’s layout architecture:

Slot Name	Physical Placement	Description & Common Use Cases
`(default)`	Below header, above Overview section	Un-slotted child elements placed directly inside `<rapi-doc>`. Renders at the top of the main canvas. Ideal for system status alerts, migration warnings, or welcome banners.
`fixed-header`	Fixed at the very top of document viewport	Contents that remain permanently pinned at the top and do not scroll out of view.
`logo`	Top utility header (left)	Replaces the default RapiDoc brand logo with your custom company logo image, SVG, or interactive home link.
`header`	Top utility header (right)	Renders custom HTML or buttons after the spec URL input bar. Ideal for GitHub links, external documentation, or environment selectors.
`footer`	Bottom of document canvas	Appends custom markup at the very end of the documentation. Ideal for corporate copyright notices, terms of service, and support contacts.
`nav-logo`	Top of sidebar navigation	Custom branding image or wordmark placed at the top of the sticky sidebar (available in `read` render-style).
`auth`	Inside Authentication / Security modal	Displays custom guidance, API key generation instructions, or company SSO login buttons inside the auth dialog.
`overview`	Inside Overview summary panel	Custom HTML injected inside the API overview card directly underneath the document title and description.
`servers`	Inside Server configuration card	Custom HTML injected inside the server selector panel. Ideal for environment advisories or uptime links.
`operations-top`	Directly above operations list	Global notices, common request headers, or standard query parameter rules applicable across all API calls.
`tag--{tag-name}`	Underneath specific tag section	Custom HTML injected below a tag group header. Format as `tag--{name}` (e.g. `slot="tag--Pet"`).
`{method}-{path}`	Inside specific operation card	Custom HTML injected into a single endpoint section. Format as `{method}-{path}` with hyphens (e.g. `slot="get-/pet/-petId-"`).

Dynamic Tag & Endpoint Slots

In addition to structural container slots, RapiDoc automatically provisions dynamic slot names for every tag group and operation card based on its schema element ID:

Tag Groups: Target a specific tag heading using slot="tag--{tag-name}". For example, to inject documentation specifically underneath the Pet tag group:

<div slot="tag--Pet" style="padding: 10px 16px; background: rgba(16, 185, 129, 0.1); border-radius: 6px;">
  <strong>Pet Operations Guidance:</strong> All pet IDs must conform to UUID v4 formats.
</div>

Individual Operations: Target an individual operation card using slot="{method}-{path}" where path parameters and slashes are preserved:

<div slot="get-/pet/-petId-" style="padding: 8px 12px; background: rgba(56, 189, 248, 0.1); border-radius: 6px;">
  💡 <em>Tip:</em> Responses for this endpoint are cached at our edge nodes for 60 seconds.
</div>