Markdown-backed rich text surface with optional static and floating format toolbars.
Also known as: markdown editor, rich text, contenteditable
Install with the CLI, or copy the component source into your project.
Add editor (npm)
1npx --yes -p @default-file/ui df-ui add editor
Markdown-backed surface with a static format bar and a floating bar on selection. Edits serialize back to Markdown.
Select text to format. Try bold, italic, and lists.
toolbar static pins a format bar above the surface and hides the selection toolbar.
Select text to format. Try bold, italic, and lists.
toolbar floating hides the pinned bar. Select text to open the selection toolbar.
Select text to format. Try bold, italic, and lists.
readOnly blocks edits and disables interactive toolbar controls.
Select text to format. Try bold, italic, and lists.
Empty-state hint when the document has no content.
Write a short note
minHeight sets --df-editor-min-height for this instance.
Select text to format. Try bold, italic, and lists.
toolbar none hides kit format chrome.
Select text to format. Try bold, italic, and lists.
Markdown-backed rich text surface with optional static and floating format toolbars.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Controlled Markdown document (required). |
| onChange | (markdown: string) => void | - | Called with serialized Markdown after edits settle. |
| placeholder | string | - | Empty-state hint. Defaults to the kit string catalogue. |
| readOnly | boolean | false | Blocks edits and hides interactive toolbar controls. |
| minHeight | string | - | CSS length applied to --df-editor-min-height for this instance. |
| toolbar | "static" | "floating" | "both" | "none" | "both" | static pins a format bar above the surface. floating shows a selection toolbar. both enables both. none hides kit chrome. |
| autoFocus | boolean | false | Focus the editable surface on mount. |
| aria-label | string | - | Accessible name for the editable surface. Defaults to the kit string catalogue. Override when the host already names the field with a visible Label. |
| className | string | - | Additional styles on the root. |
Editable name: The contenteditable surface uses aria-label (catalogue default, or your override). Format toolbars use catalogue labels for icon-only controls. Prefer a visible Label with htmlFor only when you wrap a separate form control; this surface is not a native input.