Skip to content

Markdown editor

Honest scope: MarkdownEditor subclasses Textarea and only renames CSS classes to or-field-MarkdownEditor and or-textarea or-editor or-editor-markdown. There is no markdown toolbar, split preview, or parser in Python. Use it when you want semantic markdown chrome and the same .rows(), .autosize(), and .cols() helpers as textarea, then wire preview in panel assets if needed.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Drop-in multiline field labeled for markdown content. Dehydrates the raw markdown string like a textarea.

app/orbit/resources/example_resource.py
MarkdownEditor.make('readme')
.label('README')
.rows(10)
.helper_text('GitHub-flavored markdown.')

Orbit Basic markdown editor (light)

Orbit Basic markdown editor (dark)

.autosize() adds data-autosize="true" for client growth. .cols() sets the HTML cols attribute when you want a fixed character width hint.

app/orbit/resources/example_resource.py
MarkdownEditor.make('changelog')
.label('Changelog')
.autosize()
.cols(80)

Orbit Autosize and columns (light)

Orbit Autosize and columns (dark)

Shared Field validation applies — .required(), .min_length(), and custom .rules() work the same as Textarea.

app/orbit/resources/example_resource.py
MarkdownEditor.make('release_notes')
.label('Release notes')
.required()
.min_length(20)

Orbit Required markdown (light)

Orbit Required markdown (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.