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

| Attribute | Type | Description | |-----------|------|-------------| | spec-url | string | OpenAPI spec URL (JSON or YAML) | | spec-json | string | Inline OpenAPI object as JSON string | | theme | 'light' \| 'dark' \| 'auto' | Color theme (default: auto) | | title | string | Portal title | | primary-color | string | Accent color (hex) |

Server API Options

| Option | Type | Description | |--------|------|-------------| | specUrl | string | OpenAPI spec URL | | spec | object | Inline OpenAPI object | | title | string | Portal title | | theme | 'light' \| 'dark' \| 'auto' | Color theme | | primaryColor | string | Accent color | | route | string | Route path (default: /docs) |

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.