@scalar/api-client
v2.0.62
Published
the open source API testing client
Downloads
93,779
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',
})
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