TypeScript Swagger Editor

Swagger file uploader

orClick Hereto select swagger.json/yaml file

Mode

Software Development KitNestJS Project

Options Mockup SimulatorE2E Test Functions

Generate Editor

Put your swagger.json file, then "TypeScript Swagger Editor" be opened.

"TypeScript Swagger Editor" is a web-based TypeScript editor (of StackBlitz (opens in a new tab)) 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.

Here are the some example projects generated by "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"!

• Concepts
  • SDK: collection of typed fetch functions with DTO structures
  • Mockup Simulator: embedded backend simulator in the SDK
• Demo Editors
  • BBS (Bullet-in Board System): SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • Shopping Mall: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • Clickhouse: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • Fireblocks: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • Uber: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • 아임포트: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)
  • 토스페이먼츠: SDK & Simulator (opens in a new tab) / NestJS Project (opens in a new tab)

(opens in a new tab)

How to use in local

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

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.

Roadmap

Currently, "TypeScript Swagger Editor" is utilizing the StackBlitz (opens in a new tab) 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.