Scalar OpenAPI Preview

A Visual Studio Code extension that provides a beautiful, interactive preview of OpenAPI/Swagger specifications using the Scalar API reference viewer.

Features

• Beautiful UI - Modern, responsive API documentation viewer
• JSON & YAML support - Works with both OpenAPI formats
• Live reload - Preview updates automatically when you save
• Theme support - Respects your VS Code theme (dark/light)
• Sidebar navigation - Easy navigation through your API
• Try it out - Test your API endpoints directly

Known Limitations

• No synchronized scrolling - The preview does not automatically scroll to match your position in the editor. This is intentional, as synchronized scrolling in many preview extensions can result in jerky, distracting behavior. In a future release, the extension may support manual navigation to sections within the editor spec by clicking links in the preview.

Usage

1. Open any OpenAPI/Swagger specification file (.json, .yaml, or .yml)
2. Use any of these methods to open the preview:
   • Command Palette: Press Ctrl+Shift+P and type "Scalar: Open Preview"
   • Context Menu: Right-click on a file in the explorer and select "Scalar: Open Preview"
   • Editor Title: Click the preview icon in the editor title bar

Configuration

You can customize the Scalar viewer through VS Code settings:

Supported Specifications

• OpenAPI 3.0.x
• OpenAPI 3.1.x
• Swagger 2.0

Requirements

• Visual Studio Code 1.85.0 or higher

Development

# Install dependencies
pnpm install

# Compile TypeScript
pnpm run compile

# Watch for changes
pnpm run watch

# Package extension
pnpm run package

Credits

• Scalar - The amazing API reference viewer

License

MIT