Scalar API Reference

https://scalar.com/products/api-references/
Admin
The Scalar API Reference renders modern documentation for OpenAPI/Swagger documents with minimal...
Tokens:132,361
Snippets:1,288
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Navigate into project and start dev server

Source: https://scalar.com/products/api-references/integrations/react

Change into the project directory, install dependencies, and start the development server. Open http://localhost:5173/ to view the app.

```bash
cd my-awesome-app
pnpm install
pnpm run dev
```

--------------------------------

### AdonisJS project setup prompts

Source: https://scalar.com/products/api-references/integrations/adonisjs

Example answers for the AdonisJS initialization prompts, selecting the API Starter Kit, Access Token guard, SQLite driver, and npm for dependency installation.

```plaintext
Which starter kit would you like to use?
❯ API Starter Kit

Select the authentication guard you want to use …
❯ Access Token

Select the database driver you want to use …
❯ SQLite

Do you want us to install dependencies using "npm"?
❯ Yes
```

--------------------------------

### Run scalar:install artisan command

Source: https://scalar.com/products/api-references/integrations/laravel

Publishes the config file and finishes setup.

```bash
php artisan scalar:install
```

--------------------------------

### Configure custom SDK installation with x-scalar-sdk-installation

Source: https://scalar.com/products/api-references/openapi

Use x-scalar-sdk-installation to provide custom SDK installation instructions that replace generic HTTP client examples. The description field supports Markdown and multiple code blocks.

```diff
openapi: 3.1.0
info:
  title: Example
  version: 1.0
+  x-scalar-sdk-installation:
+  - lang: TypeScript
+    description: |-
+      Install our **Custom SDK** from npm:
+
+      ```sh
+      npm install @your-awesome-company/sdk
+      ```
+  - lang: Java
+    description: |-
+      Add the dependency with Maven:
+
+      ```xml
+      <dependency>
+        <groupId>com.your-awesome-company</groupId>
+        <artifactId>sdk</artifactId>
+        <version>1.0.0</version>
+      </dependency>
+      ```
+
+      …or with Gradle:
+
+      ```groovy
+      implementation 'com.your-awesome-company:sdk:1.0.0'
+      ```
```

--------------------------------

### Browser test setup

Source: https://scalar.com/products/api-references/integrations/symfony

Commands to install Node dependencies, Playwright Chromium, and run browser tests.

```bash
npm ci
npx playwright install chromium
npm run test:browser
```

--------------------------------

### Usage: createCodeExample with store

Source: https://scalar.com/products/api-references/blocks/code-example

Imports the necessary modules and creates a code example block for a GET request to /users/{id}. Requires a workspace store with an OpenAPI document loaded. Throws if the element or operation is not found.

```ts
import { createWorkspaceStore } from '@scalar/workspace-store/client'
import { createCodeExample } from '@scalar/blocks/code-example'
import '@scalar/blocks/style.css'

const store = createWorkspaceStore()

await store.addDocument({
  name: 'default',
  url: '/openapi.json',
})

const block = createCodeExample('#block', {
  store,
  path: '/users/{id}',
  method: 'get',
})

// Later, when the block is no longer needed
block.destroy()
```

--------------------------------

### Fastify server with @fastify/swagger setup

Source: https://scalar.com/products/api-references/integrations/fastify

Replace the content of index.js with this boilerplate to register the Swagger plugin, define an example route with OpenAPI schema, and serve the generated OpenAPI file at /openapi.json.

```javascript
import FastifySwagger from '@fastify/swagger'
import Fastify from 'fastify'

// Instantiate the framework
const fastify = Fastify({
  logger: true,
})

// Set up @fastify/swagger
await fastify.register(FastifySwagger, {
  openapi: {
    info: {
      title: 'My Fastify App',
      version: '1.0.0',
    },
    components: {
      securitySchemes: {
        apiKey: {
          type: 'apiKey',
          name: 'apiKey',
          in: 'header',
        },
      },
    },
  },
})

fastify.put(
  '/example-route/:id',
  {
    schema: {
      description: 'post some data',
      tags: ['user', 'code'],
      summary: 'qwerty',
      security: [{ apiKey: [] }],
      params: {
        type: 'object',
        properties: {
          id: {
            type: 'string',
            description: 'user id',
          },
        },
      },
      body: {
        type: 'object',
        properties: {
          hello: { type: 'string' },
          obj: {
            type: 'object',
            properties: {
              some: { type: 'string' },
            },
          },
        },
      },
      response: {
        201: {
          description: 'Successful response',
          type: 'object',
          properties: {
            hello: { type: 'string' },
          },
        },
        default: {
          description: 'Default response',
          type: 'object',
          properties: {
            foo: { type: 'string' },
          },
        },
      },
    },
  },
  (req, reply) => {
    reply.code(201).send({ hello: `Hello ${req.body.hello}` })
  },
)

// Serve an OpenAPI file
fastify.get('/openapi.json', async (request, reply) => {
  return fastify.swagger()
})

// Wait for Fastify
await fastify.ready()

// Run the server
fastify.listen({ port: 3000 }, function (err, address) {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }

  console.log(`Fastify is now listening on ${address}`)
})
```

