Swagger's feature on Redoc
The Try Out
Redoc - Try Out
Live Demo | Installation | How to use | Available Options | Credits | Changelog | TODO
It's extends Redoc adding the Swagger's Try Out feature.
Live Demo
Online preview Pet Store live demo.
Installation
Browser
Script tag
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/redoc-try-it-out/dist/try-it-out.min.js"></script>
How to use
After importing the script bundle, just configure and init it.
<div id="redoc_container"></div>
<script>
RedocTryItOut.init(
"https://petstore.swagger.io/v2/swagger.json",
{ title: "Pet Store" },
document.getElementById("redoc_container")
)
</script>
Available options
RedocTryItOut Init Options
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 |
Redoc Try It Out Options
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 |
Auth Button Options
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' |
Try Button Options
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' |
Style Matcher Options
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' |
Swagger Options
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' |
Dependencies Versions
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