Scalar Swagger Editor

Installation

npm install @scalar/swagger-editor

Usage

<script setup>
import { SwaggerEditor } from '@scalar/swagger-editor'
</script>

<template>
  <SwaggerEditor value="{ … }" />
</template>

Custom CodeMirror extensions

You can pass custom CodeMirror extensions:

import { lineNumbers } from '@codemirror/view'
import { useSwaggerEditor } from '@scalar/swagger-editor'

const { registerExtension } = useSwaggerEditor()

registerExtension('lineNumbers', lineNumbers())

You can unregister the extension, too:

registerExtension('lineNumbers')

Show the status bar

You can pass a text (or a Vue.js ref) to the Swagger Editor to show and fill the status bar:

import { useSwaggerEditor } from '@scalar/swagger-editor'

const { bindStatusText } = useSwaggerEditor()

bindStatusText('Hello :-)')