--------------------------------

### Initialize a new AdonisJS project

Source: https://scalar.com/products/api-references/integrations/adonisjs

Command to create a new AdonisJS project using the latest starter kit. You will be prompted to choose options; the guide suggests using the API Starter Kit, Access Token authentication, SQLite database, and installing dependencies with npm.

```bash
npm init adonisjs@latest my-awesome-app
```

--------------------------------

### Install @scalar/server-side-rendering

Source: https://scalar.com/products/api-references/server-side-rendering

Install the package via npm.

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

--------------------------------

### Run the Docusaurus playground example

Source: https://scalar.com/products/api-references/integrations/docusaurus

Run the example project located in the integrations/docusaurus/playground directory.

```bash
npm run playground
```

--------------------------------

### Install Fastify and create a basic server

Source: https://scalar.com/products/api-references/integrations/fastify

Commands to initialize a new Node project and install Fastify, followed by a minimal Fastify server that responds with JSON and listens on port 3000.

```bash
npm init
npm install fastify
```

```javascript
// index.js
import Fastify from 'fastify'

// Instantiate the framework
const fastify = Fastify({
  logger: true,
})

// Declare a route
fastify.get('/', function (request, reply) {
  reply.send({ hello: 'world' })
})

// Run the server
fastify.listen({ port: 3000 }, function (err, address) {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }

  console.log(`Fastify is now listening on ${address}`)
})
```

--------------------------------

### Install @scalar/nextjs-api-reference and zod@4

Source: https://scalar.com/products/api-references/integrations/nextjs-recipes/route-handlers

Install the required packages for this recipe in an App Router application.

```bash
npm install @scalar/nextjs-api-reference zod@4
```

--------------------------------

### Install @scalar/api-reference-react with npm

Source: https://scalar.com/products/api-references/integrations/react

Install the React integration package using npm.

```bash
npm install @scalar/api-reference-react
```

--------------------------------

### Start the Docusaurus development server

Source: https://scalar.com/products/api-references/integrations/docusaurus

Navigate into the project directory and start the development server. The site will be available at http://localhost:3000/.

```bash
cd my-awesome-website
pnpm start
```

--------------------------------

### Create and mount a code example block

Source: https://scalar.com/products/api-references/blocks/getting-started

Import the workspace store client and the code example block, create a store, add an OpenAPI document, and mount the block into a DOM element. The block renders a copy-pasteable request snippet for the specified operation.

```ts
import { createWorkspaceStore } from '@scalar/workspace-store/client'
import { createCodeExample } from '@scalar/blocks/code-example'
import '@scalar/blocks/style.css'

// Load your OpenAPI document(s) into a store
const store = createWorkspaceStore()

await store.addDocument({
  name: 'default',
  url: '/openapi.json',
})

// Mount a block into a DOM element
createCodeExample('#block', {
  store,
  path: '/hello',
  method: 'post',
  selectedClient: 'node/undici',
  selectedServer: {
    url: 'https://api.example.com',
  },
})
```

--------------------------------

### Install @scalar/starlight

Source: https://scalar.com/products/api-references/integrations/starlight

Install the plugin via npm.

```bash
npm install @scalar/starlight
```

--------------------------------

### Link code samples to request examples

Source: https://scalar.com/products/api-references/openapi

Link a code sample to a specific request body example by setting the example key and contentType.

