### Installing ReDoc with npm

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to install the ReDoc package using the Node Package Manager (npm). This makes ReDoc available for local projects.

```Shell
npm i redoc
```

--------------------------------

### Example: Initializing ReDoc with a URL and Options

Source: https://github.com/drchrono/redoc/blob/master/README.md

This example demonstrates how to use `Redoc.init` to load an OpenAPI specification from a URL, apply a specific `scrollYOffset` option, and render the documentation into a designated HTML element with the ID 'redoc-container'.

```JavaScript
Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
  scrollYOffset: 50
}, document.getElementById('redoc-container'))
```

--------------------------------

### Installing ReDoc with Yarn

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to install the ReDoc package using Yarn, an alternative package manager for JavaScript. This adds ReDoc to the project's dependencies.

```Shell
yarn add redoc
```

--------------------------------

### Installing React Peer Dependencies for ReDoc

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to install the necessary peer dependencies required by ReDoc when used as a React component. These packages are essential for ReDoc's React integration.

```Shell
npm i react react-dom mobx styled-components core-js
```

--------------------------------

### Bundling with Custom Handlebars Template using redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This example shows how to bundle an OpenAPI specification using a custom Handlebars template file (`custom.hbs`) instead of the default ReDoc template.

```Shell
$ redoc-cli bundle [spec] -t custom.hbs
```

--------------------------------

### Serving OpenAPI Spec with redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This command starts a local server that renders the specified OpenAPI specification using ReDoc. It supports Server-Side Rendering (SSR) and watching the spec for changes.

```Shell
redoc-cli serve [spec]
```

--------------------------------

### Bundling with Custom Primary Color using redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This example demonstrates how to bundle an OpenAPI specification while overriding the default primary theme color to 'orange' using the `--options.theme.colors.primary.main` flag.

```Shell
$ redoc-cli bundle [spec] --options.theme.colors.primary.main=orange
```

--------------------------------

### Referencing ReDoc Script from node_modules

Source: https://github.com/drchrono/redoc/blob/master/README.md

HTML script tag for including the ReDoc standalone bundle from the local `node_modules` directory after installation via npm or Yarn. This is used when ReDoc is installed as a project dependency.

```HTML
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>
```

--------------------------------

### Using RedocStandalone with specUrl in React

Source: https://github.com/drchrono/redoc/blob/master/README.md

React JSX example showing how to render the `RedocStandalone` component by providing the OpenAPI specification URL via the `specUrl` prop. This is a common way to load remote specifications.

```JavaScript
<RedocStandalone specUrl="url/to/your/spec"/>
```

--------------------------------

### Referencing ReDoc Script via CDN

Source: https://github.com/drchrono/redoc/blob/master/README.md

HTML script tag for including the ReDoc standalone bundle directly from a Content Delivery Network (CDN). This is the simplest way to add ReDoc without local installation.

```HTML
<script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script>
```

--------------------------------

### Basic CSS Styling for ReDoc Component

Source: https://github.com/drchrono/redoc/blob/master/demo/index.html

This CSS snippet provides fundamental styling rules for the `body` and `redoc` elements. It ensures that the page body has no default margins or padding and sets the `redoc` custom element to display as a block, which is crucial for its layout.

```CSS
body { margin: 0; padding: 0; } redoc { display: block; }
```

--------------------------------

### Initializing Google Analytics with IIFE

Source: https://github.com/drchrono/redoc/blob/master/demo/index.html

This JavaScript Immediately Invoked Function Expression (IIFE) is responsible for asynchronously loading and initializing the Google Analytics tracking script. It sets up the global `ga` function, allowing subsequent calls to track user interactions and page views.

```JavaScript
(function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
```

--------------------------------

### Using RedocStandalone with onLoaded Callback in React

Source: https://github.com/drchrono/redoc/blob/master/README.md

React JSX example demonstrating the `onLoaded` callback prop, which is invoked after ReDoc has fully rendered or if an error occurs. This allows for executing custom logic, such as logging, upon the documentation loading status.

