@stardustai/redoc
Advanced tools
This is the README for the 2.x version of Redoc (React-based).
The README for the 1.x version is on the v1.x branch
Redoc is an open-source tool for generating documentation from OpenAPI (fka Swagger) definitions.
By default Redoc offers a three-panel, responsive layout:
If you want to see how Redoc will render your OpenAPI definition, you can try it out online at https://redocly.github.io/redoc/.
A version of the Swagger Petstore API is displayed by default. To test it with your own OpenAPI definition, enter the URL for your definition and select TRY IT.
Redoc is Redocly's community-edition product. Looking for something more? Checkout the following feature comparison of Redocly's premium products versus Redoc:
| Features | Redoc | Reference | Portals |
|---|---|---|---|
| Specs | |||
| Swagger 2.0 | √ | √ | √ |
| OpenAPI 3.0 | √ | √ | √ |
| OpenAPI 3.1 | √ (basic) | √ | √ |
| Theming | |||
| Fonts/colors | √ | √ | √ |
| Extra theme options | √ | √ | |
| Performance | |||
| Pagination | √ | √ | |
| Search (enhanced) | √ | √ | |
| Search (server-side) | √ | ||
| Multiple APIs | |||
| Multiple versions | √ | √ | |
| Multiple APIs | √ | ||
| API catalog | √ | ||
| Additional features | |||
| Try-it console | √ | √ | |
| Automated code samples | √ | √ | |
| Deep links | √ | √ | |
| More SEO control | √ | ||
| Contextual docs | √ | ||
| Landing pages | √ | ||
| React hooks for more control | √ | ||
| Personalization | √ | ||
| Analytics integrations | √ | ||
| Feedback | Coming Soon |
Refer to the Redocly's documentation for more information on these products:
Responsive three-panel design with menu/scrolling synchronization
Ability to integrate your API introduction into the side menu
Command-line interface to bundle your docs into a zero-dependency HTML file
Neat interactive documentation for nested objects
x-tagGroups specification extensiontheme optiondiscriminator) 
Important: all the 2.x releases are deployed to npm and can be used with jsdeliver:
v2.0.0-alpha.15: https://cdn.jsdelivr.net/npm/redoc@2.0.0-alpha.17/bundles/redoc.standalone.jsnext release: https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.jsAdditionally, all the 1.x releases are hosted on our GitHub Pages-based CDN (deprecated):
v1.2.0: https://rebilly.github.io/ReDoc/releases/v1.2.0/redoc.min.jsv1.x.x release: https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.jslatest release: https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js - it will point to latest 1.x.x release since 2.x releases are not hosted on this CDN but on unpkg.| Redoc Release | OpenAPI Specification |
|---|---|
| 2.0.0-alpha.54 | 3.1, 3.0.x, 2.0 |
| 2.0.0-alpha.x | 3.0, 2.0 |
| 1.19.x | 2.0 |
| 1.18.x | 2.0 |
| 1.17.x | 2.0 |
Redocly's OpenAPI CLI is an open source command-line tool that you can use to lint your OpenAPI definition. Linting helps you to catch errors and inconsistencies in your OpenAPI definition before publishing.
Refer to Lint configuration in the OpenAPI documentation for more information.
To render your OpenAPI definition using Redoc, use the following HTML code sample and
replace the spec-url attribute with the url or local file address to your definition.
<!DOCTYPE html>
<html>
<head>
<title>Redoc</title>
<!-- needed for adaptive design -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
<!--
Redoc doesn't change outer page styles
-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"> </script>
</body>
</html>
For step-by-step instructions for how to get started using Redoc to render your OpenAPI definition, refer to the Redoc quickstart guide.
See IE11 Support Notes for information on IE support for Redoc.
For more information on Redoc's commmand-line interface, refer to Using the Redoc CLI.
You can inject the Security Definitions widget into any place in your definition description.
For more information, refer to Security definitions injection.
Redoc uses the following specification extensions:
x-logo - is used to specify API logox-traitTag - useful for handling out common things like Pagination, Rate-Limits, etcx-codeSamples - specify operation code samplesx-examples - specify JSON example for requestsx-nullable - mark schema param as a nullablex-displayName - specify human-friendly names for the menu categoriesx-tagGroups - group tags by categories in the side menux-servers - ability to specify different servers for API (backported from OpenAPI 3.0)x-ignoredHeaderParameters - ability to specify header parameter names to ignorex-additionalPropertiesName - ability to supply a descriptive name for the additional property keysx-summary - For Response object, use as the response button text, with description rendered under the buttonx-extendedDiscriminator - In Schemas, uses this to solve name-clash issues with the standard discriminatorx-explicitMappingOnly - In Schemas, display a more descriptive property name in objects with additionalProperties when viewing the property list with an object<redoc> options objectYou can use all of the following options with the standalone version of the tag by kebab-casing them. For example, scrollYOffset becomes scroll-y-offset, and expandResponses becomes expand-responses.
disableSearch - disable search indexing and search box.expandDefaultServerVariables - enable expanding default server variables, default false.expandResponses - specify which responses to expand by default by response codes. Values should be passed as comma-separated list without spaces e.g. expandResponses="200,201". Special value "all" expands all responses by default. Be careful: this option can slow-down documentation rendering time.generatedPayloadSamplesMaxDepth - set the maximum render depth for JSON payload samples (responses and request body). The default value is 10.maxDisplayedEnumValues - display only specified number of enum values. hide rest values under spoiler.hideDownloadButton - do not show "Download" spec button. THIS DOESN'T MAKE YOUR SPEC PRIVATE, it just hides the button.hideHostname - if set, the protocol and hostname is not shown in the operation definition.hideLoading - do not show loading animation. Useful for small docs.hideSchemaPattern - if set, the pattern is not shown in the schema.hideSingleRequestSampleTab - do not show the request sample tab for requests with only one sample.showObjectSchemaExamples - show object schema example in the properties, default false.expandSingleSchemaField - automatically expand single field in a schemaschemaExpansionLevel - specifies whether to automatically expand schemas. Special value "all" expands all levels. The default value is 0.jsonSampleExpandLevel - set the default expand level for JSON payload samples (responses and request body). Special value "all" expands all levels. The default value is 2.hideSchemaTitles - do not display schema title next to to the typesimpleOneOfTypeLabel - show only unique oneOf types in the label without titlessortEnumValuesAlphabetically - set to true, sorts all enum values in all schemas alphabeticallysortOperationsAlphabetically - set to true, sorts operations in the navigation sidebar and in the middle panel alphabeticallysortTagsAlphabetically - set to true, sorts tags in the navigation sidebar and in the middle panel alphabeticallylazyRendering - Not implemented yet menuToggle - if true clicking second time on expanded menu item will collapse it, default true.nativeScrollbars - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs).noAutoAuth - do not inject Authentication section automatically.onlyRequiredInSamples - shows only required fields in request samples.pathInMiddlePanel - show path link and HTTP verb in the middle panel instead of the right one.requiredPropsFirst - show required properties first ordered in the same order as in required array.scrollYOffset - If set, specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc;
scrollYOffset can be specified in various ways:
showExtensions - show vendor extensions ("x-" fields). Extensions used by ReDoc are ignored. Can be boolean or an array of string with names of extensions to display.sortPropsAlphabetically - sort properties alphabetically.payloadSampleIdx - if set, payload sample will be inserted at this index or last. Indexes start from 0.theme - ReDoc theme. For details check theme docs.untrustedSpec - if set, the spec is considered untrusted and all HTML/markdown is sanitized to prevent XSS. Disabled by default for performance reasons. Enable this option if you work with untrusted user data!sideNavStyle - can be specified in various ways:
<redoc> theme objectspacing
unit: 5 # main spacing unit used in autocomputed theme values latersectionHorizontal: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8sectionVertical: 40 # Horizontal section padding. COMPUTED: spacing.unit * 8breakpoints # breakpoints for switching three/two and mobile view layouts
small: '50rem'medium: '85rem'large: '105rem'colors
tonalOffset: 0.3 # default tonal offset used in computationstypography
fontSize: '14px'lineHeight: '1.5em'fontWeightRegular: '400'fontWeightBold: '600'fontWeightLight: '300'fontFamily: 'Roboto, sans-serif'smoothing: 'antialiased'optimizeSpeed: trueheadings
fontFamily: 'Montserrat, sans-serif'fontWeight: '400'lineHeight: '1.6em'code # inline code styling
fontSize: '13px'fontFamily: 'Courier, monospace'lineHeight: # COMPUTED: typography.lineHeightfontWeight: # COMPUTED: typography.fontWeightRegularcolor: '#e53935'backgroundColor: 'rgba(38, 50, 56, 0.05)'wrap: false # whether to break word for inline blocks (otherwise they can overflow)links
color: # COMPUTED: colors.primary.mainvisited: # COMPUTED: typography.links.colorhover: # COMPUTED: lighten(0.2 typography.links.color)menu
width: '260px'backgroundColor: '#fafafa'textColor: '#333333'activeTextColor: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.maingroupItems # Group headings
textTransform: 'uppercase'level1Items # Level 1 items like tags or section 1st level items
textTransform: 'none'arrow # menu arrow
size: '1.5em'color: # COMPUTED: theme.menu.textColorlogo
maxHeight: # COMPUTED: menu.widthmaxWidth: # COMPUTED: menu.widthgutter: '2px' # logo image paddingrightPanel
backgroundColor: '#263238'width: '40%'textColor: '#ffffff'see CONTRIBUTING.md
FAQs
ReDoc
We found that @stardustai/redoc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.