Project setup

1. Copy the source/ directory into your project root, or reference specific subdirectories (packages/, integrations/, examples/) as needed.

2. If using the monorepo tooling directly, ensure pnpm is installed and run:

   pnpm install
   

3. Add the relevant tsconfig.json path aliases if you reference internal packages by workspace name:

   {
     "compilerOptions": {
       "paths": {
         "@scalar/*": ["./source/packages/*/src"]
       }
     }
   }
   

4. For a standalone Node/Express or NestJS project, install only the specific integration package (e.g., @scalar/nestjs-api-reference) from npm rather than the full monorepo.

5. Set environment variables if needed:

   PORT=5056
   HOST=0.0.0.0
   

6. For Turborepo builds across the monorepo, run:

   pnpm turbo build
   

Public API

apiReference

import { apiReference } from '@scalar/nestjs-api-reference'

function apiReference(options: {
  content?: object | string
  withFastify?: boolean
  [key: string]: unknown
}): RequestHandler

The primary integration function for NestJS. Pass your OpenAPI document object via content to render the interactive Scalar API reference UI as Express middleware. Set withFastify: true when using the Fastify adapter instead of Express.

DocumentBuilder (NestJS Swagger)

import { DocumentBuilder } from '@nestjs/swagger'

const config = new DocumentBuilder()
  .setTitle(string)
  .setDescription(string)
  .setVersion(string)
  .addTag(string)
  .build()

Used to construct the OpenAPI document metadata before passing it to SwaggerModule.createDocument. This is a NestJS peer dependency, not a Scalar export, but every Scalar NestJS example depends on it.

SwaggerModule.createDocument

import { SwaggerModule } from '@nestjs/swagger'

const document = SwaggerModule.createDocument(app: INestApplication, config: OpenAPIObject): OpenAPIObject

Generates the full OpenAPI document from your NestJS application and the config built with DocumentBuilder. The resulting document object is passed directly to apiReference({ content: document }).

ViteSSG (SSG integration)

import { ViteSSG } from 'vite-ssg/single-page'
import App from './App.vue'

export const createApp = ViteSSG(App)

Used in the static site generation example. Replace the standard createApp(App).mount('#app') pattern with the exported createApp constant when targeting SSG output.

Working examples

Scenario - NestJS with Express adapter

Mount the Scalar API reference at the root path of a standard NestJS/Express application. The document is generated from NestJS Swagger decorators and passed directly to the middleware.

import { NestFactory } from '@nestjs/core'
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'
import { apiReference } from '@scalar/nestjs-api-reference'
import { AppModule } from './app.module'

const PORT = Number(process.env.PORT || 5056)
const HOST = process.env.HOST || '0.0.0.0'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)

  const config = new DocumentBuilder()
    .setTitle('My API')
    .setDescription('API description')
    .setVersion('1.0')
    .addTag('users')
    .build()

  const document = SwaggerModule.createDocument(app, config)

  app.use(
    '/',
    apiReference({
      content: document,
    }),
  )

  await app.listen(PORT, HOST, () => {
    console.log(`Listening at http://${HOST}:${PORT}`)
  })
}

void bootstrap()

Scenario - NestJS with Fastify adapter

Use the Fastify-compatible variant by passing withFastify: true. This adjusts the middleware signature to match Fastify's request/reply model.

import { NestFactory } from '@nestjs/core'
import { FastifyAdapter, type NestFastifyApplication } from '@nestjs/platform-fastify'
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger'
import { apiReference } from '@scalar/nestjs-api-reference'
import { AppModule } from './app.module'

const PORT = Number(process.env.PORT) || 5057
const HOST = process.env.HOST || '0.0.0.0'

async function bootstrap() {
  const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter())

  const config = new DocumentBuilder()
    .setTitle('My Fastify API')
    .setDescription('Fastify-backed API')
    .setVersion('2.0')
    .addTag('items')
    .build()

  const document = SwaggerModule.createDocument(app, config)

  app.use(
    '/',
    apiReference({
      withFastify: true,
      content: document,
    }),
  )

  await app.listen(PORT, HOST, () => {
    console.log(`Fastify listening at http://${HOST}:${PORT}`)
  })
}

void bootstrap()

Scenario - React application entry point

Wire Scalar's API reference component into a React app using the standard React 18 root API. Swap App with whichever component renders @scalar/api-reference.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// App.tsx
import { ApiReference } from '@scalar/api-reference'

