### Install and Run http-server with Node.js Source: https://github.com/redocly/redoc/blob/main/docs/deployment/intro.md Install the http-server package globally using npm and then run it in your project directory to start a local HTTP server. This is useful for viewing your Redoc output locally. ```bash npm install -g http-server ``` ```node http-server ``` -------------------------------- ### Run Local HTTP Server with Python 3 Source: https://github.com/redocly/redoc/blob/main/docs/deployment/intro.md Use this command to start a local HTTP server if you have Python 3 installed. This is useful for viewing your Redoc output locally. ```python python3 -m http.server ``` -------------------------------- ### Run Local HTTP Server with Python 2 Source: https://github.com/redocly/redoc/blob/main/docs/deployment/intro.md Use this command to start a local HTTP server with a specific port if you have Python 2 installed. This is useful for viewing your Redoc output locally. ```python python -m SimpleHTTPServer 8000 ``` -------------------------------- ### Install Redoc Dependencies Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Installs the necessary React and Redoc dependencies using npm. Ensure you have npm installed. ```bash npm i react react-dom mobx styled-components core-js ``` -------------------------------- ### Install Redoc via npm Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Install the Redoc package using npm for self-hosting dependencies. Yarn users can use 'yarn'. ```sh npm install redoc ``` -------------------------------- ### Redoc Self-Hosted Script Reference Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Reference the Redoc script from your local 'node_modules' folder after installing it. ```html ``` -------------------------------- ### Basic Redoc HTML Setup Source: https://github.com/redocly/redoc/blob/main/docs/quickstart.md Use this HTML code to render your OpenAPI definition with Redoc. Replace 'spec-url' with the path to your OpenAPI definition. Requires an HTTP server to run locally. ```html Redoc ``` -------------------------------- ### Run the Redoc Docker image Source: https://github.com/redocly/redoc/blob/main/docs/deployment/docker.md Execute this command to start a Redoc preview server. It maps port 8080 on your host to port 80 in the container, making the preview accessible at http://localhost:8080. ```docker docker run -p 8080:80 redocly/redoc ``` -------------------------------- ### Initialize Redoc using JavaScript Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Initialize Redoc using the Redoc object and its 'init' function in JavaScript. This example inserts Redoc into a specific container and sets 'expandResponses'. ```html

Redoc in action