```yaml
openapi: 3.1.0
info: { title: Widgets API, version: '1.0' }
paths:
  /widgets:
    post:
      requestBody:
        content:
          application/json:
            schema: { type: object }
            examples:
              simple: { value: { name: Basic } }
              detailed: { value: { name: Premium, description: More features } }
      responses:
        '200': { description: Created }
      x-codeSamples:
        - lang: Python
          example: simple
          contentType: application/json
          source: client.widgets.create(name="Basic")
        - lang: Python
          example: detailed
          contentType: application/json
          source: client.widgets.create(name="Premium", description="More features")
```

--------------------------------

### Install @scalar/hono-api-reference with npm

Source: https://scalar.com/products/api-references/integrations/hono

Install the middleware package using npm.

```bash
npm install @scalar/hono-api-reference
```

--------------------------------

### Example Plugin

Source: https://scalar.com/products/api-references/plugins

Example TypeScript plugin demonstrating beforeRequest and responseReceived hooks.

```APIDOC
## Example Plugin

### Description
Example TypeScript plugin demonstrating beforeRequest and responseReceived hooks.

### Code
```typescript
const authPlugin: ClientPlugin = {
  hooks: {
    beforeRequest: async ({ requestBuilder, server, customFetch }) => {
      console.log('Active server configuration:', server?.url)

      if (customFetch) {
        // Resolve an absolute URL appropriate for the plugin's runtime.
        await customFetch('https://auth.example.com/session/refresh', {
          method: 'POST',
        })
      }

      requestBuilder.headers.set('X-Custom-Header', 'value')
    },
    responseReceived: ({ response }) => {
      console.log('Response status:', response.status)
    },
  },
}
```

```

--------------------------------

### Install @scalar/express-api-reference

Source: https://scalar.com/products/api-references/integrations/express

Install the middleware package via npm.

```bash
npm install @scalar/express-api-reference
```

--------------------------------

### Install Symfony Security bundle

Source: https://scalar.com/products/api-references/integrations/symfony

Run this command to install the symfony/security-bundle, which is required for access control.

```bash
composer require symfony/security-bundle
```

--------------------------------

### Install Swashbuckle CLI tool

Source: https://scalar.com/products/api-references/integrations/aspnetcore/build-time-generation

Create a tool manifest and install the Swashbuckle.AspNetCore.Cli tool to enable build-time OpenAPI generation with Swashbuckle.

```shell
dotnet new tool-manifest
dotnet tool install Swashbuckle.AspNetCore.Cli
```

--------------------------------

### Install @scalar/api-reference-react with pnpm

Source: https://scalar.com/products/api-references/integrations/react

Install the React integration package using pnpm.

```bash
pnpm add @scalar/api-reference-react
```

--------------------------------

### Install @scalar/nestjs-api-reference

Source: https://scalar.com/products/api-references/integrations/nestjs

Install the middleware package via npm.

```bash
npm install @scalar/nestjs-api-reference
```

--------------------------------

### Directory structure example for mounted documents

Source: https://scalar.com/products/api-references/integrations/docker

Example directory structure for mounted documents, showing how files are organized under /docs.

```plaintext
/docs/
├── api-v1.json
├── internal/admin-api.yaml
└── external/partner-api.json
```

--------------------------------

### Install @scalar/sveltekit

Source: https://scalar.com/products/api-references/integrations/sveltekit

Install the Scalar SvelteKit package using npm.

```bash
npm install @scalar/sveltekit
```

--------------------------------

### Define a single example with x-example

Source: https://scalar.com/products/api-references/openapi

Use the x-example extension in Swagger 2.0 to provide a single example value for body parameters.

```yaml
swagger: '2.0'
paths:
  '/planets':
    post:
      consumes:
        - application/json
      parameters:
        - in: body
          name: body
          schema:
            type: object
          x-example:
            application/json:
              name: Earth
```

--------------------------------

### Install dependencies for Hono and Scalar

Source: https://scalar.com/products/api-references/integrations/nextjs-recipes/hono

Install the required packages: @scalar/nextjs-api-reference, hono@4, @hono/zod-openapi@1, and zod@4.

```bash
npm install @scalar/nextjs-api-reference hono@4 @hono/zod-openapi@1 zod@4
```

--------------------------------

### Install @scalar/openapi-to-markdown

Source: https://scalar.com/products/api-references/integrations/hono

Installs the package needed to generate Markdown from an OpenAPI document for LLMs.

```bash
npm install @scalar/openapi-to-markdown
```

--------------------------------

### Install Scalar.AspNetCore.Microsoft package

