<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>

<script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-132775238-1');

</script>

<script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">

<meta name="keywords" content="RapiDoc, openapi viewer, openapi to html, openapi renderer, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST, themes, dark mode, markdown, API documentation">

<link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

<!-- Fonts -->

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Exo:wght@300;500&display=swap" rel="stylesheet">

<link rel="stylesheet" href="./index.css">

<link rel="stylesheet" href="table.css">

<title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>

<style>

.m-table {

width:100%;

}

#main-img{

width:740px;

}

.container {

border:1px solid #aaa;

border-radius: 4px;

margin:12px;

padding:8px;

width: 200px;

display:flex;

flex-direction: column;

align-items: center;

box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);

transition: box-shadow 0.2s, transform 0.2s, color 0.2s;

}

.container.solid-light{

border-width: 0;

box-shadow: 0 3px 0 0 #b7c3d1, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;

background-color: #EFEFEF;

background-image: linear-gradient(-45deg, #E6EAEF, #e4edf1);

color: #252730;

}

.container.solid-light:hover {

box-shadow: 0 3px 0 0 #b7c3d1, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;

}

.container.solid-dark {

border-width: 0;

box-shadow: 0 3px 0 0 #1e1f26, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;

background-color: #3F4351;

background-image: linear-gradient(-45deg, #3F4351, #384758);

color: #E6EAEF;

}

.container.solid-dark:hover {

box-shadow: 0 3px 0 0 #1e1f26, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;

}

.container.solid-dark a {

font-weight:300;

color: #ffffffee;

}

</style>

<div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">

<div style="padding:15px 20px 15px 20px; ">

Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>

</div>

<div style="padding:2px 20px 2px 20px; ">

<a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>

</div>

</div>

<div class="banner" style="max-height:400px; overflow:hidden;">

<div class="topbar">

<div class="header">

<a class="menu-item" data-action="url" href="./index.html">

<img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>

</a>

<div class="product-name">RapiDoc</div>

<div class="menu" style="flex:1"></div>

<nav class="menu" onclick="goToSection(event)">

<a class="menu-item" data-action="url" href="./index.html"> Home </a>

<a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>

<a class="menu-item" data-action="url" href="./examples.html"> Examples </a>

<a class="menu-item" data-action="url" href="./api.html"> API </a>

<a class="menu-item hide-in-mobile" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>

</nav>

</div>

</div>

<!--Waves Container-->

<div>

<svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

<defs>

<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />

</defs>

<g class="parallax">

<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />

<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />

<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />

</g>

</svg>

</div>

<!--Waves end-->

</div>

<div style="display:flex; width:100%; flex-wrap:wrap; justify-content:center;">

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';">

<h2 style="font-weight:700"> How To Use </h2>

<div class="row">

<img style="width:32px" src="./images/html5-logo.png"/>

<img style="width:32px" src="./images/react-logo.png"/>

<img style="width:32px" src="./images/vue-logo.png"/>

</div>

</div>

<div class = "container" style="cursor: pointer;" onclick="window.location='./examples/api-demo.html';">

<a href="./examples/api-demo.html"> RapiDoc API Demo </a>

<img style="width:32px" src="./images/settings.png"/>

<div class = "c-description" >

Demo of various UI customization attributes and events

</div>

<a href="./api.html"> Full API Details </a>

</div>

<div class = "container" >

Petstore

<img style="width:32px" src="./images/dog.png"/>

<a href="./examples/example1.html"> Basic Petstore </a>

<a href="./examples/petstore-extended.html"> Extended Petstore </a>

</div>

<div class = "container" >

<div style="padding: 0 0 10px 0">Render Style (light theme)</div>

<div class="row">

<div class="col">

<img style="width:32px" src="./images/mode-view.png"/>

<a href="./examples/example1.html"> View </a>

</div>

<div class="col">

<img style="width:32px" src="./images/mode-read.png"/>

<a href="./examples/read-mode.html"> Read </a>

</div>

<div class="col">

<img style="width:32px" src="./images/mode-focused.png"/>

<a href="./examples/focused-mode.html"> Focused </a>

</div>

</div>

</div>

<div class = "container" >

<div style="padding: 0 0 10px 0">Dark Theme</div>

<div class="row">

<div class="col">

<img style="width:32px;filter:brightness(0.6)" src="./images/mode-view.png"/>

<a href="./examples/example2.html"> Dark View </a>

</div>

<div class="col">

<img style="width:32px;filter:brightness(0.6)" src="./images/mode-read.png"/>

<a href="./examples/read-mode-dark.html"> Dark Read </a>

</div>

</div>

</div>

<div class = "container">

<div>Font Styles</div>

<img style="width:32px" src="./images/font.png"/>

<div class = "c-description col">

<a href="./examples/font.html"> Font Type</a>

<a href="./examples/font-size.html"> Font Size </a>

</div>

</div>

<div class = "container">

<a href="./examples/logo.html"> Change Logo </a>

<div class = "c-description" >

<img style="width:32px" src="./images/logo-outline.png"/>

</div>

</div>

<div class = "container" >

<a href="./examples/themes.html"> Theme </a>

<img style="width:32px" src="./images/paint.png"/>

<div class = "c-description" >

Play with various color schemes

</div>

</div>

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./css-parts.html';">

<h2 style="font-weight:700"> Advanced Styling </h2>

</div>

<div class = "container" >

<div style="padding: 0 0 10px 0">Schema Style</div>

<div class="row">

<div class="col">

<img style="width:32px" src="./images/schema-tree.png"/>

</div>

<div class="col">

<img style="width:32px" src="./images/schema-table.png"/>

</div>

</div>

<a href="./examples/schema-table.html"> Tree / Table </a>

</div>

<div class = "container">

<a href="./examples/schema-expand-level.html"> Schema Expand Level </a>

<img style="width:48px" src="./images/schema-expand.png"/>

<div class = "c-description" >

</div>

</div>

<div class = "container">

<a href="./examples/try.html"> Built in API console </a>

<img style="width:48px" src="./images/console.svg"/>

<div class = "c-description" >

</div>

</div>

<div class = "container" >

<a href="./examples/schema-tab-default.html"> Default Schema View </a>

<div class = "c-description" >

Set the default tab in Schema to EXAMPLE instead on MODEL

</div>

</div>

<div class = "container" >

<a href="./examples/navbar-spacing.html">Navigation Item Spacing</a>

<div class = "c-description" >

Compact / Default / Relaxed

</div>

</div>

<div class = "container" >

<a href="./examples/nav-item-with-method.html">Show color coded API Method in Navigation</a>

<div class = "c-description" >

</div>

</div>

<div class = "container" >

<a href="./examples/nav-item-as-path.html">Use API Paths in Navigation</a>

<div class = "c-description" >

You can override to display API Paths in Navigation Bar instead of summary

</div>

</div>

<div class = "container">

<a href="./examples/example3.html"> Change Header Color </a>

<img style="width:32px" src="./images/header.png"/>

<div class = "c-description" >

</div>

</div>

<div class = "container" >

<a href="./examples/slots.html">Slots - HTML Injection</a>

<div class = "c-description">

Inject custom HTML content at various locations of your document.

</div>

</div>

<div class = "container">

<a href="./examples/markdown.html"> Markdown </a>

<img style="width:32px" src="./images/markdown.png"/>

<div class = "c-description" >

Supports markdown (headings, table, list, code etc)

</div>

</div>

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./rapidoc-mini.html';">

<h2 style="font-weight:700"> RapiDoc Mini </h2>

<div class = "c-description" style="color:#ccc">

RapiDoc Mini - Pluck APIs from OpenAPI Spec into your blog

</div>

</div>

<div class = "container" >

<a href="./examples/links.html">Links</a>

<div class = "c-description">

Provide External and Internal links to varius sections of document

</div>

</div>

<div class = "container" >

<a href="./examples/markdown-headings.html">Markdown headings in Navigation</a>

<div class = "c-description">

Optionally include markdown headings to navigation bar

</div>

</div>

<div class = "container" >

<a href="./examples/tag-focused-mode.html">Tags in focused mode</a>

<div class = "c-description">

Tag clicking on navigation bar

</div>

</div>

<div class = "container">

<a href="./examples/code-highlight.html"> Syntax Highlighting </a>

<img style="width:32px" src="./images/syntax-highlight.png"/>

<div class = "c-description" >

Supports syntax highlighting in markdown for common languages

</div>

</div>

<div class = "container">

<a href="./examples/code-samples.html"> Code Samples </a>

<div class = "c-description" >

Support for x-code-samples (vendor extension) in endpoint definition

</div>

</div>

<div class = "container">

<a href="./examples/badges.html"> Endpoint Badges </a>

<div class = "c-description" >

Annotate endpoints with short color coded labels using x-badges vendor extension

</div>

</div>

<div class = "container">

<a href="./examples/examples-multiple.html"> Examples </a>

<img style="width:32px" src="./images/file-content.png"/>

<div class = "c-description" >

Provide multiple request and response examples for your APIs

</div>

</div>

<div class = "container">

<a href="./examples/file-upload.html"> File Upload </a>

<img style="width:32px" src="./images/upload.png"/>

<div class = "c-description" >

</div>

</div>

<div class = "container">

<a href="./examples/binary-response.html"> Binary Response </a>

<div class = "c-description" >

Download or view binary response

</div>

</div>

<div class = "container">

<a href="./examples/multipart-formdata.html"> Multipart Formdata </a>

<div class = "c-description" >

Submit mixed content such as file(binary) and plain-text using multipart-formdata

</div>

</div>

<div class = "container">

<a href="./examples/request-body-multiple.html"> Multiple Request Body </a>

<img style="width:32px" src="./images/multiple.png"/>

<div class = "c-description" >

</div>

</div>

<div class = "container">

<a href="./examples/arrange-by-tags.html"> Arranging Tags </a>

<img style="width:32px" src="./images/sort.png"/>

<div class = "c-description" >

</div>

</div>

<div class = "container">

<div>Dynamic Parameters</div>

<a href="./examples/dynamic-query-params.html"> Query Parameters - Dynamic </a>

<a href="./examples/dynamic-form-params.html"> Form Parameters - Dynamic </a>

</div>

<div class = "container" >

<a href="./examples/search-by-params.html">Advanced Search</a>

<div class = "c-description" >

Enable/Disable Advanced search

</div>

</div>

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';">

<h2 style="font-weight:700"> OAuth Setup </h2>

</div>

<div class = "container">

<div> OAUTH</div>

<img style="width:32px" src="./images/oauth.png"/>

<a href="./examples/oauth-demo.html"> OAuth Demo </a>

</div>

<div class = "container">

<a href="./examples/oauth-vendor-extension.html"> OAuth Extensions</a>

<div class = "c-description" >

Pre fill client-id and client-secret with vendor extension 'x-client-id' and 'x-client-secret', and pre select

desired scopes with vendor extension 'x-default-scopes'

</div>

</div>

<div class = "container">

<a href="./examples/auth.html"> Authentication (Multiple)</a>

<div class = "c-description" >

Demonstrate various and complex authentication setup for APIs

</div>

</div>

<div class = "container">

<a href="./examples/api-key.html">API Key in RapiDoc Element </a>

<div class = "c-description" >

Declaratively provide your own API Key by using, and can programatically alter it using JS

</div>

</div>

<div class = "container">

<a href="./examples/additional-props.html"> Additional Properties </a>

<div class = "c-description" >

Apart from fixed predefined properties, schema can contain additional properties

</div>

</div>

<div class = "container">

<a href="./examples/example4.html"> Embed RapiDoc In HTML </a>

<div class = "c-description" >

rapi-doc element can exist with other HTML content

</div>

</div>

<div class = "container">

<a href="./examples/mix-html.html"> Embed HTML In RapiDoc </a>

<div class = "c-description" >

Custom HTML content can be inserted in various sections of RapiDoc

</div>

</div>

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';">

<h2 style="font-weight:700"> Performance Tips </h2>

</div>

<div class = "container" >

<a href="./examples/example9.html"> JSON Object as OpenAPI Spec </a>

<div class = "c-description" >

Programmatically load a JSON object (should not contain external JSON refs)

</div>

</div>

<div class = "container" >

<a href="./examples/server-vars.html"> API Server using variables </a>

<div class = "c-description" >

Define API server using variables, to dynamically connect to different servers

</div>

</div>

<div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';">

<h2 style="font-weight:700"> Mix HTML content </h2>

</div>

<div class = "container" >

<a href="./examples/callback.html"> Callbacks </a>

<img style="width:32px" src="./images/callback.png"/>

<div class = "c-description" >

Specs with Callback (webhooks) Info

</div>

</div>

<div class = "container" >

<a href="./examples/open-api-3-1.html"> WebHooks </a>

<img style="width:32px" src="./images/webhook.png"/>

<div class = "c-description" >

OpenAPI 3.1.0 Spec with WebHooks

</div>

</div>

<div class = "container" >

<a href="./examples/multi-datatypes.html"> Multiple DataTypes </a>

<div class = "c-description" >

OpenAPI 3.1.0 allows each field to have multiple data-types in accordance to JSON schema standard

</div>

</div>

<div class = "container" >

<a href="./examples/external-refs.html"> Spec split into multiple files </a>

<img style="width:32px" src="./images/refs.png"/>

<div class = "c-description" >

Large specs split into multiple files referring each other with JSON refs

</div>

</div>

<div class = "container" >

<div>Schema Composition</div>

<img style="width:32px" src="./images/org.png"/>

<a href="./examples/oneof.html"> ONE OF </a>

<a href="./examples/anyof.html"> ANY OF </a>

<a href="./examples/allof.html"> ALL OF </a>

</div>

<div class = "container" >

<div>Collapsable tags</div>

<div class = "c-description" >

In view & focused mode tags can be expanded and collapsed. You may also set each tags initial state <br/>

<a href="./examples/collapsable.html"> View Mode </a> &nbsp;&nbsp; | &nbsp;&nbsp;

<a href="./examples/collapsable-focused.html"> Focused Mode </a>

</div>

</div>

<div class = "container" >

<a href="./examples/mock.html"> Mock API </a>

<div class = "c-description" >

Using a Mocking API service performing realtime request and response

</div>

</div>

<div class = "container" >

<a href="./examples/example100.html"> Play Ground </a>

<img style="width:32px" src="./images/playground.png"/>

<div class = "c-description" >

Shows various things that can be controlled using script

</div>

</div>

</div>

<div style="display:flex; flex-direction: column; margin:20px 32px">

<table class="m-table">

<tr> <th style="text-align:left">List of Test cases</th></tr>

<tr><td class="mono-bold">

<a href="./examples/parameters.html"> Request Parameters</a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/data-types.html"> Data types </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/fill-example-test.html"> Fill various example data types </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/schema-title-and-descriptions.html"> Schema Title and Descriptions </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/readwrite.html"> Read and Write annotations </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/schema-read-and-write-only.html"> Schema Read & Write Only attributes in Request, Response, callback and Webhooks </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/example-with-nested-refs.html"> Provide Examples with nested refs </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/array-and-object-nesting.html"> Array and Object nesting </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/circular.html"> Circular references </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/side-nav-hidden.html"> Read Mode without a Navigation Bar </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/oneof-combinations.html"> One-of combinations </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./tests/nested-allof-and-oneof.html"> Nested all-of & one-of </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/oneof-with-refs.html"> One-of with Refs </a>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/xxx-of-nesting-with-expand-level.html"> Nested one-of along with schema expand level restriction </a>

</td></tr>

<tr> <td class="mono-bold">

<a href="./tests/long-paths.html"> Long paths </a>

</td></tr>

<tr> <td class="mono-bold">

<a href="./tests/long-descriptions.html"> Long descriptions </a>

</td></tr>

<tr> <td class="mono-bold">

<a href="./tests/large-models.html"> Large models </a>

</td></tr>

<tr> <td class="mono-bold">

<a href="./tests/toomany-example-generation.html"> Too many example generation</a>

<span class="gray descr"> Multiple combination of any-of and one-of can generate many examples and lead to browser-crash, this test case ensures that max 10 examples are generated </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/multi-datatypes-test.html"> Multiple DataTypes per field </a>

<span class="gray descr"> Open API 3.1 allows schema field type to contain multiple types. This test case takes care of various cmbinations and nesting of per field multiple data types </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./tests/open-api-3-1.html"> Webhook </a>

<span class="gray descr"> Spec containing WebHooks </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/deprecated-test.html"> Test paths and fields marked deprecated </a>

<span class="gray descr"> Shows how deprecated items are displayed in various sections (params / schema / paths) </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/override-descriptions-from-refs.html"> Override Descriptions from refernces </a>

<span class="gray descr"> New in OpenAPI 3.1.0: When a schema is created based on child references, it can override their descriptions </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/header-as-object.html"> Send request-header parameters using object notation </a>

<span class="gray descr"> Display how request headers are serealized when they are supplied as object notation and explode=true</span>

</td></tr>

<tr><td class="mono-bold">

<a href="./examples/filter-test.html"> Remove / Include endpoints using 'match-paths' and 'x-badge' </a>

<span class="gray descr"> </span>

</td></tr>

<tr><td class="mono-bold">

<a href="./tests/xxx-of-recursive.html"> Various cases </a>

<span class="gray descr"> Spec containing one-of, all-of with primitive types, recursive models and readonly-attributes </span>

</td></tr>

</table>

</div>