@nestia/editor
Swagger-UI embedding Cloud TypeScript Editor and SDK.
- Live Preview
- Shopping Mall Example: https://nestia.io/editor/?url=shopping.json
- Swagger File Uploader: https://nestia.io/editor
- Guide Documents: https://nestia.io/docs/editor
- Github Repository: https://github.com/samchon/nestia
@nestia/editor
is a combination of Swagger-UI and web-based TypeScript editor (of StackBlitz) embedding SDK (Software Development Kit) library generated from an OpenAPI Document.
With the @nestia/editor
, you can easily test the backend API with TypeScript code, and it is much convenient than the traditional way of using only the Swagger-UI, due to type checking and auto-completion of the TypeScript.
Also, @nestia/editor
provides Mockup Simulator of the backend API functions. With the mockup simulator, you can start the frontend (or client) development even when the backend API funtions have not been implemented yet. Furthermore, @nestia/editor
supports automatic E2E (end-to-end) test functions' generation, so that you can easily validate the backend API functionns with the automatically generated test codes.
Here are the some example projects generated by @nestia/editor
. Traveling those example projects, you may understand how to utilize the @nestia/editor
. Let's start the type safe API interaction development with @nestia/editor
!
- Concepts
- SDK: collection of typed fetch functions with DTO structures
- Mockup Simulator: embedded backend simulator in the SDK
- Demo Editors
React Library
import { NestiaEditorIframe } from "@nestia/editor";
import { SwaggerV2, OpenApiV3, OpenApiV3_1 } from "@samchon/openapi";
const document: SwaggerV2 | OpenApiV3 | OpenApiV3_1;
<NestiaEditorIframe swagger={document}
e2e={true}
simulate={true} />
<NestiaEditorUploader />
Install @nestia/editor
and import one of below components.
If you've prepared the Swagger Document to serve, you can directly launch the cloud editor by using the NestiaEditorIframe
component. Otherwise you want to provide a "Swagger File Uploader" for dynamic purpose, utilize the NestiaEditorUploader
component instead.
-
NestiaEditorIframe
: directly launch the cloud editor by given document -
NestiaEditorUploader
: upload theswagger.json
file and launch the cloud editor
Static Hosting
Unzip and place your swagger.json
file into the extracted directory.
Just download unzip the above editor.zip
file, and place your swagger.json
(or swagger.yaml
) file into the extracted directory. When you open the unzipped index.html
in your browser, you can see the @nestia/editor
is serving the "TypeScript Swagger Editor" application with your swagger.json
(or swagger.yaml
) file.
Also, if you want to activate the Mockup Simulator or automatic e2e test functions' generation, guide the users to fill the simulate
and e2e
query parameters with true
in the URL address like http://localhost/?simulate=true&e2e=true
.
By the way, if you do not place the swagger.json
(or swagger.yaml
) file into the directory, the @nestia/editor
will just show you the "Swagger File Uploader" (NestiaEditorUploader
) instead.
<iframe>
Embedding
<iframe url="https://nestia.io/editor/?url={URL_ADDRESS}&simulate=true&e2e=true"></iframe>
You also can embed the @nestia/editor
with static URL address.
When embedding the @nestia/editor
application through the <iframe>
tag, fill the url
query parameter with the URL address of your swagger.json
(or swagger.yaml
) file. Also, the simulate
and e2e
query parameters are optional, but recommended to be filled with true
for the best experience. As you know, they activate the Mockup Simulator and automatic e2e test functions' generation.
By the way, if you do not fill the url
query parameter, the @nestia/editor
will just show you the "Swagger File Uploader" (NestiaEditorUploader
) instead.
If you wanna see the example cases of the <iframe>
embedding, let's see the below list again.
- BBS (Bullet-in Board System): https://nestia.io/editor/?url=bbs.json
- Shopping Mall: https://nestia.io/editor/?url=shopping.json
- Clickhouse: https://nestia.io/editor/?url=clickhouse.json
- Fireblocks: https://nestia.io/editor/?url=fireblocks.json
- Uber: https://nestia.io/editor/?url=uber.json
- OpenAI: https://nestia.io/editor/?url=openai.json
Swagger File Uploader
If you visit https://nestia.io/editor without any URL query parameters, the Swagger File Uploader be loaded.
Just upload your Swagger (OpenAPI document) file, and click the "generate editor" button. Then, TypeScript SDK library would be generated from your OpenAPI document, and it would be combined with the traditional Swagger-UI in the Cloud TypeScript Editor.
Top comments (0)