Scalar API Reference

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.

Props

isEditable?: boolean

Whether the Swagger editor should be shown.

<ApiReference :isEditable="true" />

spec?: string

Directly pass an OpenAPI/Swagger spec.

<ApiReference :spec="{ … }" />

specUrl?: string

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

<ApiReference specUrl="/swagger.json" />

transformedSpec?: string

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

<ApiReference :specResult="{ … }" />

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 proxyUrl="https://proxy.example.com" />

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

<ApiReference proxyUrl="https://api.scalar.com/request-proxy" />

initialTabState?: string

You can decide which tab should be active by default:

<ApiReference initialTabState="Getting Started" />
<!-- or -->
<ApiReference initialTabState="Swagger Editor" />

showSidebar?: boolean

Whether the sidebar should be shown.

<ApiReference :showSidebar="true" />

footerBelowSidebar?: boolean

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

<ApiReference :footerBelowSidebar="true" />