Static Pre-Rendering & SSG

// prerender.mjs - Standalone Node.js / Bun script
import fs from 'node:fs';
import { renderRapiDoc } from '@rapidoc/prerender';

// 1. Pre-render the OpenAPI specification into Declarative Shadow DOM
const staticHtml = await renderRapiDoc({
  spec: './specs/petstore.yaml', // file path, remote URL, or JSON/YAML string
  renderStyle: 'read',           // 'read' | 'view' | 'focused'
  theme: 'ember',                // 'ember' | 'carbon' | 'cobalt' | 'jade' | 'indigo' | hex
  colorScheme: 'dark',           // 'dark' | 'light' | 'system'
  outputMode: 'dsd',             // Declarative Shadow DOM (default)
});

// 2. Wrap inside standard HTML boilerplate with optional client bundle
const htmlPage = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>API Reference</title>
  
  <!-- Client bundle enables interactive Try-It console, live search, and tab switching -->
  <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
</head>
<body style="margin: 0; padding: 0; background: #0f172a;">
  ${staticHtml}
</body>
</html>`;

// 3. Save to disk
fs.writeFileSync('./dist/api.html', htmlPage, 'utf-8');
console.log('API Reference pre-rendered successfully to dist/api.html');

---
// src/pages/api.astro - Astro SSG Page
import { renderRapiDoc } from '@rapidoc/prerender';

// Executed at BUILD TIME on the server
const preRenderedDoc = await renderRapiDoc({
  spec: './public/specs/petstore.json',
  renderStyle: 'read',
  theme: 'ember',
  colorScheme: 'dark',
});
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Petstore API Reference</title>

    <!-- Client bundle hydrates the pre-rendered shadow DOM with zero FOUC -->
    <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
  </head>
  <body style="margin: 0; padding: 0;">
    <!-- Injects server-rendered Declarative Shadow DOM -->
    <Fragment set:html={preRenderedDoc} />
  </body>
</html>

// app/api-reference/page.tsx - Next.js App Router (React Server Component)
import { renderRapiDoc } from '@rapidoc/prerender';
import Script from 'next/script';

export const revalidate = 3600; // ISR: Re-cache once per hour

export default async function ApiReferencePage() {
  const staticDocHtml = await renderRapiDoc({
    spec: 'https://api.example.com/openapi.json',
    renderStyle: 'read',
    theme: 'ember',
    colorScheme: 'dark',
  });

  return (
    <main style={{ minHeight: '100vh', margin: 0, padding: 0 }}>
      {/* Client-side hydration for Try-It console & filter */}
      <Script
        type="module"
        src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"
        strategy="lazyOnload"
      />
      <div dangerouslySetInnerHTML={{ __html: staticDocHtml }} />
    </main>
  );
}

// MDX / Developer Portal Endpoint Embedding (Zudoku / Cosmo Cargo Style)
import { renderEndpoint, renderSchema } from '@rapidoc/prerender';

// Pre-render a single endpoint card inside a guide article
export const shipmentEndpointHtml = await renderEndpoint({
  spec: './specs/logistics.yaml',
  path: '/v1/shipments/{shipmentId}',
  method: 'get',
  theme: 'ember',
  colorScheme: 'dark',
  allowTry: false, // Static documentation view
});

// Pre-render a standalone JSON Schema model
export const schemaHtml = await renderSchema({
  spec: './specs/logistics.yaml',
  schema: 'ShipmentResponse',
  style: 'table', // 'table' or 'tree'
  theme: 'ember',
});

<!-- Declarative Shadow DOM output from renderRapiDoc({ outputMode: 'dsd' }) -->
<rapi-doc theme="ember" color-scheme="dark" render-style="read" layout="column">
  <!-- Native browser Declarative Shadow DOM -->
  <template shadowrootmode="open">
    <style>
      /* Complete scoped design tokens, layout, typography, and method badges */
      :host { all: initial; display: flex; ... }
    </style>
    
    <!-- Complete pre-rendered HTML DOM: navbar, tag groups, endpoints, schemas -->
    <div id="the-main-body" class="body">
      <nav class="nav-bar"> ... </nav>
      <main class="main-content">
        <section class="m-endpoint regular-font get expanded"> ... </section>
      </main>
    </div>
  </template>
</rapi-doc>