Package Exports

@scalar/api-client
@scalar/api-client/components
@scalar/api-client/components/AddressBar
@scalar/api-client/components/CommandPalette
@scalar/api-client/components/DarkModeToggle
@scalar/api-client/components/DataTable
@scalar/api-client/components/HttpMethod
@scalar/api-client/components/Search
@scalar/api-client/components/Sidebar
@scalar/api-client/hooks
@scalar/api-client/layouts/App
@scalar/api-client/layouts/Modal
@scalar/api-client/libs
@scalar/api-client/libs/eventBusses
@scalar/api-client/store
@scalar/api-client/style.css
@scalar/api-client/views/Request/components
@scalar/api-client/views/Request/libs

Readme

Scalar API Client

Installation

npm install @scalar/api-client

Usage

App

You can mount the full-blown API Client to your DOM like this:

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Scalar API Client App</title>
  </head>
  <body>
    <div
      id="scalar-client"
      class="scalar-app scalar-client"></div>
    <script
      type="module"
      src="./main.js"></script>
  </body>
</html>

// main.js
import { createApiClientApp } from '@/App'

// Initialize
await createApiClientApp(document.getElementById('scalar-client'), {
  spec: {
    url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
  },
  proxyUrl: 'https://proxy.scalar.com',
})

Or you can mount a more compact version, which is living in a modal:

// main.js
import { createApiClientApp } from '@/App'

// Initialize
const { open } = await createApiClientApp(
  document.getElementById('scalar-client'),
  {
    spec: {
      url: 'https://cdn.jsdelivr.net/npm/@scalar/galaxy/dist/latest.json',
    },
    proxyUrl: 'https://proxy.scalar.com',
  },
)

// Open the API client right-away
open()

// Or: Open a specific operation
// open({
//   method: 'GET',
//   path: '/me',
// })

Configuration

/** Configuration options for the Scalar API client */
export type ClientConfiguration = {
  /** The Swagger/OpenAPI spec to render */
  spec: SpecConfiguration
  /** Pass in a proxy to the API client */
  proxyUrl?: string
  /** Pass in a theme API client */
  themeId?: string
  /** Whether to show the sidebar */
  showSidebar?: boolean
  /** Whether dark mode is on or off initially (light mode) */
  // darkMode?: boolean
  /** Key used with CTRL/CMD to open the search modal (defaults to 'k' e.g. CMD+k) */
  searchHotKey?:
    | 'a'
    | 'b'
    | 'c'
    | 'd'
    | 'e'
    | 'f'
    | 'g'
    | 'h'
    | 'i'
    | 'j'
    | 'k'
    | 'l'
    | 'm'
    | 'n'
    | 'o'
    | 'p'
    | 'q'
    | 'r'
    | 's'
    | 't'
    | 'u'
    | 'v'
    | 'w'
    | 'x'
    | 'y'
    | 'z'
}

Available Methods

The following methods are returned from the createApiClientModal call:

open

Opens the modal while allowing you to select which request to open to

open({ path: string; method: RequestMethod })

updateConfig

Allows you to update the config at any time, this will clear your current state and re-import a fresh spec!

updateConfig(newConfig: ClientConfiguration, mergeConfigs?: boolean): void