Code Editor
Edit source with syntax highlighting, line numbers, search and selection.
use blinc_core::reactive::Signal;
use blinc_layout::prelude::*;
pub fn code_editor_demo(name: Signal<String>, code: blinc_layout::widgets::code::SharedCodeEditorState) -> Div {
div()
.class("demo-wide")
.child(
code_editor(&code)
.syntax(SyntaxConfig::new(RustHighlighter::new()))
.line_numbers(true)
.font_size(13.0)
.search_enabled(true)
.on_change(move |text| name.set(text.to_string()))
.w_full()
.h(216.0),
)
.child(text("Edit Rust · ⌘/Ctrl F to find").class("demo-caption"))
}
@layer components {
.blinc-code {
background: var(--surface);
color: var(--text-primary);
}
.blinc-code-line-number,
.blinc-code-fold,
.blinc-code-fold-hint {
color: var(--text-tertiary);
}
.blinc-code-active-line {
background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.blinc-code-selection {
background: var(--selection);
}
.blinc-code-guide {
background: color-mix(in srgb, var(--border) 55%, transparent);
}
.blinc-code-bracket {
background: color-mix(in srgb, var(--primary) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 65%, transparent);
}
.blinc-code-find-match {
background: color-mix(in srgb, var(--warning) 25%, transparent);
border: 1px solid var(--warning);
}
.blinc-code-find-match[data-active] {
background: color-mix(in srgb, var(--warning) 50%, transparent);
}
.blinc-code-minimap {
border-left: 1px solid var(--border);
}
.blinc-code-minimap-slider {
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.blinc-code-minimap-line {
background: color-mix(in srgb, var(--text-primary) 40%, transparent);
}
.blinc-find {
background: var(--surface-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.blinc-find-row {
gap: 6px;
}
.blinc-find-input {
height: 28px;
background: var(--surface-overlay);
border-width: 1px;
border-color: var(--border-secondary);
border-radius: var(--radius-md);
color: var(--text-primary);
}
.blinc-find-input:hover {
border-color: var(--text-secondary);
}
.blinc-find-input:focus {
background: var(--surface-overlay);
border-color: var(--border-focus);
}
.blinc-find-button {
border-radius: var(--radius-md);
transition: background 120ms ease;
}
.blinc-find-button:hover {
background: var(--border);
}
.blinc-find-button:active {
background: var(--border-hover);
}
.blinc-find-toggle {
border-radius: var(--radius-sm);
color: var(--text-secondary);
transition: background 120ms ease;
}
.blinc-find-toggle:hover {
background: var(--border);
color: var(--text-primary);
}
.blinc-find-toggle--on,
.blinc-find-toggle--on:hover {
background: var(--accent-subtle);
color: var(--accent);
}
.blinc-find-count {
color: var(--text-secondary);
padding: 0 6px;
}
.blinc-find-count--none {
color: var(--error);
}
}
Usage and properties
Edit source with syntax highlighting, line numbers, search and selection. This built-in widget is provided by blinc_layout; the polished action controls in the example use blinc_cn.
Use the installation guide to create a Blinc application. This widget is available from blinc_layout; the demo uses the same Hybrid theme as the component library. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
document | SharedCodeEditorState | Shared document | values.code |
syntax | SyntaxConfig | Construction | RustHighlighter |
line_numbers / search_enabled | bool | Construction | true |
Keyboard and interaction
Click to focus. Type and select text; arrow keys navigate, Enter inserts a line, Tab indents, and Cmd/Ctrl+F opens search. Standard selection, clipboard and undo shortcuts apply.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.blinc-code.blinc-code-line-number.blinc-code-fold.blinc-code-gutter.blinc-code-minimap.blinc-code-minimap-slider.blinc-code-minimap-line.blinc-code-guide.blinc-code-active-line.blinc-code-selection.blinc-code-bracket.blinc-code-find-match.blinc-code-fold-hint
Theme and component variables: --blinc-code-caret, --accent.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
Full editor with Stateful incremental updates:
let state = code_editor_state("let x = 42;");
code_editor(&state)
.syntax(SyntaxConfig::new(RustHighlighter::new()))
.line_numbers(true)
.font_size(13.0)
.on_change(|new_content| {
println!("Content: {}", new_content);
})
.w_full()
.h(400.0)
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.