PureDocs

Beautiful, interactive API documentation from any OpenAPI 3.1 spec.
One function call for Express or Fastify. One Web Component for everything else.

puredocs.dev

Features

• Full OpenAPI 3.1 — paths, callbacks, webhooks, all HTTP methods, $ref resolution, oneOf/anyOf/allOf
• Express & Fastify — add a /docs route in one function call
• Web Component — drop <pure-docs> into React, Vue, Angular, Next.js, Nuxt, Svelte, or plain HTML
• Live Try It Console — send real requests, configure environments, switch auth
• Smart Search — Cmd+K to find endpoints, schemas, webhooks instantly
• Light & Dark Theme — auto-detects system preference or set manually
• Full Auth Support — Bearer, Basic, API Key, OAuth2, OpenID Connect
• Multi-Language Snippets — auto-generated cURL, JavaScript, Python, Go, Rust
• JSON & YAML — load specs in either format
• Markdown in Descriptions — use **bold**, *italic*, `code`, and [links](url) in OpenAPI descriptions; zero deps, XSS-safe
• Zero Config — works out of the box with sensible defaults

Install

npm install puredocs

Quick Start

Express

import express from 'express';
import { pureDocs } from 'puredocs';

const app = express();

pureDocs.express(app, {
  route: '/docs',
  specUrl: '/openapi.json',
});

app.listen(3000);

Fastify

import Fastify from 'fastify';
import { pureDocs } from 'puredocs';

const app = Fastify();

pureDocs.fastify(app, {
  route: '/docs',
  specUrl: '/openapi.json',
});

await app.listen({ port: 3000 });

HTML

<pure-docs
  spec-url="/openapi.json"
  theme="auto"
></pure-docs>

<script type="module">
  import 'puredocs/web';
  import 'puredocs/style.css';
</script>

CDN (no bundler)

<link rel="stylesheet" href="https://unpkg.com/puredocs/dist/puredocs.css" />

<pure-docs spec-url="/openapi.json" theme="auto"></pure-docs>

<script src="https://unpkg.com/puredocs/dist/puredocs.umd.js"></script>

Raw HTML Generation

const html = pureDocs.html({
  specUrl: '/openapi.json',
  title: 'My API',
  theme: 'auto',
});
// Returns a full self-contained HTML string — serve it however you want

Configuration

Web Component Attributes

Server API Options

Works with Any Framework

PureDocs is a standard Web Component. It works in any framework that supports custom elements:

• React / Next.js — import 'puredocs/web' then use <pure-docs> in JSX
• Vue / Nuxt — add isCustomElement config, then use <pure-docs> in templates
• Angular — add CUSTOM_ELEMENTS_SCHEMA, then use <pure-docs> in templates
• Svelte — use <pure-docs> directly
• Plain HTML — just add the <script> and <link> tags

Development

bun run dev          # dev server with hot reload
bun run build        # production build
bun run typecheck    # type checking

License

See LICENSE.