DEV Community

Alex Spinov
Alex Spinov

Posted on

Scalar Has a Free API — Beautiful API Documentation in Seconds

#api #openapi #documentation #webdev

TL;DR

Scalar is an open-source API reference generator that turns your OpenAPI/Swagger spec into beautiful, interactive documentation. It's free, customizable, and includes a built-in API client for testing endpoints.

What Is Scalar?

Scalar is a modern alternative to Swagger UI and Redoc:

  • Beautiful by default — dark/light themes, clean typography
  • Interactive API client — test endpoints right from the docs
  • OpenAPI 3.x support — full spec compliance
  • Multiple integrations — Express, Fastify, Hono, Next.js, NestJS
  • Customizable — themes, layouts, authentication
  • Free and open source — MIT license

Quick Start with Express 

npm install @scalar/express-api-reference
Enter fullscreen mode Exit fullscreen mode 
import express from "express";
import { apiReference } from "@scalar/express-api-reference";

const app = express();

app.use(
  "/docs",
  apiReference({
    spec: {
      url: "/openapi.json",
    },
    theme: "purple",
  })
);

app.get("/openapi.json", (req, res) => {
  res.json({
    openapi: "3.1.0",
    info: { title: "My API", version: "1.0" },
    paths: {
      "/users": {
        get: {
          summary: "List users",
          responses: {
            200: {
              description: "Success",
              content: {
                "application/json": {
                  schema: {
                    type: "array",
                    items: { $ref: "#/components/schemas/User" },
                  },
                },
              },
            },
          },
        },
      },
    },
    components: {
      schemas: {
        User: {
          type: "object",
          properties: {
            id: { type: "integer" },
            name: { type: "string" },
            email: { type: "string", format: "email" },
          },
        },
      },
    },
  });
});

app.listen(3000);
Enter fullscreen mode Exit fullscreen mode

CDN Usage (Zero Dependencies) 

<!DOCTYPE html>
<html>
<head>
  <title>API Docs</title>
  <meta charset="utf-8" />
</head>
<body>
  <script
    id="api-reference"
    data-url="https://your-api.com/openapi.json"
    data-theme="default"
  ></script>
  <script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Framework Integrations

Fastify 

import Fastify from "fastify";
import scalarPlugin from "@scalar/fastify-api-reference";

const fastify = Fastify();

await fastify.register(scalarPlugin, {
  routePrefix: "/docs",
  configuration: {
    spec: { url: "/openapi.json" },
    theme: "kepler",
  },
});
Enter fullscreen mode Exit fullscreen mode

Hono 

import { Hono } from "hono";
import { apiReference } from "@scalar/hono-api-reference";

const app = new Hono();

app.get(
  "/docs",
  apiReference({
    spec: { url: "/openapi.json" },
    theme: "saturn",
  })
);
Enter fullscreen mode Exit fullscreen mode

NestJS 

import { NestFactory } from "@nestjs/core";
import { DocumentBuilder, SwaggerModule } from "@nestjs/swagger";
import { ScalarModule } from "@scalar/nestjs-api-reference";

const config = new DocumentBuilder()
  .setTitle("My API")
  .setVersion("1.0")
  .build();

const document = SwaggerModule.createDocument(app, config);

app.use(
  "/docs",
  ScalarModule.setup({ spec: { content: document } })
);
Enter fullscreen mode Exit fullscreen mode

Scalar vs Swagger UI vs Redoc

Feature Scalar Swagger UI Redoc
Design Modern Classic Clean
API Client ✅ Built-in ✅ Try it ❌
Dark mode ✅ ❌ ❌
Themes 10+ 1 3
OpenAPI 3.1 ✅ ✅ ✅
Search ✅ ✅ ✅
Performance Fast Slow (large specs) Fast
Bundle size Small Large Medium

Customization 

apiReference({
  spec: { url: "/openapi.json" },
  theme: "purple",
  layout: "modern",
  customCss: `
    .dark-mode { --scalar-background-1: #1a1a2e; }
  `,
  metaData: {
    title: "My Company API",
    description: "API documentation",
  },
  authentication: {
    preferredSecurityScheme: "bearerAuth",
  },
});
Enter fullscreen mode Exit fullscreen mode

Resources

Building APIs that need web data? My Apify scraping tools extract structured data from any website via clean REST APIs — document them beautifully with Scalar. Questions? Email spinov001@gmail.com

Top comments (0)