# api-render-ui

**Repository Path**: zc2052/api-render-ui

## Basic Information

- **Project Name**: api-render-ui
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-20
- **Last Updated**: 2026-05-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

api-render-ui is a UI library that pursues simple and efficient data rendering for openapi.

## Table of contents

* [Installation](#Installation)
* [Features](#Features)
* [Docs & Community](#docs--community)
* [Quick Start](#Quick-Start)
* [Philosophy](#Philosophy)
* [Examples](#Examples)
* [License](#license)


[![NPM Version][npm-version-image]][npm-url]
[![NPM Downloads][npm-downloads-image]][npm-downloads-url]
[![OpenSSF Scorecard Badge][ossf-scorecard-badge]][ossf-scorecard-visualizer]

### Usage in typescript project
  - Please install first
  ```
  npm install api-render-ui
  ```
  - Define a container id in the html
  ```html
  <div id="notebook" style="overflow-y: auto;align-self: stretch;align-items: center;flex: 1 1 0;"></div>
  ```
  - Your typescript code
```typescript
    import { ApiRenderer } from "api-render-ui"

    const apiRenderer = new ApiRenderer({
        mountPoint: '#notebook', // 可以是选择器字符串
    });
    // 执行渲染
    apiRenderer.render(openapiSpec);
```

  ### Theme support

  You can control the theme via the `theme` option when creating `ApiRenderer`:

  - Pass a string: `'light'` or `'dark'` to use built-in theme classes.
  - Pass an object: supply a palette (CSS variables or short keys) to set custom colors.

  Examples:

  ```typescript
  // built-in light
  new ApiRenderer({ mountPoint: '#notebook', theme: 'light' }).render(openapiSpec);

  // built-in dark
  new ApiRenderer({ mountPoint: '#notebook', theme: 'dark' }).render(openapiSpec);

  // custom palette
  // custom palette (recommended keys)
  new ApiRenderer({ mountPoint: '#notebook', theme: { main: '#ff7f50', aux: '#ffd1b3', embellish: '#ffc39e', surface: '#fff8f0' } }).render(openapiSpec);
  ```
  
  Palette keys supported:

  - `main` — main (primary) color used for labels and primary accents.
  - `aux` — auxiliary color used for hover and subtle accents.
  - `embellish` / `embellishment` — embellishment color used for active states and outlines.
  - `surface` — background surface color.
  - `primary` — alias for `main`.
  - Any CSS variable name (e.g. `--even-bg`) may also be provided directly.
### Usage in single html
   Please refer to [example](example/animal.html) in the source code.

## Installation

This is a [Node.js](https://nodejs.org/en/) module available through the
[npm registry](https://www.npmjs.com/).

Before installing, [download and install Node.js](https://nodejs.org/en/download/).
Node.js 18 or higher is required.

If this is a brand new project, make sure to create a `package.json` first with
the [`npm init` command](https://docs.npmjs.com/creating-a-package-json-file).

Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):

```bash
npm install api-render-ui
```


## Features

  * convert openapi spec data to api list.Only openapi 3.0+ is supported now.
  * Api unit UI.

## Docs & Community


## Quick Start

## Philosophy

## Examples

## License

[MIT](LICENSE)