dioxus-code-editor 0.1.1

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.