# @scalar/client-side-rendering

> Client-side rendering for the Scalar API Reference using the CDN

Latest version **0.4.2** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @scalar/client-side-rendering
pnpm add @scalar/client-side-rendering
yarn add @scalar/client-side-rendering
bun add @scalar/client-side-rendering
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2026-09-21 |
| First published | 2026-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16151 |
| Author | Scalar (https://github.com/scalar) |
| Maintainers | cameronrohani, marclave, scalar_geoff, hwkr, hanspagel, amritk, scalar-machine |

## Links

- npm: https://www.npmjs.com/package/@scalar/client-side-rendering
- Repository: https://github.com/scalar/scalar
- Issues: https://github.com/scalar/scalar/issues/new/choose
- npm.io page: https://npm.io/package/@scalar/client-side-rendering

## Recent versions

- 0.4.2 (latest) — 2026-09-21
- 0.4.1 — 2026-09-16
- 0.4.0 — 2026-09-07
- 0.3.10 — 2026-08-28
- 0.3.9 — 2026-08-20
- 0.3.7 — 2026-08-13
- 0.3.6 — 2026-08-07
- 0.3.5 — 2026-07-31
- 0.3.4 — 2026-07-16
- 0.3.3 — 2026-07-15
- 0.3.2 — 2026-07-08
- 0.3.1 — 2026-07-02
- 0.3.0 — 2026-06-30
- 0.2.6 — 2026-06-26
- 0.2.5 — 2026-06-22
- … 18 more at https://npm.io/package/@scalar/client-side-rendering/versions

## README

# Scalar Client-Side Rendering

[![Version](https://img.shields.io/npm/v/%40scalar/client-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![Downloads](https://img.shields.io/npm/dm/%40scalar/client-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![License](https://img.shields.io/npm/l/%40scalar%2Fclient-side-rendering)](https://www.npmjs.com/package/@scalar/client-side-rendering)
[![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar)

Render the Scalar API Reference as static HTML using the CDN. No server-side dependencies required.

---

Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.

- **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs.
- **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git.
- **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
- **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI.

20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com)

---

## Installation

```bash
npm install @scalar/client-side-rendering
```

## Usage

```ts
import { renderApiReference } from '@scalar/client-side-rendering'

const html = renderApiReference({
  pageTitle: 'My API Reference',
  config: {
    url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
  },
})
```

### Choosing the bundle

By default the generated HTML loads the modern, code-split ESM build
(`.../@scalar/api-reference/esm.js`) as a `<script type="module">`. Because it is code-split, less
JavaScript blocks the first render.

To use the classic UMD bundle instead (loaded via `<script src>` and the `window.Scalar` global):

- `cdn: 'https://.../@scalar/api-reference'` — pin a specific UMD build.
- `bundle: false` — use the default UMD build.

You can also pass `bundle: 'https://.../esm.js'` to load a specific ESM build.

#### Content Security Policy

Passing a `nonce` implies a strict, nonce-based CSP. The ESM build loads its chunks with native
`import`, which cannot carry a nonce, so those requests would be blocked unless your policy also has
`'strict-dynamic'`. For that reason, **the UMD bundle is used automatically whenever a `nonce` is
set** — it is a single nonced `<script>` with no follow-up requests. If your CSP uses
`'strict-dynamic'` (or allow-lists the CDN host), pass `bundle: true` to opt back into the ESM build.

## Community

We are API nerds. You too? Let's chat on Discord: <https://discord.gg/scalar>

## License

The source code in this repository is licensed under [MIT](https://github.com/scalar/scalar/blob/main/LICENSE).

---
_Source: https://npm.io/package/@scalar/client-side-rendering · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._