RapiDoc is an MIT-licensed JavaScript custom element that renders Swagger 2.0 and OpenAPI 3.x specifications as interactive API documentation inside any web page or framework.

What it is

RapiDoc is a WebComponent — a custom element — built in JavaScript for viewing OpenAPI specifications. It lives in the OpenAPI and Swagger documentation ecosystem, and its topic list places it alongside swagger-ui, swagger, open-api, openapi3 and rest. The project ships as a single built file, rapidoc-min.js, which is dropped into a script tag in an HTML document rather than deployed as a standalone server-rendered application. It can also be embedded inside another HTML document or used within React, Vue, Angular and lit-element, and it can be styled with standard CSS for padding, position, border and margin.

The concrete problem it solves is the friction of reading and exercising an API specification. In default viewer layouts, models and examples are collapsed and demand clicks to reveal, request fields sit empty, and the reader must assemble a call by hand. RapiDoc expands all models and examples by default, pre-populates request fields with sample data, and makes an API call take one click. Request and response can be placed side-by-side for comparison. Displays can be branded through theme, logo, typography and colour controls, so an organisation can present a spec according to its own style guide instead of a fixed template.

Key capabilities

• Renders both Swagger 2.0 and OpenAPI 3.x.x specifications.
• Provides an option to load a local JSON spec directly from disk.
• Works with any framework or with no framework, including React, Vue, Angular and lit-element, and reacts to attribute changes made from JavaScript.
• Expands all models and examples by default, pre-populates request fields with sample data, and makes an API call with one click, with request and response options placed side-by-side.
• Supports branding and personalisation: two built-in themes (dark and light), replacement of the default logo, font and typography changes, and control over text colour, button colour, header colour and other UI elements.
• Allows external content to be added above and below the document, including images, links, text and forms.
• Supports lockdown controls: disabling the API calling feature, hiding the header so a user cannot load another OpenAPI spec, and hiding authentication in favour of a pre-generated API key.
• Builds to the single file rapidoc-min.js; supported on Chrome, Firefox and Safari, and not yet tested on Edge.

Who uses it and how

• Teams that want API reference material embedded inside an existing product page or application, since the element can be embedded in another HTML document and consumed from React, Vue, Angular and lit-element.
• Organisations with a published style guide, which use the logo replacement, typography and colour controls to match documentation to their own brand.
• Internal or partner-facing deployments where calling should be restricted: teams disable the API calling feature, hide the header, or hide authentication and supply their own pre-generated API key.
• Developers who work offline or from a local build, loading a local JSON spec from disk through the rapidoc-min.js script tag.
• The project is sponsored by Zuplo, which offers documentation, rate-limiting and API-key authentication for customer-facing APIs. The repository shows 1898 stars, 326 forks and 138 open issues.

Getting started

Clone or download the project and run npm install, then npm run build to generate rapidoc-min.js, the only file needed, which is used in a script tag in an HTML document. For development, npm run serve starts a web server on port 8080.

How it compares

The topic list names swagger-ui, placing RapiDoc in the same OpenAPI documentation space as Swagger UI. The difference the README states is packaging and embedding: RapiDoc is delivered as a custom element that can be embedded inside another HTML document or a framework such as React, Vue, Angular or lit-element, and configured through attributes and standard CSS.

When to use it — and when not to

A self-hoster only needs to serve the built rapidoc-min.js file alongside a spec; no database, object storage or SMTP service is mentioned in the build or feature descriptions. RapiDoc is a poor fit for teams that need a command-line interface, localisation support, PDF generation improvements or Web Content Accessibility Guidelines 2 conformance today, since all of these sit on the roadmap as unfinished work, and it has not yet been tested on Edge. The 138 open issues and the roadmap's outstanding items on automated testing and a live playground are worth weighing before adopting it for a large documentation programme.

# Clone / Download the project then
npm install

# build will generate rapidoc-min.js, this is the only file you will need.
# use it in the script tag of your html <script type="text/javascript" src="rapidoc-min.js"></script></body>
npm run build 

# for development use yarn serve (this will start an webserver at port 8080, then navigate to localhost:8080) 
npm run serve