Code Editor

A premium code editor component powered by Monaco Editor with syntax highlighting, language selection, and customizable action buttons.

@chatcn/code-editor

Installation

pnpm dlx shadcn@latest add https://chatcn.me/c/code-editor

Props

CodeEditor

Prop	Type	Default	Description
`value`	`string`	`""`	Initial code value
`onValueChange`	`(value: string) => void`	-	Callback when value changes
`language`	`string`	`"python"`	Programming language
`onLanguageChange`	`(language: string) => void`	-	Callback when language changes
`languages`	`Language[]`	`DEFAULT_LANGUAGES`	Custom languages array
`theme`	`string`	`"vs-dark"`	Monaco editor theme
`disabled`	`boolean`	`false`	Disable the editor
`children`	`React.ReactNode`	-	Header, Area, Footer components
`className`	`string`	-	Additional CSS classes

CodeEditorHeader

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Action buttons
`className`	`string`	-	Additional CSS classes
`showLanguageSelector`	`boolean`	`true`	Show/hide language dropdown

CodeEditorActions

Container for action buttons. Accepts standard div props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	CodeEditorAction components
`className`	`string`	-	Additional CSS classes

CodeEditorAction

Wrapper for individual action buttons with tooltip and micro-interactions.

Prop	Type	Default	Description
`tooltip`	`React.ReactNode`	-	Tooltip content
`children`	`React.ReactNode`	-	Button element
`animate`	`boolean`	`true`	Enable hover/tap animations
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Tooltip position
`className`	`string`	-	Additional CSS classes

CodeEditorArea

Prop	Type	Default	Description
`loader`	`React.ReactNode`	-	Custom loading component
`className`	`string`	-	Additional CSS classes
`height`	`string \| number`	`"400px"`	Editor height
`width`	`string \| number`	`"100%"`	Editor width

CodeEditorFooter

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Custom content
`className`	`string`	-	Additional CSS classes
`showStatus`	`boolean`	`true`	Show status indicator
`showLanguage`	`boolean`	`true`	Show language name with icon
`showLineNumber`	`boolean`	`true`	Show cursor line/column
`showCharCount`	`boolean`	`true`	Show character count
`statusText`	`string`	`"Ready"`	Status indicator text

CodeEditorDivider

Visual separator between action buttons. No props.

Hooks

useCodeEditor

Access editor state and actions from within CodeEditor children.

const { value, setValue, language, setLanguage } = useCodeEditor()

Property	Type	Description
`value`	`string`	Current code value
`setValue`	`(v: string) => void`	Update code value
`language`	`string`	Current language
`setLanguage`	`(l: string) => void`	Change language
`languages`	`Language[]`	Available languages
`cursorLine`	`number`	Current cursor line
`cursorColumn`	`number`	Current cursor column
`disabled`	`boolean`	Editor disabled state

Animation Constants

Exported animation objects for customization:

import { ACTION_ANIMATION, SPINNER_ANIMATION, PULSE_ANIMATION } from "@/components/chatcn/ai/code-editor"

Constant	Description
`ACTION_ANIMATION`	Hover/tap scale effect for buttons
`SPINNER_ANIMATION`	Loading spinner rotation
`PULSE_ANIMATION`	Status indicator pulse

Custom Languages

Pass your own languages array via the languages prop:

const MY_LANGUAGES: Language[] = [
  { value: "python", label: "Python", icon: "https://..." },
  { value: "rust", label: "Rust" }, // icon is optional
]
 
<CodeEditor languages={MY_LANGUAGES}>

Search Documentation