CodeEditor

Syntax-highlighted code editor (CodeMirror) with language modes, themes, and line numbers.

CodeEditor is a CodeMirror-based editor with syntax highlighting. It is controlled by value/onChange. Set language ('javascript', 'typescript', 'python', 'css', 'html', 'json', or 'markdown') for the right highlighting, and theme ('light', 'dark', or 'auto' to follow the app theme). Control the viewport with height/minHeight, toggle lineNumbers, and set readOnly for display-only snippets.

Example

Preview

import { CodeEditor } from '@officina/ui';
import { useState } from 'react';

function SnippetEditor() {
  const [value, setValue] = useState('const greet = (name) => `Hi, ${name}`;\n');
  return (
    <CodeEditor
      value={value}
      onChange={setValue}
      language="typescript"
      theme="auto"
      height="180px"
    />
  );
}

API

Prop	Type	Default	Description
value*	string	—	Current editor contents.
height	string	300px	Fixed height (CSS length).
language	enum	javascript	Language for syntax highlighting.
lineNumbers	boolean	true	Show the line-number gutter.
minHeight	string	—	Minimum height when auto-growing.
onChange	(value: string) => void	—	Called with the new contents on edit.
placeholder	string	—	Placeholder shown when empty.
readOnly	boolean	false	Render read-only (no editing).
theme	enum	auto	Colour theme; `auto` follows the app theme.

Example

API

On this page