Scalar API Reference

Generate interactive API documentations from Swagger files. Try our Demo

Installation

npm install @scalar/api-reference

Usage

<script setup>
import { ApiReference } from '@scalar/api-reference'
</script>

<template>
  <ApiReference />
</template>

You can even mount the component in React.

Configuration

There’s a configuration object that can be used on all platforms. In Vue.js, you use it like this:

isEditable?: boolean

Whether the Swagger editor should be shown.

<ApiReference :configuration="{ isEditable: true }" />

spec.content?: string

Directly pass an OpenAPI/Swagger spec.

<ApiReference :configuration="{ spec: { content: '{ … }' } }" />

spec.url?: string

Pass the URL of a spec file (JSON or Yaml).

<ApiReference :configuration="{ spec: { url: '/swagger.json' } }" />

spec.preparsedContent?: string

You can preprocess specs with @scalar/swagger-parser and directly pass the result.

<ApiReference :configuration="{ spec: { preparsedContent : '{ … }' } } />

proxyUrl?: string

Making requests to other domains is restricted in the browser and requires CORS headers. It’s recommended to use a proxy to send requests to other origins.

<ApiReference :configuration="{ proxy: 'https://proxy.example.com' }" />

ℹ️ You can use @scalar/api-client-proxy to host your own proxy or you can just use ours:

<ApiReference
  :configuration="{ proxy: 'https://api.scalar.com/request-proxy' }" />

initialContent?: string

You can decide which tab should be active by default:

<ApiReference
  :initialTabState="{ tabs: { initialContent: 'Getting Started' } }" />

And you can define which tabs should be visible:

<ApiReference
  :configuration="{
    tabs: { available: ['Getting Started', 'Swagger Editor'] },
  }" />

showSidebar?: boolean

Whether the sidebar should be shown.

<ApiReference :configuration="{ showSidebar: true} />

footerBelowSidebar?: boolean

Whether the footer should be below the content or below both the content and the sidebar.

<ApiReference :configuration="{ footerBelowSidebar: true} />

searchHotKey?: string

Key used with CNTRL/CMD to open the search modal (defaults to 'k' e.g. CMD+k)

<ApiReference :configuration="{ searchHotKey: 'l'} />