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

Table of contents

• Installation
• Features
• Docs & Community
• Quick Start
• Philosophy
• Examples
• 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

<div id="notebook" style="overflow-y: auto;align-self: stretch;align-items: center;flex: 1 1 0;"></div>

• Your typescript code

    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:

// 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 in the source code.

Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js. 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.

Installation is done using the npm install command:

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