Generate interactive API documentations from Swagger files. Try our Demo
- Uses Swagger/OpenAPI spec files
- Request examples for a ton of languages + frameworks
- Has an integrated API client
- Edit your Swagger files with a live preview
- Doesn’t look like it’s 2011
- Getting Started
- With React
- Using our amazing service
- Themes
- Advanced: Styling
- Community
- Other packages
- Contributing
- License
<!DOCTYPE html>
<html>
<head>
<title>API Reference</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1" />
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<!-- Add your own OpenAPI/Swagger spec file URL here: -->
<script
id="api-reference"
data-url="https://example.com/swagger.json"></script>
<script src="https://www.unpkg.com/@scalar/api-reference"></script>
</body>
</html>You can also use the following syntax to directly pass an OpenAPI spec:
<script
id="api-reference"
type="application/json">
{ … }
</script>If you’d like to add a request proxy for the API client (to avoid CORS issues):
<script
id="api-reference"
type="application/json"
data-proxy-url="https://api.scalar.com/request-proxy">
{ … }
</script>The API Reference is built in Vue.js. If you’re working in Vue.js, too, you can directly use our Vue components. Just install them:
npm install @scalar/api-referenceAnd import the ApiReference component to your app:
<script setup lang="ts">
import { ApiReference } from '@scalar/api-reference'
</script>
<template>
<ApiReference />
</template>You can pass props to customize the API reference.
The API Reference package is written in Vue. That shouldn’t stop you from using it in React, though. You can use veaury to load the <APIReference /> component in React:
import { ApiReference as VueComponent } from '@scalar/api-reference'
import { applyVueInReact } from 'veaury'
const ApiReference = applyVueInReact(VueComponent)
function App() {
return (
<>
<ApiReference isEditable={true} />
</>
)
}
export default AppWait, this is open source and you can do whatever you want. But if you want to add a nice, customizable guide, collaborate with your team and have everything served through a CDN, create an account on scalar.com.
You don’t like the color scheme? We’ve prepared some themes for you:
/* theme?: 'alternate' | 'default' | 'moon' | 'purple' | 'solarized' */
<ApiReference theme="moon" />ℹ️ The default theme is … the default theme. If you want to make sure no theme is applied, pass none.
Overwrite our CSS variables. We won’t judge.
:root {
--theme-font: 'Comic Sans MS', 'Comic Sans', cursive;
}
We’re using the default- prefix for our variables to not overwrite your variables. You can use all variables without a prefix.
/* ✅ Good (without `default` prefix) */
--theme-font: 'Comic Sans MS', 'Comic Sans', cursive;
/* ❌ Bad (with `default` prefix) */
--default-theme-font: 'Comic Sans MS', 'Comic Sans', cursive;We are API nerds. You too? Let’s chat on Discord: https://discord.com/invite/Ve683JXN
This repository contains all our open source projects and there’s definitely more to discover.
| Package | Description |
|---|---|
| @scalar/api-client | the open source API testing client |
| @scalar/api-client-proxy | an api request proxy based on express |
| @scalar/api-reference | generate beautiful API references |
| @scalar/echo-server | an express server which replies with the request data |
| @scalar/fastify-api-reference | a fastify plugin to render API references |
| @scalar/swagger-editor | an editor tailored to write OpenAPI spec |
| @scalar/swagger-parser | parse OpenAPI specs |
| @scalar/use-clipboard | tiny Vue wrapper around the clipboard API |
| @scalar/use-codemirror | CodeMirror for Vue |
| @scalar/use-keyboard-event | keyboard shortcuts for Vue |
| @scalar/use-toasts | display toasts in Vue |
| @scalar/use-tooltip | tooltips in Vue |
Contributions are welcome. We’re using pnpm.
Install all dependencies:
$ pnpm install
Run the development server:
$ pnpm run dev
Build all packages:
$ pnpm run build
The source code in this repository is licensed under MIT.