```JavaScript
<RedocStandalone
  specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
  onLoaded={error => {
    if (!error) {
      console.log('Yay!');
    }
  }}
/>
```

--------------------------------

### Using RedocStandalone with Custom Options in React

Source: https://github.com/drchrono/redoc/blob/master/README.md

React JSX example showing how to configure the `RedocStandalone` component with various options, such as enabling native scrollbars and customizing the theme's primary color. Options allow for fine-grained control over ReDoc's appearance and behavior.

```JavaScript
<RedocStandalone
  specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
  options={{
    nativeScrollbars: true,
    theme: { colors: { primary: { main: '#dd5522' } } },
  }}
/>
```

--------------------------------

### Using RedocStandalone with Spec Object in React

Source: https://github.com/drchrono/redoc/blob/master/README.md

React JSX example demonstrating how to render the `RedocStandalone` component by passing the OpenAPI specification directly as a JavaScript object via the `spec` prop. This is useful for in-memory or dynamically generated specifications.

```JavaScript
<RedocStandalone spec={/* spec as an object */}/>
```

--------------------------------

### Conditional Google Analytics Pageview Tracking

Source: https://github.com/drchrono/redoc/blob/master/demo/index.html

This JavaScript snippet conditionally activates Google Analytics tracking. It creates a tracker and sends a pageview event only if the current host matches 'rebilly.github.io', ensuring that analytics data is collected specifically for the deployed GitHub Pages version of the application.

```JavaScript
if (window.location.host === 'rebilly.github.io') { ga('create', 'UA-81703547-1', 'auto'); ga('send', 'pageview'); }
```

--------------------------------

### Serving Local API Spec with ReDoc Docker and Watch for Updates

Source: https://github.com/drchrono/redoc/blob/master/config/docker/README.md

This command runs the ReDoc Docker container, mounting a local directory containing the API specification into the container. This setup allows for live updates if the mounted directory content changes, with `SPEC_URL` pointing to the specific file within the mounted volume.

```Shell
docker run -it --rm -p 80:80 \
  -v $(pwd)/demo/:/usr/share/nginx/html/swagger/ \
  -e SPEC_URL=swagger/swagger.yaml redocly/redoc
```

--------------------------------

### Naming Additional Properties with x-additionalPropertiesName in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This example illustrates the use of `x-additionalPropertiesName` to provide a more descriptive label for keys within an object's `additionalProperties` in ReDoc's documentation. Instead of a generic 'key', ReDoc will display 'attribute-name' for the dynamically added properties, improving clarity for API consumers.

```YAML
Player:
  required:
  - name

  properties:
    name:
      type: string

  additionalProperties:
    x-additionalPropertiesName: attribute-name
    type: string
```

--------------------------------

### Defining Polymorphic Schemas with x-extendedDiscriminator in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This example demonstrates how to use `x-extendedDiscriminator` to define polymorphic schemas where the value of the discriminator property in the payload (e.g., 'paypal') differs from the schema definition name (e.g., `PayPalPayment`). This extension allows for more flexible naming conventions in your API payloads compared to the default `discriminator` behavior.

```YAML
Payment:
  x-extendedDiscriminator: type
  type: object
  required:
    - type
  properties:
    type:
      type: string
    name:
      type: string

CashPayment:
  allOf:
    - $ref: "#/definitions/Payment"
    - properties:
        type:
          type: string
          enum:
            - cash
        currency:
          type: string

PayPalPayment:
  allOf:
    - $ref: "#/definitions/Payment"
    - properties:
        type:
          type: string
          enum:
            - paypal
        userEmail:
          type: string
```

--------------------------------

### Limiting Discriminator Mappings with x-explicitMappingOnly in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This example demonstrates `x-explicitMappingOnly` to control the visibility of discriminator mappings in ReDoc's selectpicker. When set to `true`, only explicitly defined mappings (e.g., 'cat', 'bee') will be shown, even if other schemas implicitly inherit from the base schema, providing a cleaner and more focused selection for users.

