Scalar API Client

The Scalar API Client is a powerful tool designed to simplify API testing and integration. This versatile package offers multiple usage options:

• standalone application for quick and easy API testing
• embeddable component in various frontend environments
• customizable module that can be integrated into existing projects

Features

• Intuitive interface for sending API requests and viewing responses
• Support for multiple authentication methods
• Real-time request/response logging
• Customizable request headers and parameters
• Response visualization and formatting options

Installation

npm install @scalar/api-client

Usage

App

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

  
    
    
    <title>Scalar API Client App</title>
  
  
    <div class="scalar-app scalar-client" id="scalar-client"></div>
    
  

// 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',
})

Modal

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

Community

We are API nerds. You too? Let’s chat on Discord:

License

The source code in this repository is licensed under MIT.