API Documentation
Developers & Product Teams
Agree On.

// npm install rapidoc
import { useEffect } from 'react';

export default function ApiDocs() {
  // Load RapiDoc in the browser only, so server rendering keeps working
  useEffect(() => {
    import('rapidoc');
  }, []);

  return (
    <rapi-doc
      spec-url="https://rapidocui.com/specs/bookstore.yaml"
      render-style="view"
      style={{ height: '100vh' }}
    />
  );
}

In Next.js, add 'use client' at the top. With TypeScript, declare the element once. Setup details →

<!-- npm install rapidoc -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => import('rapidoc'));
</script>

<template>
  <rapi-doc
    spec-url="https://rapidocui.com/specs/bookstore.yaml"
    render-style="focused"
    style="height: 100vh"
  ></rapi-doc>
</template>

Tell the Vue compiler that rapi- tags are custom elements: one line in vite.config or nuxt.config. Setup details →

# npm install rapidoc, then build an image that needs nothing else
FROM nginx:alpine

# The bundle and its license notices (rapidoc-min.js.LICENSE.txt)
COPY node_modules/rapidoc/dist/rapidoc-min.js* /usr/share/nginx/html/

# Your page and spec: index.html as in the HTML tab, with
# src="rapidoc-min.js" and spec-url="openapi.yaml"
COPY index.html openapi.yaml /usr/share/nginx/html/

No CDN and no outside calls: the page works on an intranet or air-gapped network.