@scalar/use-codemirror

CodeMirror Hook for Vue

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

Installation

npm install @scalar/use-codemirror

Usage

<script setup>
import { useCodeMirror } from '@scalar/use-codemirror'
import { ref } from 'vue'

const editor = ref(null)

const { codeMirror, setCodeMirrorContent } = useCodeMirror({
  codeMirrorRef: editor,
  content: '{ "foo": "bar" }',
  language: 'json',
  lineNumbers: true,
  onChange: (value) => {
    console.log('Content changed:', value)
  },
})
</script>

<template>
  <div ref="editor" />
</template>

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.