# @tealina/doc-ui

> For visualize and interact API's resources.

Latest version **2.0.1** (published 2026-04-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tealina/doc-ui
pnpm add @tealina/doc-ui
yarn add @tealina/doc-ui
bun add @tealina/doc-ui
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2026-04-06 |
| First published | 2023-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.19 |
| Dependencies | 1 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Neo Yeo |
| Maintainers | neo.yung |

## Links

- npm: https://www.npmjs.com/package/@tealina/doc-ui
- npm.io page: https://npm.io/package/@tealina/doc-ui

## Dependencies (1)

- [@tealina/doc-types](https://npm.io/package/@tealina/doc-types.md) 1.1.0-beta.0

## Recent versions

- 2.0.1 (latest) — 2026-04-06
- 2.0.0-beta.1 (beta) — 2025-08-30
- 2.0.0 — 2025-11-29
- 2.0.0-beta.0 — 2025-08-27
- 1.0.5 — 2024-01-06
- 1.0.4 — 2024-01-06
- 1.0.3 — 2023-12-12
- 1.0.2 — 2023-12-02
- 1.0.1 — 2023-11-25
- 1.0.0 — 2023-11-25
- 0.0.5 — 2023-11-19
- 0.0.4 — 2023-11-19
- 0.0.3 — 2023-11-19
- 0.0.2 — 2023-11-11
- 0.0.1 — 2023-10-12

## README

Automatically generates modern UI components for visualizing and interacting with your API resources.

**Key Features:**
- 🔍 **Ctrl+K Search**: Instant API endpoint search with keyboard shortcuts
- 🎨 **VS Code Color Scheme**: Familiar dark/light theme with syntax highlighting matching VS Code's style
- 📝 **Form Generation**: Auto-generates interactive forms with proper input fields for each API endpoint
- 🔄 **Dual Specification Support**: Renders from both [`@tealina/doc-types`](https://www.npmjs.com/package/@tealina/doc-types) and OpenAPI specifications
- 🔄 Supports multiple API versions through config
### Install

```bash
pnpm add @tealina/doc-ui

yarn add @tealina/doc-ui

npm i @tealina/doc-ui
```

### Usage

#### 1. Create Documentation Route

```typescript
// buildDocRoute.ts
import express, { Router } from 'express';
import path from 'node:path';
import {
  TealinaVdocWebConfig,
  getAssetsPath,
  assembleHTML,
} from '@tealina/doc-ui';

const VDOC_BASENAME = '/api-doc';

const vDocConfig: TealinaVdocWebConfig = {
  sources: [
    {
      baseURL: '/api/v1',
      jsonURL: './v1.json',
      name: 'v1',
    },
  ],
  errorMessageKey: 'message',
  features: {
    playground: {
      // Configure playground options
    },
  },
};

const docRouter = Router({ caseSensitive: true })
  .get('/index.html', async (req, res) => {
    const html = await assembleHTML(vDocConfig);
    res.send(html);
  })
  .get('/v1.json', (req, res) => {
    res.sendFile(path.resolve('docs/api-v1.json'));
  })
  .use(express.static(getAssetsPath()));

export { docRouter, VDOC_BASENAME };
```

#### 2. Register Documentation Route

```typescript
// server.ts
import express from 'express';
import { VDOC_BASENAME, docRouter } from './buildDocRoute';

const app = express();
app.use(VDOC_BASENAME, docRouter);
app.listen(5000, () => {
  console.log('Server running on http://localhost:5000');
});
```

#### 3. Access Documentation

Start your server and open:
```
http://localhost:5000/api-doc/index.html
```

---
_Source: https://npm.io/package/@tealina/doc-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._