Source: https://scalar.com/products/api-references/integrations/aspnetcore/openapi-extensions

Adds the Scalar.AspNetCore.Microsoft package for Microsoft.AspNetCore.OpenApi.

```shell
dotnet add package Scalar.AspNetCore.Microsoft
```

--------------------------------

### Start Laravel development server

Source: https://scalar.com/products/api-references/integrations/laravel-scribe

Starts the Laravel development server, making the application accessible at http://127.0.0.1:8000.

```bash
php artisan serve
```

--------------------------------

### Install @fastify/swagger

Source: https://scalar.com/products/api-references/integrations/fastify

Install the official Swagger package to generate OpenAPI 3.0 files.

```bash
npm install @fastify/swagger
```

--------------------------------

### Define multiple examples with x-examples

Source: https://scalar.com/products/api-references/openapi

Use the x-examples extension in Swagger 2.0 to provide multiple named examples with summaries for body parameters.

```yaml
swagger: '2.0'
paths:
  '/planets':
    post:
      consumes:
        - application/json
      parameters:
        - in: body
          name: body
          schema:
            type: object
          x-examples:
            application/json:
              earth-example:
                summary: Earth planet
                value:
                  name: Earth
              mars-example:
                summary: Mars planet
                value:
                  name: Mars
```

--------------------------------

### Install @scalar/nextjs-api-reference

Source: https://scalar.com/products/api-references/integrations/nextjs

Install the standalone reference package for Next.js. Use this package when you want a separate HTML document for the API reference at /scalar.

```bash
npm install @scalar/nextjs-api-reference
```

--------------------------------

### Install @scalar/api-reference with npm

Source: https://scalar.com/products/api-references/integrations/vue

Install the Scalar API Reference package for Vue using npm.

```bash
npm install @scalar/api-reference
```

--------------------------------

### Start the AdonisJS development server

Source: https://scalar.com/products/api-references/integrations/adonisjs

Commands to change into the project directory and start the development server. After running, open http://localhost:3333 in your browser.

```bash
cd my-awesome-app
npm run dev
```

--------------------------------

### Install oRPC and Scalar dependencies

Source: https://scalar.com/products/api-references/integrations/nextjs-recipes/orpc

Install the required packages for oRPC 1.15.0, Zod 4, and the Scalar Next.js API reference.

```bash
npm install @scalar/nextjs-api-reference @orpc/server@1.15.0 @orpc/openapi@1.15.0 @orpc/zod@1.15.0 zod@4
```

--------------------------------

### Install Scalar.AspNetCore package

Source: https://scalar.com/products/api-references/integrations/aspnetcore/integration

Command to add the Scalar.AspNetCore NuGet package to the project.

```shell
dotnet add package Scalar.AspNetCore
```

--------------------------------

### Install @scalar/fastify-api-reference

Source: https://scalar.com/products/api-references/integrations/fastify

Install the Fastify plugin via npm. The plugin works with Fastify v4 and v5 and ships as an ES module.

```bash
npm install @scalar/fastify-api-reference
```

--------------------------------

### Install Scalar.Aspire package

Source: https://scalar.com/products/api-references/integrations/aspire

Use the dotnet CLI to add the Scalar.Aspire package to your project.

```shell
dotnet add package Scalar.Aspire
```

--------------------------------

### Install Flask OpenAPI3 and Scalar UI

Source: https://scalar.com/products/api-references/integrations/flask

Install the Flask OpenAPI3 framework and its Scalar UI template using pip. The Scalar UI template is optional but required for using the Scalar interface.

```bash
pip install -U flask-openapi3
pip install -U flask-openapi3-scalar
```

--------------------------------

### Install Scalar.AspNetCore.Swashbuckle package

Source: https://scalar.com/products/api-references/integrations/aspnetcore/openapi-extensions

Adds the Scalar.AspNetCore.Swashbuckle package for Swashbuckle.AspNetCore.SwaggerGen.

```shell
dotnet add package Scalar.AspNetCore.Swashbuckle
```

--------------------------------

### Install Microsoft.Extensions.ApiDescription.Server package

Source: https://scalar.com/products/api-references/integrations/aspnetcore/build-time-generation

Run this command to add the Microsoft.Extensions.ApiDescription.Server package, which enables automatic OpenAPI document generation during build.

```shell
dotnet add package Microsoft.Extensions.ApiDescription.Server
```

