# Use Redoc CE in HTML
To render API documentation in an HTML page:
1. Paste the following template into an HTML file.
```html
Redoc CE
```
2. Replace the value of `spec-url` with either:
- a path to a local description file, for example: `spec-url="openapi.yaml"` or `spec-url="/openapi.yaml"`
- a full URL, for example: `spec-url="https://redocly.github.io/redoc/cafe.yaml"`
The description can be an OpenAPI, AsyncAPI, or GraphQL file.
A relative path is resolved against the page URL, like any other link: `spec-url="openapi.yaml"` on the page `/docs/index.html` loads `/docs/openapi.yaml`.
A root-relative path, which starts with `/`, loads the same file from any page: `spec-url="/openapi.yaml"` loads `/openapi.yaml`.
If the server serves the page at `/docs` without a trailing slash, a relative path resolves against the site root instead, so `spec-url="openapi.yaml"` loads `/openapi.yaml`.
To test the HTML file, open it in your browser.
The page works directly from disk when the script comes from the CDN and the description from a URL.
A description file on your disk does not load from a `file://` page, so serve the folder with a static file server, for example `npx http-server` or `python3 -m http.server`, or reference the file by URL.
When the description cannot be loaded or parsed, Redoc CE shows a **Failed to load API description** message in the element.
The message includes the underlying error.
## Render AsyncAPI and GraphQL descriptions
The same element renders AsyncAPI and GraphQL descriptions, and Redoc CE detects the specification type from the file.
```html
```
```html
```
A GraphQL schema served from an API endpoint works as well.
A URL that does not load as OpenAPI or AsyncAPI is read as a GraphQL schema.
The detection rules and the supported versions are listed in [Supported specifications](/docs/redoc/v3.x/supported-specifications).
## Configure Redoc CE
Redoc CE is highly configurable - see the [full list of configuration options](/docs/redoc/v3.x/config).
To configure Redoc CE in HTML, add options as attributes of the `` element.
Attribute names are the kebab-case form of the option names: `sortRequiredPropsFirst` becomes `sort-required-props-first`.
A camelCase attribute is ignored, because HTML lowercases attribute names.
For an on/off option, a bare attribute or any value except `false` turns the option on.
The exception is `disable-telemetry`, which works only with the value `true`.
The following example lists required properties first, groups all schemas under a **Schemas** entry in the sidebar, and hides the download panel:
```html
```
You can add as many configuration attributes as you need.
### Theme configuration
Redoc CE uses [CSS variables](https://redocly.com/docs/realm/branding/css-variables) under the hood.
To customize your API documentation's appearance, override these variables in a stylesheet on your page.
Redoc CE sets a `light` or `dark` class on the `` element.
It follows the reader's system preference at first, and the choice they make with the color mode switcher at the bottom of the sidebar afterwards.
Scope every override to a color mode: `:root.light` for light, `:root.dark` for dark, and `:root.light, :root.dark` for values shared by both.
A plain `:root` rule has no effect, because Redoc CE adds its own `:root` styles when it starts and they override yours.
The following example sets the sidebar width for both color modes, and the accent color and the sidebar background for each one:
```css
/* Shared by both color modes */
:root.light,
:root.dark {
--sidebar-width: 280px;
}
/* Light mode */
:root.light {
--color-primary-base: #2563eb;
--sidebar-bg-color: #eef2ff;
}
/* Dark mode */
:root.dark {
--color-primary-base: #60a5fa;
--sidebar-bg-color: #1e293b;
}
```
To use this code, either:
- Put the CSS code inside a `