TechnologiesSwiftUI

TextEditorStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOS✓ renders

The properties of a text editor.

How it works

TextEditorStyleConfiguration carries the information SwiftUI hands to a custom text editor style when it builds the editor's appearance. When you conform a type to TextEditorStyle, your makeBody(configuration:) method receives one of these values and returns the styled view; the configuration stands in for the underlying TextEditor itself, so you decorate it rather than rebuilding it. Reach for it whenever you want to define a reusable text-editing look — borders, backgrounds, padding — that you can apply across an app with a single textEditorStyle(_:) call.

  1. Conform a type to TextEditorStyle

    A custom style is any type conforming to TextEditorStyle. Here BorderedEditorStyle adopts the protocol, which makes it eligible to be passed to the textEditorStyle(_:) modifier and gives it a single requirement to implement.

  2. Receive the configuration in makeBody(configuration:)

    The protocol's lone requirement, makeBody(configuration:), is where styling happens. SwiftUI calls it for each TextEditor that uses the style and passes a Configuration value — the typealias for TextEditorStyleConfiguration — as configuration. Returning some View lets you wrap or layer that value however you like.

  3. Treat configuration as the editor view

    The configuration parameter behaves like the live editor: you apply ordinary view modifiers directly to it. In the example, configuration.background(Color(.systemGray6)) tints the field and .overlay(...) draws a RoundedRectangle border, so the actual editing surface keeps its behavior while gaining your chrome.

  4. Apply the style with textEditorStyle(_:)

    Once a style exists, attach it to a TextEditor with textEditorStyle(_:). The demo writes .textEditorStyle(BorderedEditorStyle()) on the TextEditor(text: $text), at which point SwiftUI constructs a TextEditorStyleConfiguration and routes it through makeBody to produce the rendered editor.

Try it — Change .stroke(Color.accentColor, lineWidth: 2) in makeBody to .stroke(Color.red, lineWidth: 6) and watch every editor using BorderedEditorStyle pick up the thicker red border, since the change flows through the shared configuration.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

TextEditorStyleConfiguration.swift
struct TextEditorStyleConfigurationDemo: View {
    @State private var text = "Type your note here..."

    var body: some View {
        TextEditor(text: $text)
            .textEditorStyle(BorderedEditorStyle())
            .frame(height: 140)
            .padding()
    }
}

struct BorderedEditorStyle: TextEditorStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.background(Color(.systemGray6))
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.accentColor, lineWidth: 2)
            )
    }
}
Live preview
Type your note here...
Type your note here...
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →