scalar

Scalar UI integrates the Scalar open-source API documentation library into Drupal, providing a modern, and interactive interface for rendering OpenAPI specifications directly on Drupal site.

This package contains two sub-modules: OpenAPI UI Scalar (openapi_ui_scalar) for rendering OpenAPI specs through the OpenAPI UI plugin architecture, and Scalar UI Formatter (scalar_ui_formatter) for embedding interactive API documentation inside any field using Drupal's Field Formatter system.

If you expose REST, JSON:API, or any other OpenAPI-described service from your Drupal site, Scalar UI gives your developers and API consumers an elegant, fully interactive reference - without leaving your Drupal environment.

Features

This module package bridges Drupal's OpenAPI ecosystem with the Scalar library, offering two modules:

• openapi_ui_scalar plugs directly into the OpenAPI UI module's plugin architecture becoming selectable as the UI renderer on any OpenAPI UI display page - the same way you would choose Swagger UI or ReDoc. See table here.
• scalar_ui_formatter is a standalone field formatter for file fields and link fields containing an OpenAPI document URL or uploaded json / yaml specification file. It renders the Scalar widget inline within any node, paragraph, or other entity display - making it straightforward to embed API documentation alongside other content, such as developer portal pages or documentation articles. It is popular solution for integrations such as Google Apigee.

Key features include:

• Modern, responsive API documentation UI with built-in dark/light mode support
• Interactive "Try it out" API console allowing users to make live requests from the browser
• Support for OpenAPI 3.x specifications
• Zero external SaaS dependency - Scalar renders entirely client-side with no external calls required
• Plugin-based integration with OpenAPI UI, making Scalar interchangeable with Swagger UI and ReDoc
• Field formatter integration for embedding API docs directly in content
• Configurable CDN or local library loading
• Accessible and keyboard-navigable interface

Configuration

After installing this module via Composer (composer require drupal/scalar), enable one or both sub-modules at Admin → Extend.

Using openapi_ui_scalar with OpenAPI UI:

• Navigate to any path that uses the OpenAPI UI display, such as those provided by the OpenAPI JSON:API or OpenAPI REST modules.
• Go to Admin → Configuration → Web Services → OpenAPI and select Scalar as
• the UI plugin.
• Save the configuration and visit your OpenAPI documentation path to see Scalar rendering your spec.

Using scalar_ui_formatter as a field formatter:

• Go to Admin → Structure → Content Types → [Your Type] → Manage Display. For any file field or link field that holds an OpenAPI document, select Scalar API Viewer as the formatter.
• Configure the formatter settings (such as layout mode and theme) and save. When content with that field is viewed, the Scalar interactive UI will render inline.

JavaScript library

The Scalar JavaScript library is loaded either from a CDN (default, no extra setup needed) or from a local installation under /libraries/scalar if you prefer to self-host it. Library configuration is available at Admin → Configuration → Development → Scalar UI Settings.

Additional Requirements

The following are required depending on which sub-module you use:

• Drupal 10 or 11 (both supported)
• OpenAPI UI - required by openapi_ui_scalar only. Provides the plugin architecture that this module implements.
• Scalar JavaScript library - the @scalar/api-reference library (MIT licensed). Can be loaded via CDN automatically, or installed locally via Composer asset management or manual download to /libraries/scalar.

To install the Scalar library locally via Composer, add the following to your project's composer.json:

"extra": {
  "installer-paths": {
    "web/libraries/{$name}": ["type:drupal-library"]
  }
}

Then run:

composer require scalar/scalar-api-reference

Similar Projects

Several other Drupal modules render OpenAPI specifications. Here is how Scalar UI compares:

• Swagger UI for OpenAPI UI - The most widely deployed option. Uses the battle-tested Swagger UI library. Scalar UI offers a more modern aesthetic, a built-in dark mode, and a cleaner reading experience, while providing the same try-it-out console functionality.
• Swagger UI Formatter - Provides a Swagger UI field formatter without requiring the OpenAPI UI module. The scalar_ui_formatter sub-module fills the same role with the Scalar library instead.
• ReDoc for OpenAPI UI - ReDoc is a documentation-focused renderer with a clean three-panel layout, but it does not include a built-in API console for making live requests. Scalar provides both rich documentation display and an interactive console in a single library.

Supporting This Module

This module is maintained by volunteers. If you find it useful, you can support its continued development in the following ways:

• Report issues and review patches in the issue queue on Drupal.org.
• Contribute code via the GitLab repository.
• Sponsor the upstream Scalar project via their GitHub repository - a healthy upstream means a better module
  for everyone.

Documentation

• Apigee configuration - documentation on configuring Scalar for Apigee.
• Scalar official website - learn about the upstream Scalar library, its features, and configuration options.
• Scalar on GitHub - source code, changelog, and issues for the underlying JavaScript library.