{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"use-redoc-ce-in-html","__idx":0},"children":["Use Redoc CE in HTML"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To render API documentation in an HTML page:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Paste the following template into an HTML file."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!DOCTYPE html>\n<html>\n  <head>\n    <title>Redoc CE</title>\n    <!-- needed for adaptive design -->\n    <meta charset=\"utf-8\"/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link href=\"https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700\" rel=\"stylesheet\">\n\n    <!--\n    Redoc CE doesn't change outer page styles\n    -->\n    <style>\n      body {\n        margin: 0;\n        padding: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'></redoc>\n    <script src=\"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js\"> </script>\n  </body>\n</html>\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Replace the value of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["spec-url"]}," with either:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a relative path to a local OpenAPI description file, for example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["spec-url=my-api.yaml"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a full URL, for example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["http://petstore.swagger.io/v2/swagger.json"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you use a relative path, Redoc CE requires an HTTP server to run API documentation locally."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To test the HTML file, open it in your browser."," ","If you use a relative path, to run the API documentation locally, you need to ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/redoc/v2.x/deployment/intro#local-http-server"},"children":["simulate an HTTP server"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configure-redoc-ce","__idx":1},"children":["Configure Redoc CE"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Redoc CE is highly configurable - see the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/redoc/v2.x/config"},"children":["full list of configuration options"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To configure Redoc CE in HTML:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the property names to the HTML tag."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example makes all the required properties display at the top of the list:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json' required-props-first=true></redoc>\n","lang":"html"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can add as many Redoc CE configuration properties as you need."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"theme-configuration","__idx":2},"children":["Theme configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme"]}," configuration setting represents many nested options."," ","You can supply these options as a JSON string to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme"]}," attribute."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, to change the sidebar color:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"    <redoc spec-url='http://petstore.swagger.io/v2/swagger.json'\n       required-props-first=true\n       theme='{\n         \"sidebar\": {\n           \"backgroundColor\": \"lightblue\"\n         }\n       }'\n    ></redoc>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Check out the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/redoc/v2.x/config#theme-settings"},"children":["list of options for theme configuration"]}," and create the configuration that suits your API needs."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"advanced-options","__idx":3},"children":["Advanced options"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"the-redoc-ce-object","__idx":4},"children":["The Redoc CE object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As an alternative to the HTML tag, you can also initialise Redoc CE in a web page."," ","Use the Redoc CE object and invoke it from JavaScript."," ","Use this method to create dynamic content in a page."," ","It is also a way to attach the Redoc CE element to an existing container."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Redoc CE object offers an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["init"]}," function:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"Redoc.init(specOrSpecUrl, options, element, callback)\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Where:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["specOrSpecUrl"]},": either a JSON object with the OpenAPI description, or a file name or URL to the"," ","description in JSON or YAML format"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]},": Redoc CE ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/redoc/v2.x/config"},"children":["configuration options"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["element"]},": DOM element Redoc CE is inserted into"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["callback"]},"(optional): callback to be called after Redoc CE has been fully rendered, also called on errors with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}," as the first argument"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use the Redoc object:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Redoc.init()"]}," from the JavaScript on a web page to add the element to a named container."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example is an HTML page with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<div>"]}," tag, and the script to add the Redoc object to it."," ","This example also sets the configuration for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expandResponses"]}," so all 200 and 400 status responses are displayed with their details visible when the page loads."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<!DOCTYPE html>\n<html>\n  <head />\n  <body>\n    <H1>Redoc CE in action</H1>\n    <script src=\"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js\"> </script>\n    <div id=\"redoc-container\"></div>\n\n    <script>\n      Redoc.init('http://petstore.swagger.io/v2/swagger.json', {\n        \"expandResponses\": \"200,400\"\n      }, document.getElementById('redoc-container'))\n    </script>\n  </body>\n</html>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"self-host-dependencies","__idx":5},"children":["Self-host dependencies"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can reference the Redoc CE script in two ways."," ","Use a link to the files hosted on a CDN, or install Redoc CE in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["node-modules"]}," folder."," ","Self-hosting may be useful when you need to host in a closed environment or have requirements around external dependencies."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Use CDN","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To reference Redoc CE hosted on a CDN:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<script>"]}," tag, add an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," attribute with the URL to the Redoc CE script."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js\"> </script>\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Self-host dependencies","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To host the dependencies yourself:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Install ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redoc"]}," using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npm"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["yarn"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"sh","header":{"controls":{"copy":{}}},"source":"npm install redoc\n","lang":"sh"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Reference the Redoc CE script with a node modules link."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<script src=\"node_modules/redoc/bundles/redoc.standalone.js\"> </script>\n","lang":"html"},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":6},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/redoc/v2.x/deployment/intro"},"children":["Redoc CE deployment guide"]}]}," - Follow step-by-step instructions for setting up your Redoc CE project"]}]}]},"frontmatter":{"seo":{"title":"Use the Redoc CE HTML element"}},"tagList":["tab","tabs"],"title":"Use the Redoc CE HTML element","lastModified":"2026-08-24T16:23:25.000Z"}