RapiDoc

RapiDoc is a custom element, built on Lit, that turns an OpenAPI 3.x or Swagger 2.0 document into a fully interactive documentation page with a single HTML tag and no framework or build step required. Beyond static reference docs, it ships a working API console that lets viewers fill in parameters with pre-populated sample data and fire real requests against the documented API, with request and response shown side by side.

Because it’s a standard custom element rather than a framework-specific component, it works equally well dropped into a plain HTML page or embedded inside a React, Vue, or Angular application. Extensive theming and branding attributes (dark/light themes, custom fonts, logo replacement, header hiding) let teams match it to their own site rather than shipping a generic-looking doc page, and it doubles as a standalone JSON Schema viewer for schemas that don’t need a full API spec around them.

What You Get

• A <rapi-doc> custom element that renders full interactive documentation from any OpenAPI 3.x or Swagger 2.0 spec URL or inline object
• A live API console with pre-filled example requests, side-by-side request/response panes, and one-click execution
• Built-in authentication UI for API keys, Basic auth, and OAuth2, plus a dedicated OAuth callback handler
• Extensive theming attributes (dark/light themes, custom fonts, colors, logo) for matching a host site’s branding
• A standalone JSON Schema viewer element for rendering schemas outside a full API document

Common Use Cases

• Serving interactive docs for an internal or public REST API from its OpenAPI spec
• Replacing Swagger UI in projects that want a lighter, framework-agnostic web component
• Embedding branded API reference docs inside an existing React, Vue, or Angular app shell
• Reviewing draft OpenAPI specs locally before publishing them

Under The Hood

Architecture Execution begins in the entry module, which registers the custom elements (the main documentation viewer, a minified variant, a JSON Schema viewer, and an OAuth callback receiver) as Lit-based web components. The core RapiDoc class owns a broad set of reactive attributes that drive rendering through template functions covering the navigation bar, endpoints, servers, and security schemes — a large stateful controller paired with a library of view functions rather than a tree of independently encapsulated child components, though the more interactive pieces (request builder, response viewer, schema tree, JSON tree) are promoted into standalone components. Data flows in one direction: attribute changes trigger Lit’s reactive update cycle, which resolves and normalizes the OpenAPI or Swagger document into a flattened internal structure that templates read directly, meaning changes to the core spec-parsing shape would ripple broadly through the templates that depend on it.

Tech Stack Built on Lit for reactive web components with no framework lock-in, paired with a dedicated OpenAPI/Swagger resolver for spec parsing and validation, a Markdown renderer for descriptions, and a syntax highlighter covering several languages for code samples. The build is Webpack-driven with Babel transpilation, Terser minification, and gzip compression, producing a single minified bundle with no server component — deployment is dropping a script tag into any HTML page. A bundled Docker setup serves the built docs/demo site.

Code Quality No test files or test framework were found anywhere in the repository, and there is no CI workflow beyond a spell-check action — no automated build or lint checks run on pull requests. Error handling is inconsistent: the spec-processing entry point wraps parsing in a try/catch, but downstream template functions largely assume well-formed spec data without defensive checks. Naming is consistent, mapping camelCase properties to kebab-case HTML attributes, and the codebase is plain JavaScript with no TypeScript or runtime type checking. ESLint with an established style guide is configured and is the only quality gate present.

API Design Adoption is very easy for a browser context — a single custom element with a spec-url attribute and no JavaScript required beyond a script tag, degrading gracefully across React, Vue, Angular, and plain HTML since it’s a standard custom element. The attribute surface is large but self-documenting via consistent kebab-case naming, and the built-in console removes the need for a companion tool just to try an endpoint. Documentation leans on example-driven demo pages rather than a single API reference, so discovering the full attribute surface requires reading the component’s source or the external quickstart site.