Directory

← Back

Swagger

Easily visualize and interact with your REST API

Author

Rating

Popularity

<100

\u0000<p align="center">\n<a href="https://vaadin.com/directory/component/swagger\" target="__blank"><img src="https://user-images.githubusercontent.com/60381251/176435959-29c48982-bbc5-43d0-8769-084074d8c9a3.png\" alt="Vaadin Swagger">\n
\n<a href="https://vaadin.com/directory/component/swagger\"><img alt="Vaadin Directory" src="https://img.shields.io/vaadin-directory/status/swagger?color=6D9A00\">\n<a href="https://vaadin.com/directory/component/swagger\"><img alt="Vaadin Directory version" src="https://img.shields.io/vaadin-directory/v/swagger?color=6D9A00&label=%20\">\n<a href="https://vaadin.com/directory/component/swagger\"><img alt="Vaadin Directory" src="https://img.shields.io/vaadin-directory/stars/swagger?color=6D9A00\">\n<a href="https://preview.f0rce.de/vaadin-swagger/\" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=Demo&color=6D9A00\" alt="Demo">\n
\n<a href="https://github.com/f0rce/vaadin-swagger\" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/f0rce/vaadin-swagger?style=social\">\n

\n\n\n<p align="center">\nEasily visualize and interact with your REST API in your Vaadin project.\n

\n\n<p align="center">\n\n\n<td align="center">\n<img width="5000" height="0" />
\nStatus: Public Beta \uD83C\uDF89
\n<a href="https://github.com/sponsors/f0rce\">Sponsor Program \uD83D\uDC96
Follow me <a href="https://twitter.com/F0rceDev\">@F0rceDev \uD83D\uDC26

\n<img width="5000" height="0" />\n\n\n
\n

\n\n\n## Technical structure\n\n- Swagger UI has been packaged as a web component using Lit (<lit-swagger-ui>)\n- Swagger Editor has be replicated using my own ace and <lit-swagger-ui> in a Vaadin SplitLayout \n\n\n## Future plans\n\nCurrently there is limited to none further functionality / customization besides setting the spec in <lit-swagger-ui> (which is sufficient in my current use case). If there is enough interest or some interesting use cases I am willing to maintain this Vaadin Add-on actively.
If you are missing some functionality or have a feature request please open a new issue.\n\n\n## Install\n\nInstall the component using Vaadin Directory or by adding the swagger-*.jar from the latest release to your project.\n\n\n## Licence\n\nMIT License \u00A9 2022 David Dodlek

Sample code

@Route("")
public class TestView extends Div {

  public TestView() {
    // Set the parent <div> to full size (fullscreen)
    this.setSizeFull();

    // Initialize new SwaggerEditor aka SplitView with AceEditor as primary and SwaggerUI as
    // secondary
    SwaggerEditor swaggerEditor = new SwaggerEditor();

    // Add the spec as soon as SwaggerUI is ready --> this is not neccessary, as the frontend
    // handles it automatically
    swaggerEditor
        .getSwaggerUI()
        .addReadyListener(
            event -> {
              // OpenAPI 3.0 sample
              swaggerEditor.setSpec(
                  "openapi: 3.0.0\n"
                      + "info:\n"
                      + "  version: 1.0.0\n"
                      + "  title: Sample API\n"
                      + "  description: A sample API to illustrate OpenAPI concepts\n"
                      + "paths:\n"
                      + "  /list:\n"
                      + "    get:\n"
                      + "      description: Returns a list of stuff              \n"
                      + "      responses:\n"
                      + "        '200':\n"
                      + "          description: Successful response");
            });

    // Add SwaggerEditor to the parent <div>
    this.add(swaggerEditor);
  }
}
@Route("")
public class TestView extends Div {

  public TestView() {
    // Set the parent <div> to full size (fullscreen)
    this.setSizeFull();

    // Initialize new SwaggerUI
    SwaggerUI swaggerUI = new SwaggerUI();

    // Set the size to fullscreen to match parents height/width
    swaggerUI.setSizeFull();

    swaggerUI.addReadyListener(
        event -> {
          // OpenAPI 3.0 sample
          swaggerUI.setSpec(
              "openapi: 3.0.0\n"
                  + "info:\n"
                  + "  version: 1.0.0\n"
                  + "  title: Sample API\n"
                  + "  description: A sample API to illustrate OpenAPI concepts\n"
                  + "paths:\n"
                  + "  /list:\n"
                  + "    get:\n"
                  + "      description: Returns a list of stuff              \n"
                  + "      responses:\n"
                  + "        '200':\n"
                  + "          description: Successful response");
        });

    // Add SwaggerUI to the parent <div>
    this.add(swaggerUI)
  }
}
SwaggerEditor swaggerEditor = new SwaggerEditor();
AceEditor ace = swaggerEditor.getAceEditor();

// turn of read-only mode
ace.setReadOnly(false);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

1.0.0-beta (2022-06-29)

Changelog

If you find this component usefull, I would really appreciate a rating here or a star on the GitHub Repository.

For Issues and Feature Requests please visit vaadin-swagger/issues on GitHub.

Released
2022-06-29
Maturity
BETA
License
MIT License

Compatibility

Framework
Vaadin 14
Vaadin 23
Browser
Browser Independent

Swagger - Vaadin Add-on Directory

Easily visualize and interact with your REST API Swagger - Vaadin Add-on Directory
\u0000

\n\"Vaadin\n
\n\"Vaadin\n\"Vaadin\n\"Vaadin\n\"Demo\"\n
\n\"GitHub\n

\n\n\n

\nEasily visualize and interact with your REST API in your Vaadin project.\n

\n\n

\n

\n\n\n\n
\n
\nStatus: Public Beta \uD83C\uDF89
\nSponsor Program \uD83D\uDC96
Follow me @F0rceDev \uD83D\uDC26

\n\n
\n

\n\n\n## Technical structure\n\n- [Swagger UI](https://swagger.io/tools/swagger-ui/) has been packaged as a web component using [Lit](https://lit.dev) (``)\n- [Swagger Editor](https://swagger.io/tools/swagger-editor) has be replicated using my own [ace](https://github.com/F0rce/ace) and `` in a Vaadin `SplitLayout` \n\n\n## Future plans\n\nCurrently there is limited to none further functionality / customization besides setting the `spec` in `` *(which is sufficient in my current use case)*. If there is enough interest or some interesting use cases I am willing to maintain this Vaadin Add-on actively.
If you are missing some functionality or have a feature request please open a new issue.\n\n\n## Install\n\nInstall the component using [Vaadin Directory](https://vaadin.com/directory/component/swagger) or by adding the `swagger-*.jar` from the [latest release](https://github.com/F0rce/vaadin-swagger/releases/latest) to your project.\n\n\n## Licence\n\n[MIT License](https://github.com/F0rce/vaadin-swagger/blob/master/LICENSE) \u00A9 2022 [David Dodlek](https://github.com/F0rce)
Online