type="module"
src="./main.js">


`

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

// Initialize
await createApiClientApp(document.getElementById('scalar-client'), {
url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
proxyUrl: 'https://proxy.scalar.com',
})
`

$3

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

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

// Initialize
const { open } = await createApiClientApp(
document.getElementById('scalar-client'),
{
url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
proxyUrl: 'https://proxy.scalar.com',
},
)

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

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

Configuration

`ts
/* Configuration options for the Scalar API client /
export type ClientConfiguration = {
/* The Swagger/OpenAPI document to render /
spec: SourceConfiguration
/* 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:

$3

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

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

$3

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

`ts
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.