Crate dioxus_code_editor 

dioxus-code-editor

Syntax-highlighted code editor component for Dioxus.

---

A controlled, syntax-highlighted code editor for Dioxus. Pairs an editable input layer with the dioxus-code highlighter so user edits stay in sync with rendered tokens.

Quick start

[dependencies]
dioxus-code-editor = "0.1.0"

use dioxus::prelude::*;
use dioxus_code::Theme;
use dioxus_code_editor::{CodeEditor, Language};

#[component]
fn Editor() -> Element {
    let mut source = use_signal(String::new);

    rsx! {
        CodeEditor {
            value: source(),
            language: Language::Rust,
            theme: Theme::TOKYO_NIGHT,
            oninput: move |value| source.set(value),
        }
    }
}

The component is controlled — drive CodeEditorProps::value from your own signal and update it inside CodeEditorProps::oninput.

Props

prop	description
CodeEditorProps::value	Current editor contents.
CodeEditorProps::language	Syntax grammar selection. Pass a Language variant (for example Language::Rust) or use Language::from_slug for runtime slugs.
CodeEditorProps::theme	Syntax theme selection shared with dioxus-code; accepts Theme or CodeTheme.
CodeEditorProps::line_numbers	Show a one-based line gutter. Defaults to true.
CodeEditorProps::read_only	Disable editing while preserving highlighting.
CodeEditorProps::spellcheck	Forward spellcheck to the input layer.
CodeEditorProps::aria_label	Accessible label for the editor textbox.
CodeEditorProps::placeholder	Shown only while CodeEditorProps::value is empty.
CodeEditorProps::class	Extra class names appended to the editor root.
CodeEditorProps::oninput	Called with the full editor text after each input event.

License

MIT.

Structs

CodeEditorProps

Props for CodeEditor.

Enums

Language

Tree-sitter grammar identifier.

Constants

CODE_EDITOR_CSS

Base stylesheet injected by CodeEditor.

Functions

CodeEditor

Editable syntax-highlighted code surface.