Redoc - Try Out

The Try Out Swagger's feature on Redoc

It's extends Redoc adding the Swagger's Try Out feature.

Live Demo

Online preview Pet Store live demo.

Installation

$3

#### Script tag

How to use

After importing the script bundle, just configure and init it.

``html




`

Available options

$3

| Option | Description | Type | Note |
| ----------------------- | ------------------------------- | ------------------------------------------------- | ----------------------------------------- |
| docUrl | URL swagger's spec file | string | |
| cfg | Redoc try it out config options | RedocTryItOutOptions | See options table |
| element (optional) | Redoc wrapper container | HTMLElement | If not set, a wrapper will be created |

$3

RedocTryItOutOptions extends RedocOptions, documented on Redoc documentation

| Option | Description | Type | Default |
| ------------------------- | ------------------------------------------------------------- | ------------------------------------------------- | ----------------------------------------- |
| tryItOutEnabled | Enable/Disable Try Out feature | boolean | false |
| tryItBoxContainerId | Id of the element created dynamically as Try Out container | string | 'try-out-wrapper' |
| containerId | Redoc wrapper container id (used when no element is provided) | string | 'redoc-container' |
| operationBoxSelector | Redoc operation box selector | string | '[data-section-id]' |
| selectedOperationClass | Class name added into selected operation | string | 'try' |
| redocVersion | Redoc version | string | '2.0.0-rc.56' |
| authBtn | Auth Button Options | AuthBtnOptions | See the table |
| tryBtn | Try Out Button Options | TryBtnOptions | See the table |
| stylerMatcher | Styler Matcher Options | StyleMatcherOptions | See the table |
| swaggerOptions | Swagger Options | SwaggerOptions | See the table |
| dependenciesVersions | Set of dependencies version | DependenciesVersions | See the table |

$3

| Option | Description | Type | Default |
| ------------- | ------------------------------------------------- | --------- | ------------- |
| posSelector | Selector where the button will be added after of | string | 'h1:eq(0)' |
| text | The button text | string | 'AUTHORIZE' |
| className | The button class name used tracking the element | string | '_auth-btn' |

$3

| Option | Description | Type | Default |
| ----------------- | --------------------------------------------------------- | --------- | ------------- |
| siblingSelector | Selector where the button will be added as sibling of | string | '.http-verb'|
| text | The button text | string | 'TRY OUT' |
| className | The button class name used tracking the element | string | 'tryBtn' |
| selectedClassName | The button class name used tracking the selected element | string | 'selected' |

$3

#### Style matcher is a utility used to clone Redoc style into Swagger, avoiding layout discrepancies

| Option | Type | Default |
| ----------------------------------------- | ------ |--------------------------------------------------------------------------------------------- |
| informationContainerTargetSelector | string | '.swagger-ui .information-container' |
| schemeContainerTargetSelector | string | '.swagger-ui .scheme-container' |
| modelsContainerTargetSelector | string | '.swagger-ui .models' |
| inputTargetSelector | string | '.swagger-ui input[type=text]' |
| selectTargetSelector | string | '.swagger-ui .opblock select' |
| textAreaTargetSelector | string | '.swagger-ui .opblock textarea' |
| paragraphTargetSelector | string | '.swagger-ui .opblock p' |
| executeBtnTargetSelector | string | '.swagger-ui .opblock .btn.execute' |
| responseContainerTargetSelector | string | '.swagger-ui .opblock .opblock-body .responses-inner' |
| responseTitleTargetSelector | string | '.swagger-ui .opblock .responses-inner > div > h4' |
| responseHeaderTargetSelector | string | '.swagger-ui .opblock .responses-inner h4' |
| responseTableTargetSelector | string | '.swagger-ui .opblock .responses-inner > .responses-table' |
| responseWrapperTargetSelector | string | '.swagger-ui .opblock .responses-wrapper' |
| responseWrapperResultTargetSelector | string | '.swagger-ui .opblock .btn-group + .responses-wrapper' |
| responseMicrolightTargetSelector | string | '.swagger-ui .opblock .microlight' |
| responseCodeTargetSelector | string | '.swagger-ui .opblock .microlight code' |
| responseClipboardTargetSelector | string | '.swagger-ui .opblock .responses-inner .copy-to-clipboard' |
| responseClipboardBtnTargetSelector | string | '.swagger-ui .opblock .responses-inner .copy-to-clipboard button' |
| responseCurlClipboardTargetSelector | string | '.swagger-ui .opblock .responses-inner .curl-command .copy-to-clipboard' |
| responseDownloadTargetSelector | string | '.swagger-ui .opblock .responses-inner .download-contents' |
| serverResponseHeaderTargetSelector | string | '.swagger-ui .opblock .responses-inner .responses-header td.col_header' |
| serverResponseStatusTargetSelector | string | '.swagger-ui .opblock .responses-inner .response .response-col_status' |
| serverResponseDescriptionTargetSelector | string | '.swagger-ui .opblock .responses-inner .response .response-col_description' |
| serverResponseSubHeaderTargetSelector | string | '.swagger-ui .opblock .responses-inner .response h5' |
| clearBtnTargetSelector | string | '.swagger-ui .opblock .btn-group .btn-clear' |
| operationTagTargetSelector | string | '.swagger-ui .opblock-tag[data-tag]' |
| operationHeaderContainerTargetSelector | string | '.swagger-ui .opblock .opblock-section-header' |
| operationHeaderTargetSelector | string | '.swagger-ui .opblock .opblock-section-header h4' |
| operationHeaderDecorationTargetSelector | string | '.swagger-ui .opblock .opblock-section-header h4 span::after' |
| operationTryOutTargetSelector | string | '.swagger-ui .operation-tag-content div.try-out' |
| descriptionContainerTargetSelector | string | '.swagger-ui .opblock .opblock-body .opblock-description-wrapper' |
| summaryTargetSelector | string | '.swagger-ui .operation-tag-content div.opblock .opblock-summary' |
| modalHeaderContainerTargetSelector | string | '.swagger-ui .dialog-ux .modal-ux-header' |
| modalHeaderTargetSelector | string | '.swagger-ui .dialog-ux .modal-ux-header h3' |
| modalTitleTargetSelector | string | '.swagger-ui .dialog-ux .modal-ux-content h4' |
| modalTitleCodeTargetSelector | string | '.swagger-ui .dialog-ux .modal-ux-content .wrapper code' |
| modalLabelTargetSelector | string | '.swagger-ui .modal-ux label' |
| modalCodeTargetSelector | string | '.swagger-ui .modal-ux code' |
| modalBtnTargetSelector | string | '.swagger-ui .modal-ux button' |
| parametersTableContainerTargetSelector | string | '.swagger-ui .opblock .table-container' |
| parametersHeadTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters thead' |
| parameterNameFieldTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__name' |
| parameterTypeFieldTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__type' |
| parameterDeprecatedTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__deprecated' |
| parameterSourceTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__in' |
| parameterRequiredMarkerTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__name.required span' |
| parameterRequiredTargetSelector | string | '.swagger-ui .opblock .table-container table.parameters .parameter__name.required::after' |
| apiContentSourceSelector | string | '.api-content' |
| inputSourceSelector | string | '[kind=field] ~ td' |
| codeSourceSelector | string | 'code' |
| codeBoxSourceSelector | string | '[data-section-id] [role=tabpanel]' |
| dataSectionSourceSelector | string | '[data-section-id] > div > div' |
| fieldSourceSelector | string | '[kind=field]' |
| requiredFieldSourceSelector | string | '[kind=field] div' |
| fieldMarkerSourceSelector | string | '[kind=field]:first span:first-child' |
| sanSerifFontSourceSelector | string | 'h2' |
| alternativeMonospaceFontSourceSelector | string | '[kind=field] span' |
| alternativeSansSerifSourceSelector | string | 'h5' |
| h2SourceSelector | string | 'h2' |
| h3SourceSelector | string | 'h3' |
| h5SourceSelector | string | 'h5' |
| labelSourceSelector | string | '[kind=field] ~ td' |
| typeSourceSelector | string | '[kind=field] ~ td span' |
| btnSourceSelector | string | '[role=tabpanel] button' |
| defaultBorderColorSelector | string | 'h5' |
| authBtnSourceSelector | string | 'a[href*="swagger.json"]:eq(0)' |
| httpVerbSourceSelector | string | '[data-section-id] .http-verb' |




$3

| Option | Description | Type | Default |
| --------------------------------- | --------------------------------------------------------- | --------- | ------------------------------------------------------------------------- |
| url | URL swagger's spec file | string | RedocTryItOut.docUrl |
| dom_id | Swagger wrapper container id | string | '#swagger-ui' |
| authorizeBtnSelector | The authorize button selector | string | '.swagger-ui .auth-wrapper .authorize' |
| authorizeModalSelector | The authorize modal selector | string | '.swagger-ui .dialog-ux .modal-ux' |
| authorizeDoneBtnSelector | The authorize modal done button selector | string | '.swagger-ui .auth-btn-wrapper .btn-done' |
| authorizeModalCloseBtnSelector | The authorize modal close button selector | string | '.swagger-ui .dialog-ux .modal-ux-header .close-modal' |
| operationContainerSelector | The operation container selector | string | '.swagger-ui .opblock' |
| operationSectionContainerSelector | The operation section container selector | string | '.swagger-ui .opblock-tag-section' |
| operationSummaryPatternSelector | The operation summary pattern selector | string | '.swagger-ui .opblock .opblock-summary-{method} [data-path="{api}"]' |
| wrapperSelector | The wrapper selector | string | '.swagger-ui .wrapper' |
| hideClass | The hide class name added to hide swagger | string | 'hide' |
| showClass | The show class name added to show swagger | string | 'show' |
| authModalClass | The modal class name added to show auth modal | string | 'auth-modal' |
| selectedOperationContainerClass | The class name added mark an operation box as selected | string | 'opened-shadow' |
| onComplete | The function called when swagger load is completed | Function | CallbackFunction |
| version | The swagger version | string | '3.48.0' |

$3

| Option | Description | Type | Default |
| ----------------- | ------------------------- | --------- | --------- |
| jquery | JQuery version | string | '3.6.0' |
| jqueryScrollTo | JQuery ScrollTo version | string | '2.1.2'` |

Credits

It's based on wll8.github.io/redoc-try work.

Changelog

Bellow are a list of changes, some might go undocumented

- 1.0.0 - First release
- 1.0.1 - Remove png from package
- 1.0.2 - Fix main file
- 1.0.3 - Add live demo and fix README
- 1.0.4 - Fix live demo page url
- 1.0.5 - Export interfaces
- 1.0.6 - Fix configuration
- 1.0.7 - Fix exports
- 1.0.8 - Fix redoc options
- 1.0.9 - Export JS name files constants

TODO

- Finish up the documentation
- Add Unittests