Swagger UI / Editor like page - add to my web site

Question

I've created YAML file (and JSON file respectively) manually via swagger editor.

Now I want to embed the cool auto generated page from the swagger-editor tool into my website, so users could read and test it (via 'Try this operation' button) my API live.

I don't want swagger to generate any code for me and I don't need it to update the documentation (YAML or whatever) automatically. I will update my static YAML/JSON file whenever I'll need - manually. Does swagger support this kind of feature? Is it something related to the 'Generate Client' in the swagger editor toolbar? I'm looking for some html/js/css files that could load static YAML file and generate something similar to the right page of swagger-editor. BTW, I'm using Apache web server (not that important).

Thanks!

EDIT: I'm looking for client side only - some js/css/html that could add the above requirements, I don't mind to generate it again from time to time (whenever I'll change my YAML file / my REST API)

Answer 1

Well, I found the tool I was looking for, it's the swagger-ui. It's not looking exactly as the swagger-editor right side UI but it satisfy my requirements - it parse my JSON file (which I wrote manually as YAML) in client side online with only static files (no server side work, only serve the pages).

Thanks anyway!

EDIT: I found that more people are interested in the editor view solution in the following link

EDIT2: I've add a short dirty workaround for previewing only the relevant section of the swagger-editor. You can see the changes here. You can try it:

1. clone my forked repo: git clone http://github.com/itayB/swagger-editor.git
2. cd swagger-editor
3. npm install
4. npm start

EDIT3: (2022)

1. clone swagger-editor repo.
2. In index.html (root folder) add:

      .topbar, .Resizer, .Pane1 {
        display: none;
      }
   

3. In index.html (root folder) modify:

      .Pane2 {
        width: 100% !important;
        overflow-y: scroll;
      }
   

4. In index.html (root folder) modify SwaggerEditorBundle to include:

       SwaggerEditorBundle({
         ...
         url: 'doc/swagger.json',
         ...
       })
   

where doc/swagger.json is the path to your spec file.

Please note: This preview shows the output of the file spec-files/default.yaml. I've only made some view changes, all the editor logic is still running behind.

Cheers