Skip to main content
TextEditor(props: { text: string; setText: (text: string) => void }): Component;
text
string
required
The current text content displayed in the editor.
setText
(text: string) => void
required
Callback invoked when the user edits the text. Use this to update your state.

Support

Usage

Basic text editor

const body = () => {
    const [text, setText] = useState("")
    return TextEditor({ text, setText })
}

With frame and border

const body = () => {
    const [notes, setNotes] = useState("")
    return TextEditor({ text: notes, setText: setNotes })
        .frame({ minHeight: 200 })
        .padding(8)
        .border(Color("gray"), 1)
        .cornerRadius(8)
}

In a form layout

const body = () => {
    const [title, setTitle] = useState("")
    const [body, setBody] = useState("")
    return VStack({ spacing: 16 }, [
        TextField({ placeholder: "Title", text: title, setText: setTitle }),
        TextEditor({ text: body, setText: setBody })
            .frame({ minHeight: 300 }),
        Button("Submit", () => {})
    ])
        .padding(16)
}

See Also