CodeEditor
Monaco-based code editor with syntax highlighting, language detection, theme sync, and IntelliSense integration
CodeEditor
A fully featured code editor component with themes, variants, sizes, toolbar placement and status bar support, designed for Saha UI docs and playgrounds.
Global theme
The selected theme is applied to most examples below.
Basic usage
Use defaultValue for uncontrolled editing, or value with onChange for a controlled editor.
This example uses defaultValue with a tsx language and a visible toolbar.
Use this pattern for playgrounds, docs, and live examples where users can experiment with the code.
Variants
CodeEditor supports the same variant system as other Saha UI components. Use variants to blend the editor into your layout.
Sizes
Use the size prop to adjust spacing and font-size for inline snippets or full playgrounds.
Toolbar placement
Choose between an inline toolbar (always visible) or a floating compact toolbar that overlays the editor.
The toolbar is rendered inside the editor at the top.
The toolbar is overlaid in the corner with blur and shadow.
Themes
Switch between built-in themes. Combine theme with variant and size to match your application look.
Usage Guidelines
When to Use
- Code playgrounds
- Configuration editors
- Live coding
Accessibility
- Monaco accessibility features
- Keyboard navigation in editor
Performance
- Monaco lazy loading
- Web worker syntax highlighting
Common Mistakes
- Not setting initial language
- Too small height for content
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support