```YAML
Pet:
  type: object
  required:
    - name
    - photoUrls
  discriminator:
    propertyName: petType
    x-explicitMappingOnly: true
    mapping:
      cat: "#/components/schemas/Cat"
      bee: "#/components/schemas/HoneyBee"
```

--------------------------------

### Basic ReDoc HTML Integration

Source: https://github.com/drchrono/redoc/blob/master/README.md

A complete HTML page demonstrating how to embed ReDoc using a CDN. It includes meta tags for responsive design, basic body styling, and the <redoc> element pointing to a sample OpenAPI specification URL.

```HTML
<!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@next/bundles/redoc.standalone.js"> </script>
  </body>
</html>
```

--------------------------------

### Redoc.init Function Signature for Standalone Initialization

Source: https://github.com/drchrono/redoc/blob/master/README.md

This snippet presents the signature of the `Redoc.init` function, which allows for programmatic initialization of ReDoc. It accepts the specification source, configuration options, the target DOM element, and an optional callback.

```JavaScript
Redoc.init(specOrSpecUrl, options, element, callback?)
```

--------------------------------

### Bundling OpenAPI Spec into HTML with redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This command bundles the specified OpenAPI specification and ReDoc into a single, zero-dependency HTML file, suitable for static hosting.

```Shell
redoc-cli bundle [spec]
```

--------------------------------

### Displaying Help Information for redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This command displays the help message for `redoc-cli`, providing information on available commands, options, and their usage.

```Shell
redoc-cli --help
```

--------------------------------

### Bundling with Custom Template and Options using redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This command bundles an OpenAPI specification using a custom Handlebars template and passes additional options to the template, such as setting the page's meta description.

```Shell
$ redoc-cli bundle [spec] -t custom.hbs --templateOptions.metaDescription "Page meta description"
```

--------------------------------

### Running ReDoc Docker Container (Default)

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to run the ReDoc Docker image, mapping port 8080 on the host to port 80 in the container. By default, this serves the demo Petstore OpenAPI specification.

```Shell
docker run -p 8080:80 redocly/redoc
```

--------------------------------

### Defining a Code Sample Object in JSON

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This JSON snippet shows the structure of a `Code Sample Object` used within `x-codeSamples`. It specifies the programming `lang` (e.g., 'JavaScript') and the `source` code itself. These samples are rendered on the right panel in ReDoc.

```json
{
  "lang": "JavaScript",
  "source": "console.log('Hello World');"
}
```

--------------------------------

### Defining a Code Sample Object in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This YAML snippet demonstrates the structure of a `Code Sample Object` for `x-codeSamples`. It defines the `lang` (e.g., 'JavaScript') and the `source` code. ReDoc displays these code samples on the right-hand panel.

```yaml
lang: JavaScript
source: console.log('Hello World');
```

--------------------------------

### Pulling ReDoc Docker Image

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to download the official ReDoc Docker image from Docker Hub. This prepares the environment for running ReDoc within a Docker container.

```Shell
docker pull redocly/redoc
```

--------------------------------

### Serving with Native Scrollbars using redoc-cli

Source: https://github.com/drchrono/redoc/blob/master/cli/README.md

This command serves the OpenAPI specification with ReDoc, enabling native browser scrollbars instead of ReDoc's custom scrollbars, by setting the `nativeScrollbars` option to true.

```Shell
$ redoc-cli serve [spec] --options.nativeScrollbars
```

--------------------------------

### Running ReDoc Docker Container with Custom Spec URL

Source: https://github.com/drchrono/redoc/blob/master/README.md

Command to run the ReDoc Docker image, allowing a custom OpenAPI specification URL to be provided via the `SPEC_URL` environment variable. This enables serving specific API documentation from a Docker container.

```Shell
docker run -p 8080:80 -e SPEC_URL=https://api.example.com/openapi.json redocly/redoc
```

--------------------------------

### Initializing ReDoc Body and Display - CSS

Source: https://github.com/drchrono/redoc/blob/master/benchmark/index.html

This snippet defines fundamental CSS rules to reset default browser margins and padding for the `body` element and ensures the `redoc` custom element is rendered as a block-level element, crucial for its proper layout and integration within the document flow.

