diff --git a/docs/deployment/html.md b/docs/deployment/html.md index dd7d6493..65c18693 100644 --- a/docs/deployment/html.md +++ b/docs/deployment/html.md @@ -1,123 +1,144 @@ --- -title: Use the Redoc HTML element +title: Use Redoc in HTML redirectFrom: - /docs/redoc/quickstart/html/ + - /docs/redoc/quickstart/ --- -# How to use the Redoc HTML element +# Use Redoc in HTML -## Step 1 - Install Redoc +To render API documentation in an HTML page, start with the template below and +replace the `spec-url` value with the local file path or URL of your API +description. -You can install Redoc using one of the following package managers: +```html + + + + Redoc + + + + -- [npm](https://docs.npmjs.com/about-npm) -- [yarn](https://classic.yarnpkg.com/en/docs/getting-started) + + + + + + + + +``` -:::attention Initialize your package manager -If you do not have a `package.json` file in your project directory, -you need to add one by initializing npm or yarn in your project. Use the command `npm init` for npm, -or `yarn init` for yarn. These initialization commands lead you through the process -of creating a `package.json` file in your project. +:::Success URL or local file + +Set `spec-url` to a relative path if the file is local, e.g. `spec-url=my-api.yaml`. Use a full URL like the example above if it's hosted elsewhere. -For more information, see -[Creating a package.json file](https://docs.npmjs.com/creating-a-package-json-file) -in the npm documentation or [Yarn init](https://classic.yarnpkg.com/en/docs/cli/init/) -in the yarn documentation. ::: -### Install Redoc with yarn +Open the HTML file in your browser to see the HTML documentation rendering. You may want to read the next section and add some configuration to make your documentation your own. -After navigating to your project directory in your terminal, use the following command: +## Configure Redoc -```bash -yarn add redoc +Redoc is highly configurable, find a [full list of configuration options](../config.md) on the dedicated page. + +To configure Redoc in HTML, add the property names to the HTML tag. Here's an example that makes all the required properties display first in the list: + +```html + ``` -### Install Redoc with npm +Any of the individual properties can be added to the tag, as many as you need to get your API docs set up as you like them. -After navigating to your project directory in your terminal, use the following command: +### Theme configuration -```bash -npm i redoc +The `theme` configuration setting is more complex since it represents many nested options, you can supply these as a JSON string to the `theme` attribute. For example, to change the sidebar color you would use a tag like this: + +```html + ``` -## Step 2 - Reference the Redoc script +Check out the [list of options for theme configuration](../config.md#theme-settings) and build up the configuration that suits your API needs. + +## Advanced options + +### The Redoc object + +As an alternative to the HTML tag, you can also initialise Redoc in a web page using the Redoc object and invoking it from JavaScript. This is useful for situations where you want to create dynamic content in a page, and also provides a simple way to attach the Redoc element to an existing container. + +The Redoc object offers an `init` function: + +```js +Redoc.init(specOrSpecUrl, options, element, callback) +``` +- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a file name/URL to the + definition in JSON or YAML format. +- `options`: See the [configuration reference](../config.md). +- `element`: DOM element Redoc is inserted into. +- `callback`(optional): Callback to be called after Redoc has been fully rendered. + It is also called on errors with `error` as the first argument. + +Call `Redoc.init()` from the JavaScript on a web page to add the element to the named container. Below is an example of an HTML page with a `
` tag, and the JavaScript to add the Redoc object to it. + +```html + + + + +

Redoc in action

+ +
+ + + + +``` + +This example also sets the configuration for `expandResponses` so all 200 and 400 status responses are shown unfolded and with their details visible when the page loads. + +### Self-host dependencies You can reference the Redoc script using either a link to the files hosted on a CDN -or the files located in your `node modules` folder. +or install to your `node-modules` folder. Using the CDN is the simplest option, but +if you need to host in a closed environment or have requirements around external +dependencies, it may be useful to self-host. -### CDN link - -To reference the Redoc script with a CDN link: +The main example shows using the CDN: ```html ``` -### Node modules link +If you would instead prefer to host the depdencies yourself, first install `redoc` using `npm`: -To reference the Redoc script with a node modules link: +``` +npm install redoc +``` + +_(Yarn users can install the `redoc` package with `yarn`)_. + +You can then reference the Redoc script with a node modules link: ```html ``` -## Step 3 - Add the element - -You can add the element to your HTML page and reference your OpenAPI -definition using the `spec-url` attribute, or you can initialize Redoc using -a globally exposed Redoc object. - -### The `spec-url` attribute - -To add the element with the `spec-url` attribute: - -```html - -``` - -#### Examples - -```html - -``` - -You can also use a local file (JSON or YAML) in your project, for instance: - -```html - -``` - -### The Redoc object - -To add the element with a globally exposed Redoc object: - -```js -Redoc.init(specOrSpecUrl, options, element, callback) -``` -- `specOrSpecUrl`: Either a JSON object with the OpenAPI definition or a URL to the - definition in JSON or YAML format. -- `options`: See [`theme.openapi` object](/docs/api-reference-docs/configuration/functionality.mdx) reference. -- `element`: DOM element Redoc is inserted into. -- `callback`(optional): Callback to be called after Redoc has been fully rendered. - It is also called on errors with `error` as the first argument. - -#### Examples - -```html - -``` - -You can also use a local file (JSON or YAML) in your project, for instance: - -```html - -``` diff --git a/docs/quickstart.md b/docs/quickstart.md deleted file mode 100644 index 1b01e0f1..00000000 --- a/docs/quickstart.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Redoc quickstart guide ---- - -# Redoc quickstart guide - -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. - -```html - - - - Redoc - - - - - - - - - - - - - - - -``` - -:::attention Redoc requires an HTTP server to run locally - -Loading local OpenAPI definitions is impossible without running a web server because of issues with -[same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) and -other security reasons. Refer to [Running Redoc locally](./deployment/intro.md#how-to-run-redoc-locally) for more information. - -::: - -For a more detailed explanation with step-by-step instructions and additional options for using Redoc, refer to the [Redoc deployment guide](./deployment/intro.md).