@scalar/api-reference

Generate beautiful API references from OpenAPI documents
7,800,449 16,327
vue vue3 component documentation openapi reference spec swagger
Install
npm install @scalar/api-reference
Latest Version:1.76.0
Vue:3
License:MIT
Last Updated:Oct 27, 2026
Links: GitHub  ·  npm
Maintainer: cameronrohani

Scalar API Reference

Version Downloads Hits on jsdelivr License Discord

Interactive API Reference from OpenAPI/Swagger Documents Try our Demo

Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in.

  • API References — Interactive API documentation from OpenAPI and AsyncAPI specs.
  • Developer Docs — Write in Markdown/MDX, generate API references, sync with two-way Git.
  • SDK Generator — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby.
  • API Client — Open-source, offline-first Postman alternative built on OpenAPI.

20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · scalar.com

Screenshot of an API Reference

CDN

<!doctype html>
<html>
  <head>
    <title>Scalar API Reference</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div id="app"></div>

    <!-- Load the Script -->
    <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>

    <!-- Initialize the Scalar API Reference -->
    <script>
      Scalar.createApiReference('#app', {
        // The URL of the OpenAPI/Swagger document
        url: 'https://registry.scalar.com/@scalar/apis/galaxy?format=json',
        // Avoid CORS issues
        proxyUrl: 'https://proxy.scalar.com',
      })
    </script>
  </body>
</html>

AsyncAPI Markdown actions

AsyncAPI channels and operations include a Copy as Markdown button in both layouts. Copies contain the selected section and its relevant context, using @scalar/asyncapi-to-markdown. Tags and introduction support custom actions but do not show a copy button by default.

When embedding Vue sections, use the actions slot to replace the default button, or supply an empty slot to hide it:

<AsyncApiChannel v-bind="channelProps">
  <template #actions>
    <button @click="copyPage">Copy page</button>
  </template>
</AsyncApiChannel>

<AsyncApiOperation v-bind="operationProps">
  <template #actions />
</AsyncApiOperation>

AsyncApiChannel and AsyncApiOperation are exported from @scalar/api-reference/components and receive the resolved AsyncAPI document. Embedded Tag (from @scalar/api-reference/components) and InfoBlock (from @scalar/api-reference/blocks) expose the same actions slot without a default button. Pass the resolved document as asyncApiDocument to Tag to preserve real AsyncAPI tag headings. These are section component slots, not configuration options on the full API reference.

Documentation

Read the documentation here

Community

We are API nerds. You too? Let's chat on Discord: https://discord.gg/scalar

License

The source code in this repository is licensed under MIT.

Related Packages

@scalar/swagger-editor

an editor which is tailored to write OpenAPI spec

58,866 16,316
openapi spec swagger api editor
@koumoul/vue-openapi

Display API documentation that follow the OpenAPI 3.0 Specification

1,110 94
documentation openapi swagger vue api material
@comet-cli/plugin-documentation

Plugin for generating API documentation

6,405 0
documentation openapi swagger api api-blueprint comet raml rest
vitepress-openapi-docs

Interactive OpenAPI documentation for VitePress. Lightweight, Vue-native, compos...

3,376 6
documentation openapi swagger vue vue3 api rest vitepress
@braydenyang/fdoc

Embeddable OpenAPI 3.x documentation & debug UI

5,514
openapi swagger vue docs

Version History

Version Released Vue License
1.76.0 ^3.5.44 MIT
1.75.1 ^3.5.40 MIT
1.75.0 ^3.5.40 MIT
1.74.0 ^3.5.40 MIT
1.73.1 ^3.5.40 MIT
Pre-releases (2)
Version Released Vue License
1.10.4-alpha ^3.3.0 MIT
1.10.3-alpha ^3.3.0 MIT