--------------------------------

### Quick Start with Scalar Mock Server

Source: https://scalar.com/products/api-references/integrations/aspire

Registers a mock server from an OpenAPI document and references it from a project. The mock server serves the document at /openapi.json and /openapi.yaml.

```csharp
using Scalar.Aspire;

var builder = DistributedApplication.CreateBuilder(args);

// Mock a backend straight from an OpenAPI document
var petstore = builder.AddScalarMockServer("petstore", options =>
{
    options.WithDocumentUrl("https://example.com/openapi.json");
});

// Other resources can depend on the mock as if it were the real service
builder.AddProject<Projects.BookService>("book-service")
    .WithReference(petstore);

builder.Build().Run();
```

--------------------------------

### Generate and preview static site

Source: https://scalar.com/products/api-references/server-side-rendering

Generate the static site and preview it locally. Open /docs/ on the preview server and deploy the contents of dist to your static host. Keep the trailing slash on /docs/ so the relative ./scalar.js URL resolves to /docs/scalar.js.

```bash
node generate-docs.mjs
npx serve dist
```

--------------------------------

### Language selection prompt output

Source: https://scalar.com/products/api-references/integrations/docusaurus

Example output from the Docusaurus installer asking which language to use. The default selection is JavaScript, but TypeScript is also an option.

```plaintext
? Which language do you want to use?
❯   JavaScript
    TypeScript
```

--------------------------------

### Set up Scalar with Aide Axum

Source: https://scalar.com/products/api-references/integrations/rust/aide

Configure the api_route to use Scalar in an Axum router. The example sets up a GET route at '/' that serves the Scalar documentation page, with a security requirement of 'ApiKey'.

```rust
use aide::{
    axum::{
        routing::{get_with},
        ApiRouter, IntoApiResponse,
    },
    openapi::OpenApi,
    scalar::Scalar,
};

// …

let router: ApiRouter = ApiRouter::new()
    .api_route_with(
        "/",
        get_with(
            Scalar::new("/docs/private/api.json")
                .with_title("Aide Axum")
                .axum_handler(),
            |op| op.description("This documentation page."),
        ),
        |p| p.security_requirement("ApiKey"),
    )

// …
```

--------------------------------

### Setup Elysia with @elysiajs/openapi plugin

Source: https://scalar.com/products/api-references/integrations/elysiajs

Use this snippet to integrate the OpenAPI plugin into an Elysia server. It creates a new Elysia instance, applies the openapi plugin, defines GET and POST routes, and listens on port 3000. The OpenAPI reference is available at http://localhost:3000/openapi.

```typescript
import { Elysia } from 'elysia'
import { openapi } from '@elysiajs/openapi'

new Elysia()
    .use(openapi())
    .get('/', () => 'hello')
    .post('/hello', () => 'OpenAPI')
    .listen(3000)

// open http://localhost:3000/openapi
```

--------------------------------

### Install Laravel installer via Composer

Source: https://scalar.com/products/api-references/integrations/laravel-scribe

Installs the Laravel installer globally using Composer. Required for creating a new Laravel project.

```bash
composer global require "laravel/installer=~1.1"
```

--------------------------------

### Render and serve API reference with renderApiReference and getJsAsset

Source: https://scalar.com/products/api-references/server-side-rendering

Render the HTML and JS once at startup, then serve from memory. The HTML includes inline CSS, a color-mode detection script, pre-rendered HTML, and a script tag for hydration. Serve the JS bundle at the path matching the cdn option (defaults to /scalar/scalar.js).

```ts
import { getJsAsset, renderApiReference } from '@scalar/server-side-rendering'

// Render the HTML once at startup
const html = await renderApiReference({
  pageTitle: 'My API Reference',
  config: {
    url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
  },
})

// Get the JS bundle at startup
const js = getJsAsset()

// Serve the pre-rendered HTML
app.get('/scalar', (c) => c.html(html))

// Serve the JS bundle for client-side hydration
app.get('/scalar/scalar.js', (c) =>
  c.body(js, {
    headers: { 'content-type': 'application/javascript' },
  }),
)
```

--------------------------------

### Basic Async Example

Source: https://scalar.com/products/api-references/integrations/aspnetcore/integration

Registers the Scalar API reference with an async configuration action that reads header content from a file.

