Redoc - Try Out

The Try Out Swagger's feature on Redoc

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'
redocScriptUrl	Redoc script url	string	'${cdnUrl}/[email protected]/bundles/redoc.standalone.min.js'
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