CodeViewer
Read-only code viewer with syntax highlighting, line numbers, and copy functionality
CodeViewer
Read-only code block with syntax highlighting, themes, word wrap, line numbers and copy support. Ideal for documentation and examples.
Basic usage
Use value and language to render syntax-highlighted code. Enable copy and status for an integrated toolbar and footer.
This example uses CodeViewer with copy and status enabled for a toolbar and status bar.
Variants
Just like other Saha UI components, CodeViewer supports variants for different backgrounds and borders.
Sizes
Use height utilities and the size prop to adapt the viewer to inline snippets or larger blocks.
Themes
CodeViewer supports multiple built-in themes. Use the same theme tokens as CodeEditor for a consistent look.
Copy, wrap & status
Combine features to match different documentation layouts.
Copy + status
Word wrap only
Minimal (no chrome)
Usage Guidelines
When to Use
- Documentation code examples
- Read-only snippets
- API responses
Accessibility
- Announced as code block
- Copy action accessible
Performance
- Static syntax highlighting
- Memoized output
Common Mistakes
- Missing copy button
- Horizontal scroll on mobile
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