Skip to content
aq-ui
Back to EditorsEditor

Code Editor

CodeMirror 6 editor with controlled state, lazy languages, diagnostics, search, folding, and token-aware themes.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add code-editor

API reference

Client moduleView full source

Quick start

"use client"

import { CodeEditor } from "@/components/ui/code-editor"

<CodeEditor />

Exports

  • CodeDiagnostic type
  • CodeEditor const
  • CodeEditorHandle type
  • CodeEditorProps interface
  • CodeEditorStatusBar function
  • CodeEditorStatusBarProps interface
  • CodeLanguage type
  • CodeLanguageLoader type
  • loadCodeLanguage function
  • registerCodeLanguage function
  • useCodeEditor function

Registry dependencies

use-code-editor, utils

Package dependencies

@codemirror/state@^6.7.1

Files

  • components/ui/code-editor.tsx

Source