CodeEditor

A theme-aware code editor built on CodeMirror for syntax-highlighted code editing with multiple language support.

Installation

This component requires @codemirror packages as peer dependencies:

npm install @codemirror/autocomplete @codemirror/commands @codemirror/language @codemirror/lint @codemirror/search @codemirror/state @codemirror/view @codemirror/lang-javascript @codemirror/lang-python @codemirror/lang-html @codemirror/lang-css @codemirror/lang-json @codemirror/lang-markdown @codemirror/lang-sql @codemirror/lang-xml

Import

import { CodeEditor } from 'asterui/codeeditor'

Examples

Basic Editor

Simple code editor with JavaScript syntax highlighting.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <CodeEditor
        language="javascript"
        value="function hello() {\n  return 'Hello, World!';\n}"
      />
    )
}

export default App

Controlled Editor

Editor with controlled value showing code output.

import { CodeEditor } from 'asterui/codeeditor'
import { useState } from 'react'

function App() {
  const [code, setCode] = useState('const greeting = "Hello";\nconsole.log(greeting);')
  
  return (
      <Space direction="vertical" size="md" block>
        <CodeEditor
          language="javascript"
          value={code}
          onChange={setCode}
        />
        <Card size="sm" className="bg-base-200">
          <p className="text-sm font-medium mb-2">Current Code:</p>
          <pre className="text-xs whitespace-pre-wrap">{code}</pre>
        </Card>
      </Space>
    )
}

export default App

Multiple Languages

Switch between different programming languages.

import { CodeEditor } from 'asterui/codeeditor'
import { useState } from 'react'

function App() {
  const [language, setLanguage] = useState<'javascript' | 'typescript' | 'python' | 'html' | 'css' | 'json'>('javascript')
  
  const codeExamples = {
    javascript: 'function add(a, b) {\n  return a + b;\n}\n\nconsole.log(add(2, 3));',
    typescript: 'interface User {\n  name: string;\n  age: number;\n}\n\nconst user: User = { name: "Alice", age: 30 };',
    python: 'def fibonacci(n: int) -> int:\n    if n <= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n\nprint(fibonacci(10))',
    html: '<!DOCTYPE html>\n<html lang="en">\n<head>\n  <title>Hello</title>\n</head>\n<body>\n  <h1>Hello World</h1>\n</body>\n</html>',
    css: '.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n}',
    json: '{\n  "name": "asterui",\n  "version": "1.0.0",\n  "dependencies": {\n    "react": "^19.0.0"\n  }\n}',
  }
  
  return (
      <Space direction="vertical" size="md" block>
        <Select
          value={language}
          onChange={(e) => setLanguage(e.target.value as typeof language)}
          options={[
            { value: 'javascript', label: 'JavaScript' },
            { value: 'typescript', label: 'TypeScript' },
            { value: 'python', label: 'Python' },
            { value: 'html', label: 'HTML' },
            { value: 'css', label: 'CSS' },
            { value: 'json', label: 'JSON' },
          ]}
        />
        <CodeEditor
          language={language}
          value={codeExamples[language]}
          minHeight={200}
        />
      </Space>
    )
}

export default App

No Line Numbers

Editor without line number gutter.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <CodeEditor
        language="javascript"
        lineNumbers={false}
        value="// Simple code without line numbers\nconst x = 42;"
        minHeight={100}
      />
    )
}

export default App

Read-Only Mode

Display code without allowing edits.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <CodeEditor
        language="typescript"
        readOnly
        value="// This code is read-only\nexport interface Config {\n  apiKey: string;\n  endpoint: string;\n  timeout?: number;\n}"
      />
    )
}

export default App

Sizes

Different text size variants.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <Space direction="vertical" size="md" block>
        <div>
          <p className="text-sm mb-1">Small</p>
          <CodeEditor
            size="sm"
            language="javascript"
            value="const small = 'sm';"
            minHeight={60}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Medium (default)</p>
          <CodeEditor
            size="md"
            language="javascript"
            value="const medium = 'md';"
            minHeight={60}
          />
        </div>
        <div>
          <p className="text-sm mb-1">Large</p>
          <CodeEditor
            size="lg"
            language="javascript"
            value="const large = 'lg';"
            minHeight={60}
          />
        </div>
      </Space>
    )
}

export default App

Max Height with Scrolling

Editor with fixed max height that scrolls.

Borderless

Editor without border, useful inside cards.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <Card>
        <CodeEditor
          bordered={false}
          language="python"
          value="# Borderless editor inside a card\nprint('Hello from Python!')"
          minHeight={100}
        />
      </Card>
    )
}

export default App

Minimal Editor

Editor with minimal features enabled.

import { CodeEditor } from 'asterui/codeeditor'

function App() {
  return (
      <CodeEditor
        language="javascript"
        lineNumbers={false}
        foldGutter={false}
        highlightActiveLine={false}
        autocompletion={false}
        value="// Minimal editor\nconst simple = true;"
        minHeight={80}
      />
    )
}

export default App

Editor Instance Access

Access the CodeMirror view instance for advanced features.

import { CodeEditor, type CodeEditorLanguage } from 'asterui/codeeditor'
import { useState } from 'react'

function App() {
  const [lineCount, setLineCount] = useState(0)
  
  return (
      <Space direction="vertical" size="sm" block>
        <CodeEditor
          language="javascript"
          value="// Type here to see line count update\nfunction example() {\n  return 42;\n}"
          onEditorReady={(view) => {
            setLineCount(view.state.doc.lines)
            view.dispatch({}) // trigger initial update
          }}
          onChange={(value) => {
            setLineCount(value.split('\n').length)
          }}
        />
        <p className="text-sm text-base-content/60">Lines: {lineCount}</p>
      </Space>
    )
}

export default App

API

`CodeEditor`

Property	Description	Type	Default
`value`	Code content (controlled)	`string`	`''`
`onChange`	Callback when content changes	`(value: string) => void`	-
`language`	Programming language for syntax highlighting	`CodeEditorLanguage`	`'plaintext'`
`placeholder`	Placeholder text when empty	`string`	-
`readOnly`	Make editor read-only	`boolean`	`false`
`autoFocus`	Auto focus on mount	`boolean`	`false`
`lineNumbers`	Show line numbers	`boolean`	`true`
`foldGutter`	Enable code folding	`boolean`	`true`
`highlightActiveLine`	Highlight active line	`boolean`	`true`
`bracketMatching`	Enable bracket matching	`boolean`	`true`
`closeBrackets`	Enable auto-closing brackets	`boolean`	`true`
`autocompletion`	Enable autocompletion	`boolean`	`true`
`indentWithTab`	Allow tab key for indentation	`boolean`	`true`
`minHeight`	Minimum height of editor	`string \| number`	`200`
`maxHeight`	Maximum height (enables scrolling)	`string \| number`	-
`size`	Text size variant	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`bordered`	Show border around editor	`boolean`	`true`
`extensions`	Additional CodeMirror extensions	`Extension[]`	`[]`
`onEditorReady`	Callback with CodeMirror view instance	`(view: EditorView) => void`	-

`CodeEditorLanguage`

Value	Description
`javascript`	JavaScript
`typescript`	TypeScript
`jsx`	JavaScript with JSX
`tsx`	TypeScript with JSX
`python`	Python
`html`	HTML
`css`	CSS
`json`	JSON
`markdown`	Markdown
`sql`	SQL
`xml`	XML
`plaintext`	Plain text (no highlighting)