```csharp
app.MapScalarApiReference(async options =>
{
    options.HeaderContent = await File.ReadAllTextAsync("header.html");
});
```

--------------------------------

### Install scalar-fastapi

Source: https://scalar.com/products/api-references/integrations/fastapi

Install the scalar-fastapi package using pip.

```bash
pip install scalar-fastapi
```

--------------------------------

### Document Sources for Mock Server

Source: https://scalar.com/products/api-references/integrations/aspire

Shows three ways to configure the document source: inline content, a local file, or an absolute URL. Exactly one source must be configured.

```csharp
// Inline content (JSON or YAML), embedded into the container — no volume mount required
builder.AddScalarMockServer("inline", options => options.WithDocument(openApiString));

// Read a local file at AppHost build time and provide it inline
builder.AddScalarMockServer("from-file", options => options.WithDocumentFile("./openapi/petstore.yaml"));

// Fetch from an absolute URL on startup
builder.AddScalarMockServer("from-url", options =>
    options.WithDocumentUrl("https://example.com/openapi.json"));
```

--------------------------------

### Install @scalar/astro

Source: https://scalar.com/products/api-references/integrations/astro

Install the @scalar/astro package using npm.

```bash
npm install @scalar/astro
```

--------------------------------

### Run the Fastify dev server

Source: https://scalar.com/products/api-references/integrations/fastify