```CSS
body { margin: 0; padding: 0; }\nredoc { display: block; }
```

--------------------------------

### Building ReDoc Docker Image

Source: https://github.com/drchrono/redoc/blob/master/config/docker/README.md

This command builds the ReDoc Docker image from the current directory's Dockerfile, tagging it as `redocly/redoc`. This is used to create a custom or updated version of the ReDoc image.

```Shell
docker build -t redocly/redoc .
```

--------------------------------

### Adding ReDoc Element to HTML

Source: https://github.com/drchrono/redoc/blob/master/README.md

The core HTML element used to render the API documentation. The `spec-url` attribute specifies the URL of the OpenAPI specification to be displayed.

```HTML
<redoc spec-url="url/to/your/spec"></redoc>
```

--------------------------------

### Serving Local API Spec with ReDoc Docker

Source: https://github.com/drchrono/redoc/blob/master/config/docker/README.md

This command runs the ReDoc Docker container, mounting a local `swagger.yaml` file into the container's Nginx HTML directory. The `SPEC_URL` is set to the relative path within the container to serve the local file.

```Shell
docker run -it --rm -p 80:80 \
  -v $(pwd)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
  -e SPEC_URL=swagger.yaml redocly/redoc
```

--------------------------------

### Importing RedocStandalone Component in React

Source: https://github.com/drchrono/redoc/blob/master/README.md

JavaScript import statement for bringing the `RedocStandalone` component into a React application. This component is the primary way to use ReDoc within a React environment.

```JavaScript
import { RedocStandalone } from 'redoc';
```

--------------------------------

### Configuring API Logo with x-logo in JSON

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This snippet demonstrates how to use the `x-logo` extension within the `info` object in JSON to specify an API logo. It includes the `url` for the image, a `backgroundColor` for the logo's display area, and `altText` for accessibility.

```json
{
  "info": {
    "version": "1.0.0",
    "title": "Swagger Petstore",
    "x-logo": {
      "url": "https://redocly.github.io/redoc/petstore-logo.png",
      "backgroundColor": "#FFFFFF",
      "altText": "Petstore logo"
    }
  }
}
```

--------------------------------

### Grouping Tags with x-tagGroups in JSON

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This snippet demonstrates how to use the `x-tagGroups` extension in JSON to organize API tags into logical groups within the ReDoc side menu. Each group has a `name` and a list of `tags` to include. All tags must be part of a group to be displayed.

```json
{
  "x-tagGroups": [
    {
      "name": "User Management",
      "tags": ["Users", "API keys", "Admin"]
    },
    {
      "name": "Statistics",
      "tags": ["Main Stats", "Secondary Stats"]
    }
  ]
}
```

--------------------------------

### Configuring API Logo with x-logo in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This snippet demonstrates how to use the `x-logo` extension within the `info` object in YAML to specify an API logo. It includes the `url` for the image, a `backgroundColor` for the logo's display area, and `altText` for accessibility.

```yaml
info:
  version: "1.0.0"
  title: "Swagger Petstore"
  x-logo:
    url: "https://redocly.github.io/redoc/petstore-logo.png"
    backgroundColor: "#FFFFFF"
    altText: "Petstore logo"
```

--------------------------------

### Serving Remote API Spec with ReDoc Docker

Source: https://github.com/drchrono/redoc/blob/master/config/docker/README.md

This command runs the ReDoc Docker container, mapping port 80 to the host's port 80. It configures the container to serve an API specification from a remote URL specified by the `SPEC_URL` environment variable.

```Shell
docker run -it --rm -p 80:80 \
  -e SPEC_URL='http://localhost:8000/swagger.yaml' redocly/redoc
```

--------------------------------

### Setting Redoc Display Property - CSS

Source: https://github.com/drchrono/redoc/blob/master/config/docker/index.tpl.html

This CSS rule sets the `redoc` custom element to `display: block;`. This is essential for its proper rendering and layout within the document flow, allowing it to occupy its own line and take up available width, behaving like a standard block-level element.

```CSS
redoc { display: block; }
```

