Component

Code Editor

A code editor with syntax highlighting and editing support. Uses the headless @refraction-ui/code-editor core.

Examples

Editable code with syntax highlighting.

JavaScript

Installation

$pnpm add @refraction-ui/react-code-editor

Usage

tsx

import { CodeEditor } from '@refraction-ui/react-code-editor'
export function MyComponent() {
  const [code, setCode] = useState('const x = 1')
  return <CodeEditor value={code} onChange={setCode} language="javascript" />
}

Props

Prop	Type	Default	Description
`value`	`string`	--	Code content.
`onChange`	`(value: string) => void`	--	Callback when code changes.
`language`	`string`	--	Syntax highlighting language.
`className`	`string`	--	Additional CSS classes.