swagger-themes

Library for measuring the topic of Swagger documentation

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
swagger-themes
1201.2.2221 days ago5 months agoMinified + gzip package size for swagger-themes in KB

Readme

Swagger themes

Library documentation language:

EN RU UA

Navigation

Installation Example usage
* [Use with Express](#use-with-express)
* [Use with NestJS](#use-with-nestjs)
Themes Contacts

English

This library adds the ability to "painlessly" change your Swagger documentation theme.

Installation

npm

npm i swagger-themes

yarn

yarn add swagger-themes

Example usage

Connecting and using the library
const { SwaggerTheme } = require('swagger-themes');

const theme = new SwaggerTheme('v3'); // Specifying the Swagger Version
const darkStyle = theme.getBuffer('dark'); // Getting a Style

Use with Express

Standard Example

Standard dark theme connection with Express. The connection takes place via the swagger-ui-express library
const express = require('express');
const swaggerUi = require('swagger-ui-express');
const { SwaggerTheme } = require('swagger-themes');
const swaggerDocument = require('./swagger.json');

const app = express();
const theme = new SwaggerTheme('v3');

const options = {
  explorer: true,
  customCss: theme.getBuffer('dark')
};

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, options));

Two Swagger document

Connecting 2 documentation files. For example - 2 different themes are used
const express = require('express');
const swaggerUi = require('swagger-ui-express');
const { SwaggerTheme } = require('swagger-themes');
const swaggerDocument = require('./swagger.json');

const app = express();
const theme = new SwaggerTheme('v3');

const optionsV1 = {
  explorer: true,
  customCss: theme.getBuffer('dark')
};
const optionsV2 = {
  explorer: true,
  customCss: theme.getBuffer('classic')
}

app.use('/api-docs/v1', swaggerUi.serve, swaggerUi.setup(swaggerDocument, optionsV1)); // Dark theme documentation
app.use('/api-docs/v2', swaggerUi.serve, swaggerUi.setup(swaggerDocument, optionsV2)); // Classic theme documentation

Get default config

The method of getting the default config for the swagger library is ui-express
const express = require('express');
const swaggerUi = require('swagger-ui-express');
const { SwaggerTheme } = require('swagger-themes');
const swaggerDocument = require('./swagger.json');

const app = express();
const theme = new SwaggerTheme('v3');

const optionsV1 = theme.getDefaultConfig('dark');
const optionsV2 = theme.getDefaultConfig('classic');

app.use('/api-docs/v1', swaggerUi.serve, swaggerUi.setup(swaggerDocument, optionsV1)); // Dark theme documentation
app.use('/api-docs/v2', swaggerUi.serve, swaggerUi.setup(swaggerDocument, optionsV2)); // Classic theme documentation

Use with NestJS

Standard Example

Standard dark theme connection with NestJS. The connection takes place via the @nestjs/swagger library
// file main.ts
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { SwaggerTheme } from 'swagger-themes';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  const theme = new SwaggerTheme('v3');
  const options = {
    explorer: true,
    customCss: theme.getBuffer('dark')
  };
  SwaggerModule.setup('api', app, document, options);

  await app.listen(3000);
}
bootstrap();

Two Swagger document

Connecting 2 documentation files. For example - 2 different themes are used
// file main.ts
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { SwaggerTheme } from 'swagger-themes';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  const theme = new SwaggerTheme('v3');
  const optionsV1 = {
    explorer: true,
    customCss: theme.getBuffer('dark')
  };
  const optionsV2 = {
    explorer: true,
    customCss: theme.getBuffer('classic')
  };
  SwaggerModule.setup('api-v1', app, document, optionsV1);
  SwaggerModule.setup('api-v2', app, document, optionsV2);

  await app.listen(3000);
}
bootstrap();

Get default config

The method of getting the default config for the swagger library is @nestjs/swagger
// file main.ts
import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { SwaggerTheme } from 'swagger-themes';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  const theme = new SwaggerTheme('v3');
  const optionsV1 = theme.getDefaultConfig('dark');
  const optionsV2 = theme.getDefaultConfig('classic');
  
  SwaggerModule.setup('api-v1', app, document, optionsV1);
  SwaggerModule.setup('api-v2', app, document, optionsV2);

  await app.listen(3000);
}
bootstrap();

Themes

classic
Classic
dark
Dark
feeling-blue
Feeling blue
flattop
Flattop
material
Material
monokai
Monokai
muted
Muted
newspaper
Newspaper
outline
Outline

My contacts

VK Telegram GitHub

Thanks to


License