--------------------------------

### Defining a Trait Tag in JSON for ReDoc

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This JSON snippet demonstrates how to define a tag with the `x-traitTag` extension set to `true`. Such tags are listed in the ReDoc side-menu without sub-operations, useful for common concepts like Pagination or Rate-Limits. It includes `name` and `description` fields for the tag.

```json
{
    "name": "Pagination",
    "description": "Pagination description (can use markdown syntax)",
    "x-traitTag": true
}
```

--------------------------------

### Ignoring Header Parameters with x-ignoredHeaderParameters in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This snippet shows how to use `x-ignoredHeaderParameters` in YAML to specify a list of header parameter names that ReDoc should ignore and not display in the documentation. This is useful for common headers like `Accept` or `User-Agent` that might not need explicit documentation.

```yaml
swagger: '2.0'
info:
  ...
tags: [...]
x-ignoredHeaderParameters:
  - Accept
  - User-Agent
  - X-Test-Header
```

--------------------------------

### Grouping Tags with x-tagGroups in YAML

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This snippet demonstrates how to use the `x-tagGroups` extension in YAML to organize API tags into logical groups within the ReDoc side menu. Each group has a `name` and a list of `tags` to include. All tags must be part of a group to be displayed.

```yaml
x-tagGroups:
  - name: User Management
    tags:
      - Users
      - API keys
      - Admin
  - name: Statistics
    tags:
      - Main Stats
      - Secondary Stats
```

--------------------------------

### Applying Base Styles to ReDoc Body and Component - CSS

Source: https://github.com/drchrono/redoc/blob/master/demo/playground/index.html

This snippet defines fundamental CSS rules for the HTML `body` element and the custom `redoc` component. It removes default margins and padding from the body and sets the `redoc` component to display as a block element, ensuring it occupies its own line and space.

```CSS
body { margin: 0; padding: 0; } redoc { display: block; }
```

--------------------------------

### Defining a Trait Tag in YAML for ReDoc

Source: https://github.com/drchrono/redoc/blob/master/docs/redoc-vendor-extensions.md

This YAML snippet illustrates how to define a tag with the `x-traitTag` extension set to `true`. These tags appear in the ReDoc side-menu without operations, ideal for cross-cutting concerns like Pagination. It specifies the `name` and `description` for the tag.

```yaml
name: Pagination
description: Pagination description (can use markdown syntax)
x-traitTag: true
```

--------------------------------

### Including Polyfills for ReDoc React Component - JavaScript

Source: https://github.com/drchrono/redoc/blob/master/docs/usage-with-ie11.md

This snippet imports essential polyfills required for ReDoc to function correctly when used as a React component in Internet Explorer 11. It includes polyfills for Promises, Array.find, Object.assign, String.endsWith, String.startsWith, Map, Symbol, fetch, and URL.

```JavaScript
import 'core-js/es6/promise';
import 'core-js/fn/array/find';
import 'core-js/fn/object/assign';
import 'core-js/fn/string/ends-with';
import 'core-js/fn/string/starts-with';

import 'core-js/es6/map';
import 'core-js/es6/symbol';

import 'unfetch/polyfill/index'; // or any other fetch polyfill
import 'url-polyfill';
```

--------------------------------

### Injecting Security Definitions in ReDoc Markdown

Source: https://github.com/drchrono/redoc/blob/master/docs/security-definitions-injection.md

This snippet demonstrates how to embed the Security Definitions widget into a ReDoc specification's description using a special HTML comment. This injection method ensures the widget is only visible within ReDoc and not in other tools like SwaggerUI.

```markdown
...
# Authorization
Some description

<!-- ReDoc-Inject: <security-definitions> -->
...
```

--------------------------------

### Resetting Body Margins and Padding - CSS

Source: https://github.com/drchrono/redoc/blob/master/config/docker/index.tpl.html

This CSS snippet resets the default margin and padding for the `body` element, ensuring a consistent layout across different browsers by removing browser-specific default spacing. This is a common practice for cross-browser compatibility.

```CSS
body { margin: 0; padding: 0; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.