export default function App() {
  return (
    <ApiReference
      configuration={{
        url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.yaml',
      }}
    />
  )
}

File walkthrough

• .agents/ - Skill definitions (OpenAPI glossary, TypeScript, Vue components) used by AI coding agents interacting with the repo.
• .changeset/ - Individual changeset markdown files tracking unreleased changes per package; consumed by changeset CLI on release.
• .claude/ - Project-level Claude AI settings (settings.json) for agentic coding sessions.
• .devcontainer/ - Devcontainer spec so the repo opens consistently in VS Code or GitHub Codespaces.
• .github/ - All CI/CD: GitHub Actions workflows for testing and release, Renovate dependency update config, PR templates.
• .vscode/ - Recommended extensions and workspace settings.
• .zed/ - Zed editor project settings.
• documentation/ - Markdown and config for Scalar's public documentation site.
• examples/ - Self-contained runnable apps demonstrating every major integration (NestJS/Express, NestJS/Fastify, React Webpack, SvelteKit, SSG).
• integrations/ - Per-framework adapter packages (Hono, Elysia, Fastify, etc.).
• packages/ - Published npm packages: @scalar/api-reference, @scalar/nestjs-api-reference, @scalar/themes, and others.
• projects/ - Internal apps (the Scalar cloud dashboard, etc.) not published to npm.
• tooling/ - Shared ESLint configs, TypeScript base configs, and build scripts.
• biome.json - Biome linter and formatter rules applied monorepo-wide.
• eslint.config.mjs - ESLint flat config for packages that use ESLint instead of Biome.
• knip.jsonc - Knip unused-export detection config.
• lefthook.yml - Git hook runner configuration.
• package.json - Root workspace manifest; declares pnpm and Turbo scripts.
• pnpm-workspace.yaml - Lists all workspace globs so pnpm links internal packages.
• scalar.config.json - Scalar-specific project metadata.
• tsconfig.json - Root TypeScript config extended by all packages.
• turbo.json - Turborepo task graph: build, test, lint pipelines with caching.
• vitest.config.ts - Shared Vitest configuration for unit tests across packages.

Common pitfalls and fixes

• Wrong adapter flag: Forgetting withFastify: true when using NestFastifyApplication causes request handler signature mismatches. Always set the flag when using FastifyAdapter.
• pnpm required: The monorepo uses pnpm workspaces; running npm install at the root will not resolve workspace packages correctly. Use pnpm install.
• Node version mismatch: Some packages require Node 18+. Pin the engine in .nvmrc or package.json engines field to avoid subtle build failures.
• ESM/CJS interop: @scalar/api-reference publishes ESM. If your bundler targets CJS, configure moduleResolution: bundler or node16 in tsconfig.json and ensure your bundler handles .mjs extensions.
• Missing peer dependencies: @scalar/nestjs-api-reference has @nestjs/common and @nestjs/swagger as peers. Omitting them produces runtime errors, not install-time errors.
• Turbo cache stale: After switching branches with different package versions, run pnpm turbo build --force to bypass stale Turbo cache.

Vibe-coding prompt template

I have dropped the Scalar monorepo source into `source/` in my project root.
Read `source/USAGE.md` for the full integration guide.

The upstream package is `user@example.com` (scalar/scalar monorepo).
The key integration package is `@scalar/nestjs-api-reference`.

My project is: [describe your stack, e.g. "NestJS 10 with Express, TypeScript 5, deployed on Railway"].

Please do the following step by step:
1. Install the required dependencies listed in USAGE.md for my stack.
2. Update my `src/main.ts` to import `apiReference` from `@scalar/nestjs-api-reference`
   and mount it at `/reference` using my existing NestJS app and Swagger document.
3. If I use Fastify, add `withFastify: true` to the `apiReference` options.
4. Confirm the `tsconfig.json` settings needed for ESM compatibility.
5. Show me the final `src/main.ts` in full with all imports resolved.

Only use exports and patterns visible in `source/examples/` and `source/USAGE.md`.
Do not invent new APIs.

License and credit

Scalar is released under the MIT License. See source/LICENSE for the full text. Upstream repository: https://github.com/scalar/scalar. The npm packages are published under the @scalar scope.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

完全なインストールガイドと統合プロンプトは購入後に解放されます。