``` -------------------------------- ### x-enumDescriptions Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use x-enumDescriptions to provide a helpful table of enum options and explanations for each, improving human readability of machine-readable enum values. ```yaml components: schemas: TicketType: description: Type of ticket being purchased. Use `general` for regular museum entry and `event` for tickets to special events. type: string enum: - event - general x-enumDescriptions: event: Event Tickets _(timed entry)_ general: General Admission example: event ``` -------------------------------- ### Configure RedocStandalone with Options Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Customizes the appearance and behavior of the Redoc documentation by passing an options object. This example enables native scrollbars and sets a primary theme color. ```jsx ``` -------------------------------- ### x-logo Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use the x-logo extension to display a logo in the API documentation. It supports URL, background color, and alternative text. ```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" } } } ``` ```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" ``` -------------------------------- ### Code Sample Object Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md The x-codeSamples extension provides a list of code samples for an operation. Each sample includes a language, an optional label, and the source code. ```json { "lang": "JavaScript", "source": "console.log('Hello World');" } ``` ```yaml lang: JavaScript source: console.log('Hello World'); ``` -------------------------------- ### Generate Documentation with Redoc CLI Source: https://github.com/redocly/redoc/blob/main/docs/index.md Use the Redocly CLI to quickly generate static HTML documentation from an OpenAPI specification file. Ensure Node.js is installed to run this command. ```sh npx @redocly/cli build-docs openapi.yaml ``` -------------------------------- ### Tag Grouping Example (YAML) Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use `x-tagGroups` to group related tags in the Redoc side menu. Ensure all tags are assigned to a group, as unassigned tags are not displayed. ```yaml x-tagGroups: - name: User Management tags: - Users - API keys - Admin - name: Statistics tags: - Main Stats - Secondary Stats ``` -------------------------------- ### Configure Redoc Theme via YAML Source: https://github.com/redocly/redoc/blob/main/docs/index.md Customize the visual appearance and behavior of Redoc documentation by defining theme settings in a `redocly.yaml` configuration file. This example shows how to disable search, expand specific responses, and adjust colors and typography. ```yaml theme: openapi: disableSearch: true expandResponses: 200,202 jsonSamplesExpandLevel: 1 theme: sidebar: backgroundColor: '#eae0cc' textColor: '#3d005b' colors: primary: main: '#660099' typography: fontSize: 14pt headings: fontWeight: bold ``` -------------------------------- ### Configure Redoc HTML Element Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Configure the Redoc HTML element by adding properties directly to the tag. This example sets 'required-props-first' to true. ```html ``` -------------------------------- ### Tag Grouping Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use `x-tagGroups` to group related tags in the Redoc side menu. Ensure all tags are assigned to a group, as unassigned tags are not displayed. ```json { "x-tagGroups": [ { "name": "User Management", "tags": ["Users", "API keys", "Admin"] }, { "name": "Statistics", "tags": ["Main Stats", "Secondary Stats"] } ] } ``` -------------------------------- ### x-additionalPropertiesName Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use x-additionalPropertiesName to display a more descriptive property name in objects with additionalProperties when viewing the property list with an object. ```yaml Player: required: - name properties: name: type: string additionalProperties: x-additionalPropertiesName: attribute-name type: string ``` -------------------------------- ### Pull the Redoc Docker image Source: https://github.com/redocly/redoc/blob/main/docs/deployment/docker.md Use this command to download the latest Redoc Docker image from Docker Hub. Ensure Docker is installed. ```docker docker pull redocly/redoc ``` -------------------------------- ### x-explicitMappingOnly Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md Use x-explicitMappingOnly to filter the discriminator mappings shown in the selectpicker. When set to true, only explicitly defined mappings are listed. ```yaml Pet: type: object required: - name - photoUrls discriminator: propertyName: petType x-explicitMappingOnly: true mapping: cat: "#/components/schemas/Cat" bee: "#/components/schemas/HoneyBee" ``` -------------------------------- ### Theme Configuration for Redoc HTML Element Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Supply theme configuration as a JSON string to the 'theme' attribute of the Redoc HTML element. This example changes the sidebar background color. ```html ``` -------------------------------- ### x-traitTag Example Source: https://github.com/redocly/redoc/blob/main/docs/redoc-vendor-extensions.md The x-traitTag extension distinguishes tags used for grouping operations from tags marking operations with a specific trait. Tags with x-traitTag set to true are listed in the side menu without subitems and render their description. ```json { "name": "Pagination", "description": "Pagination description (can use markdown syntax)", "x-traitTag": true } ``` ```yaml name: Pagination description: Pagination description (can use markdown syntax) x-traitTag: true ``` -------------------------------- ### Build Docs with Redocly CLI and YAML Config Source: https://github.com/redocly/redoc/blob/main/docs/index.md Execute the Redocly CLI to build documentation, automatically detecting and applying configurations from a `redocly.yaml` file in the current directory. ```sh redocly build-docs openapi.yaml ``` -------------------------------- ### Build API Documentation with Redocly CLI Source: https://github.com/redocly/redoc/blob/main/docs/deployment/cli.md Use the `build-docs` command to generate an HTML file from your OpenAPI definition. Replace `apis/openapi.yaml` with the actual path to your API definition file. ```bash redocly build-docs apis/openapi.yaml ``` -------------------------------- ### Build ReDoc Docker Image Source: https://github.com/redocly/redoc/blob/main/config/docker/README.md Build the ReDoc Docker image locally using the provided Dockerfile. This command tags the image as 'redocly/redoc'. ```bash docker build -t redocly/redoc . ``` -------------------------------- ### Serve Local File with Watcher via Docker Source: https://github.com/redocly/redoc/blob/main/config/docker/README.md Serve a local OpenAPI specification file and enable watching for updates. Mount the directory containing the spec file and set SPEC_URL accordingly. ```bash docker run -it --rm -p 80:80 \ -v $(pwd)/demo/:/usr/share/nginx/html/swagger/ \ -e SPEC_URL=swagger/swagger.yaml redocly/redoc ``` -------------------------------- ### Redoc CDN Script Reference Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md Reference the Redoc script using a CDN link. This is the simplest way to include Redoc. ```html ``` -------------------------------- ### Serve Local File via Docker Source: https://github.com/redocly/redoc/blob/main/config/docker/README.md Mount a local OpenAPI specification file into the container and serve it. The SPEC_URL should reference the mounted file's path within the container. ```bash 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 ``` -------------------------------- ### Basic Redoc HTML Element Source: https://github.com/redocly/redoc/blob/main/docs/deployment/html.md This is the basic HTML structure to render API documentation using the Redoc element. Replace 'spec-url' with your API description's path or URL. ```html Redoc ``` -------------------------------- ### Google Analytics Initialization Source: https://github.com/redocly/redoc/blob/main/demo/index.html Initializes Google Analytics for the Redocly demo. This script should be included to track page views and user interactions if the demo is hosted on 'rebilly.github.io'. ```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'); if (window.location.host === 'rebilly.github.io') { ga('create', 'UA-81703547-1', 'auto'); ga('send', 'pageview'); } ``` -------------------------------- ### Basic CSS for Redocly Demo Source: https://github.com/redocly/redoc/blob/main/demo/index.html Applies basic styling to remove margins and padding, and sets the redoc element to display as a block. This is typically used for the main container of the Redocly demo. ```css body { margin: 0; padding: 0; } redoc { display: block; } ``` -------------------------------- ### Run Redoc Docker with a custom OpenAPI specification URL Source: https://github.com/redocly/redoc/blob/main/docs/deployment/docker.md This command runs the Redoc Docker image and sets the SPEC_URL environment variable to load a custom OpenAPI definition from a specified URL. The preview will be accessible on port 8080. ```bash docker run -p 8080:80 -e SPEC_URL=https://api.example.com/openapi.json redocly/redoc ``` -------------------------------- ### Use RedocStandalone with OpenAPI URL Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Renders the Redoc API documentation by providing the URL to your OpenAPI specification. This is a common way to link to external or hosted specs. ```jsx ``` -------------------------------- ### Import RedocStandalone Component Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Imports the RedocStandalone component from the 'redoc' package. This component is essential for rendering the API documentation. ```javascript import { RedocStandalone } from 'redoc'; ``` -------------------------------- ### Serve Remote Spec via Docker Source: https://github.com/redocly/redoc/blob/main/config/docker/README.md Use this command to serve a remote OpenAPI specification file by providing its URL. Ensure the port is exposed. ```bash docker run -it --rm -p 80:80 \ -e SPEC_URL='http://localhost:8000/swagger.yaml' redocly/redoc ``` -------------------------------- ### Embed Redoc in an HTML Page Source: https://github.com/redocly/redoc/blob/main/docs/index.md Include Redoc documentation directly within an HTML page by adding the `` tag and referencing the standalone Redoc JavaScript bundle. The `spec-url` attribute can point to a remote or local OpenAPI specification. ```html ``` -------------------------------- ### Inject Security Definitions Widget Source: https://github.com/redocly/redoc/blob/main/docs/security-definitions-injection.md Use the Redoc-Inject instruction within an HTML comment to embed the security definitions widget in your specification description. This ensures visibility in Redoc while remaining hidden in other tools like SwaggerUI. ```markdown ... ## Authorization Some description ... ``` -------------------------------- ### Use RedocStandalone with OpenAPI Object Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Renders the Redoc API documentation by passing the OpenAPI specification directly as a JavaScript object. This is useful when the spec is available in memory. ```javascript ``` -------------------------------- ### Specify onLoaded Callback for RedocStandalone Source: https://github.com/redocly/redoc/blob/main/docs/deployment/react.md Attaches an `onLoaded` callback function that executes when Redoc finishes rendering or encounters an error. The callback receives an error argument if loading fails. ```jsx { if (!error) { console.log('Yay!'); } }} /> ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.