TypeScript Swagger Editor - alternative of MSW and Swagger-UI

Outline

Click image, then move to "TypeScript Swagger Editor"

I've made a new type of Swagger supporter, "TypeScript Swagger Editor".

"TypeScript Swagger Editor" is a web-based TypeScript editor (of StackBlitz) for Swagger API (OpenAPI) specifications, with SDK (Software Development Kit) library generated by nestia. It generates SDK types, functions and mockup simulator by analyzing content of the input swagger.json file.

With the cloud "TypeScript Editor", you can easily:

• Tests backend API endpoints with TypeScript editor
• Supports Mockup simulator for pre-testing
• Generator of e2e test functions for validation

If this concept becomes famous, then I'll make standalone web application that can take advantages of both "TypeScript Swagger Editor" and "Swagger UI".

Here are the references:

• Project
  • TypeScript Swagger Editor: https://nestia.io/docs/editor
  • Github Repository: https://github.com/samchon/nestia
• Concepts
  • SDK: collection of typed fetch functions with DTO structures
  • Mockup Simulator: embedded backend simulator in the SDK, similar
• Demo Editors
  • BBS (Bullet-in Board System)
  • Shopping Mall
  • Clickhouse
  • Fireblocks
  • Iamport
  • Toss Payments

Concepts

"TypeScript Swagger Editor" is a web-based TypeScript editor (of StackBlitz) for Swagger API specifications, with SDK (Software Development Kit) library generated by @nestia/migrate.

With the cloud "TypeScript Swagger Editor", you can easily test the backend API with TypeScript code, and it is much convenient than the traditional way of using Swagger UI, due to type checking and auto-completion.

Also, "TypeScript Swagger Editor" provides Mockup Simulator. With the simulator, you can start the frontend (or client) development even when the backend API is not ready yet.

Furthermore, "TypeScript Swagger Editor" supports automatic e2e (end-to-end) test functions' generation, so that you can easily validate the API with the generated test code.

• SDK (Software Development Kit)
  • collection of typed fetch functions with DTO structures
  • similar with tRPC, but much advanced
• Mockup Simulator
  • embedded backend simulator in the SDK
  • similar with msw.js, but fully automated

Demo Editors

Here are the example projects of "TypeScript Swagger Editor".

Traveling those example projects, you may understand how to utilize the "TypeScript Swagger Editor". Let's start the type safe API interaction development with "TypeScript Swagger Editor"!

• BBS (Bullet-in Board System)
• Shopping Mall
• Clickhouse
• Fireblocks
• 아임포트
• 토스페이먼츠

How to use in local

npm install -g @nestia/migrate
npx @nestia/migrate
? Migration mode (Use arrow keys):
  > NestJS
    SDK
? Swagger file location: assets/input/clickhouse.json
? Output directory path: assets/output/clickhouse-sdk-manual
? Mokup Simulator: true
? E2E Test Functions: true

Related document: Nestia > Guide Documents > Migration from Swagger

Install @nestia/migrate globally, and run npx @nestia/migrate command in your terminal. The @nestia/migrate program will inquiry you something. After that, you can generate the SDK library in your local machine, what you've seen in the "TypeScript Swagger Editor".

For reference, if your backend application utilizes nestia (NestJS), you don't need to build the SDK (Software Development Kit) library by converting from the Swagger Documents. The nestia will automatically generate the much advanced SDK library, just by analyzing your backend application's source code.

Nestia is a set of helper libraries for NestJS, supporting below features:

• Only one line required, with pure TypeScript type
• Enhance performance 30x up
  • Runtime validator is 20,000x faster than class-validator
  • JSON serialization is 200x faster than class-transformer
• Software Development Kit
  • Collection of typed fetch functions with DTO structures like tRPC
  • Mockup simulator means embedded backend simulator in the SDK
  • similar with msw.jw, but fully automated

Left is NestJS server code, and right is client (frontend) code utilizing SDK

Roadmap

Currently, "TypeScript Swagger Editor" is utilizing the StackBlitz as the web-based TypeScript editor.

However, if many developers agree with the usefulness of the SDK and are interested in "TypeScript Swagger Editor", I am planning to develop a new standalone web application called @nestia/editor. It will take advantages of both "Swagger-UI" and "TypeScript Swagger Editor", and provide more convenient features for the API interaction development.

I don't know how popular "TypeScript Swagger Editor" would be at this stage, but I hope that I can proceed with the @nestia/editor project as I have created something that front (client) developers desperately need.

Let's nestia together.