Starts the Fastify server using the dev script, which should output the URL (http://localhost:3000) where the server is running.

```bash
npm run dev
```

--------------------------------

### Install @scalar/docusaurus

Source: https://scalar.com/products/api-references/integrations/docusaurus

Install the Scalar Docusaurus plugin using npm.

```bash
npm install @scalar/docusaurus
```

--------------------------------

### SearchHotKey example

Source: https://scalar.com/products/api-references/integrations/django-ninja

Shows how to use the SearchHotKey enum to set a hotkey, e.g., K for Cmd+K on Mac or Ctrl+K on Windows/Linux.

```python
from scalar_ninja import SearchHotKey

# All letters from A to Z, e.g.:
SearchHotKey.K   # Use 'K' key for 'Cmd+K' (Mac) / 'Ctrl+K' (Windows/Linux)
```

--------------------------------

### Install Scalar Ninja

Source: https://scalar.com/products/api-references/integrations/django-ninja

Install the scalar-ninja package via pip.

```bash
pip install scalar-ninja
```

--------------------------------

### Install @scalar/blocks with npm

Source: https://scalar.com/products/api-references/blocks/getting-started

Install the @scalar/blocks package using npm.

```bash
npm install @scalar/blocks
```

--------------------------------

### createCodeExample

Source: https://scalar.com/products/api-references/blocks/code-example

Creates a code example block that renders a copy-pasteable request snippet for a single operation. It mounts into a DOM element and requires a workspace store with an OpenAPI document.

```APIDOC
## createCodeExample

### Description
Creates a code example block that renders a copy-pasteable request snippet for a single operation. It mounts into a DOM element and requires a workspace store with an OpenAPI document.

### Method
Function

### Signature
createCodeExample(element: string | HTMLElement, options: CodeExampleOptions): { app: VueApp, destroy: () => void }

### Parameters
#### element (string | HTMLElement) - Required
CSS selector or HTMLElement to mount the block into. Throws if the element cannot be found.

#### options (CodeExampleOptions) - Required
Options object with the following properties:

- **store** (WorkspaceStore) - Required - The workspace store that holds the OpenAPI document(s) to render from.
- **path** (string) - Required - Path of the operation to render, e.g. /users/{id}.
- **method** (HttpMethod) - Required - HTTP method of the operation to render.
- **selectedClient** (AvailableClients[number]) - Optional - Pre-selected client ID, e.g. shell/curl.
- **selectedServer** (ServerObject | null) - Optional - Server override used to build the example. When omitted, the server is derived from the active document (operation, then path item, then document level). Pass null to force "no server".
- **selectedExample** (string) - Optional - Pre-selected example key for parameters and the request body.
- **securitySchemes** (SecuritySchemeObjectSecret[]) - Optional - Security schemes applicable to the operation.
- **darkMode** (boolean) - Optional - Force a color mode. When omitted, the block inherits the ambient theme of the host page.

### Return Value
Returns an object with:
- **app** (VueApp) - The underlying Vue application instance.
- **destroy** (function) - Call to unsubscribe the block from the store and unmount it.

### Usage Example
```ts
import { createWorkspaceStore } from '@scalar/workspace-store/client'
import { createCodeExample } from '@scalar/blocks/code-example'
import '@scalar/blocks/style.css'

const store = createWorkspaceStore()

await store.addDocument({
  name: 'default',
  url: '/openapi.json',
})

const block = createCodeExample('#block', {
  store,
  path: '/users/{id}',
  method: 'get',
})

// Later, when the block is no longer needed
block.destroy()
```

### Notes
- The block mounts itself into a DOM element, so you do not need to set up Vue yourself.
- The client and example selections round-trip through the store. Once a user picks a client or an example, that choice is written back to the store (x-scalar-default-client and x-scalar-default-example) and wins over the initial selectedClient / selectedExample seed.
- Selections survive re-renders and stay in sync across every block reading from the same store.
- Throws if the element cannot be found, or if the path and method do not point at an operation in the store.
```

--------------------------------

### Install @scalar/nuxt with nuxi

Source: https://scalar.com/products/api-references/integrations/nuxt

Run this command to install the @scalar/nuxt module into your Nuxt application.

```bash
npx nuxi module add @scalar/nuxt
```

--------------------------------

### Effect HTTP API with Scalar documentation

Source: https://scalar.com/products/api-references/integrations/effect

This example demonstrates how to set up an HTTP API using Effect's HttpApi, register it with a router, add Scalar documentation at /docs, and serve it on a Node server. It requires the @effect/platform and @effect/platform-node packages. The API is defined with a 'users' group and a 'me' endpoint, and the server listens on port 3000.

```typescript
// https://github.com/Effect-TS/effect/tree/main/packages/platform#registering-a-httpapi
import {
  HttpApi,
  HttpApiBuilder,
  HttpApiEndpoint,
  HttpApiGroup,
  HttpApiScalar,
  HttpLayerRouter
} from "@effect/platform"
import { NodeHttpServer, NodeRuntime } from "@effect/platform-node"
import { Effect, Layer } from "effect"
import { createServer } from "http"

// First, we define our HttpApi
class MyApi extends HttpApi.make("api").add(
  HttpApiGroup.make("users")
    .add(HttpApiEndpoint.get("me", "/me"))
    .prefix("/users")
) {}

// Implement the handlers for the API
const UsersApiLayer = HttpApiBuilder.group(MyApi, "users", (handers) =>
  handers.handle("me", () => Effect.void)
)

// Use `HttpLayerRouter.addHttpApi` to register the API with the router
const HttpApiRoutes = HttpLayerRouter.addHttpApi(MyApi, {
  openapiPath: "/docs/openapi.json"
}).pipe(
  // Provide the api handlers layer
  Layer.provide(UsersApiLayer)
)

// Create a /docs route for the API documentation
const DocsRoute = HttpApiScalar.layerHttpLayerRouter({
  api: MyApi,
  path: "/docs"
})

// Finally, we merge all routes and serve them using the Node HTTP server
const AllRoutes = Layer.mergeAll(HttpApiRoutes, DocsRoute).pipe(
  Layer.provide(HttpLayerRouter.cors())
)

HttpLayerRouter.serve(AllRoutes).pipe(
  Layer.provide(NodeHttpServer.layer(createServer, { port: 3000 })),
  Layer.launch,
  NodeRuntime.runMain
)
```

--------------------------------

### Handle redirects with hashRouting and pathRouting

Source: https://scalar.com/products/api-references/configuration

Provides examples for handling redirects using either hashRouting (default) or pathRouting.

```javascript
// Example for hashRouting (default)
{
  redirect: (hash) => hash.replace('#v1/old-path', '#v2/new-path')
}

// Example for pathRouting
{
  redirect: (pathWithHash) => {
    if (pathWithHash.includes('#')) {
      return pathWithHash.replace('/v1/tags/user#operation/get-user', '/v1/tags/user/operation/get-user')
    }
    return null
  }
}
```

--------------------------------

### Create a new Docusaurus project with pnpm

Source: https://scalar.com/products/api-references/integrations/docusaurus

Run this command to scaffold a new Docusaurus site named 'my-awesome-website' using the classic template. The installer will prompt for a language; both JavaScript and TypeScript are supported.

```bash
pnpm create create-docusaurus@latest my-awesome-website classic
```
Tokens:
Raw