TypeScript Swagger Editor - alternative of MSW and Swagger-UI
Tags: swagger, typescript, opensource, openapi
Published: 2024-02-18 14:49:04

## Outline
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abka79giou6mossm0l6o.png)](https://nestia.io/docs/editor)

> 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](https://stackblitz.com/)) for Swagger API (OpenAPI) specifications, with SDK (Software Development Kit) library generated by [`nestia`](https://github.com/samchon/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)](https://stackblitz.com/edit/yyf3nl?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)
    - [Shopping Mall](https://stackblitz.com/edit/eue3bo?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)
    - [Clickhouse](https://stackblitz.com/edit/p5y9u3?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)
    - [Fireblocks](https://stackblitz.com/edit/jvdf9f?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)
    - [Iamport](https://stackblitz.com/edit/ldlfqp?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)
    - [Toss Payments](https://stackblitz.com/edit/hdtksu?file=README.md,test%2Fstart.ts&startScript=swagger&startScript=hello)




## Concepts
"TypeScript Swagger Editor" is a web-based TypeScript editor (of [StackBlitz](https://stackblitz.com/)) for Swagger API specifications, with SDK (Software Development Kit) library generated by [`@nestia/migrate`](https://nestia.io/docs/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](https://nestia.io/docs/sdk/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](https://nestia.io/docs/sdk/e2e), 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](https://trpc.io), but much advanced
  - Mockup Simulator
    - embedded backend simulator in the SDK
    - similar with [msw.js](https://mswjs.io), 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)](https://stackblitz.com/edit/cnqjhx?file=README.md,test%2Fstart.ts&startScript=test:simulate)
- [Shopping Mall](https://stackblitz.com/edit/kz8dfn?file=README.md,test%2Fstart.ts&startScript=test:simulate)
- [Clickhouse](https://stackblitz.com/edit/dbb9ed?file=README.md,test%2Fstart.ts&startScript=test:simulate)
- [Fireblocks](https://stackblitz.com/edit/it52ck?file=README.md,test%2Fstart.ts&startScript=test:simulate)
- [아임포트](https://stackblitz.com/edit/jfqdiv?file=README.md,test%2Fstart.ts&startScript=test:simulate)
- [토스페이먼츠](https://stackblitz.com/edit/l1eczm?file=README.md,test%2Fstart.ts&startScript=test:simulate)

[![Example Case](https://nestia.io/images/editor/stackblitz.png)](https://stackblitz.com/edit/kz8dfn?file=README.md,test%2Fstart.ts&startScript=test:simulate)




## How to use in local
```bash
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](https://nestia.io/docs/migrate)

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`](https://github.com/samchon/nestia) (NestJS), you don't need to build the SDK (Software Development Kit) library by converting from the Swagger Documents. The [`nestia`](https://github.com/samchon/nestia) will automatically generate the much advanced SDK library, just by analyzing your backend application's source code.

> ![Nestia Logo](https://nestia.io/logo.png)
>
> [Nestia](https://github.com/samchon/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](https://trpc.io/)
>   - Mockup simulator means embedded backend simulator in the SDK
>     - similar with [msw.jw](https://mswjs.io/), but fully automated
>
> ![nestia-sdk-demo](https://user-images.githubusercontent.com/13158709/215004990-368c589d-7101-404e-b81b-fbc936382f05.gif)
> 
>> Left is NestJS server code, and right is client (frontend) code utilizing SDK




## Roadmap
Currently, "TypeScript Swagger Editor" is utilizing the [StackBlitz](https://stackblitz.com/) 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.