markdown-editor
Side-by-side markdown editor with live preview. Composes a textarea with markdown-viewer.
Overview
A split-pane markdown editor that pairs a <textarea> with a <markdown-viewer> for live preview. Part of the Extras Pack.
Progressive enhancement: without JavaScript the <textarea> is fully usable. The preview pane appears only after the component upgrades.
Usage
Basic
Wrap a <textarea> with initial content. The editor adopts it and builds the preview pane.
<markdown-editor name="content" placeholder="Write markdown here..."> <textarea># Hello world Start editing to see a live preview. </textarea></markdown-editor>With Syntax Highlighting
Add the highlight attribute to pass through to the preview viewer. Bring your own highlighter via the markdown-viewer:highlight event.
<markdown-editor highlight data-tab-indent> <textarea>```javascriptconsole.log('hello');``` </textarea></markdown-editor>Form Integration
The name attribute is reflected to the internal textarea, so it works as a standard form field.
<form> <markdown-editor name="body" rows="8" placeholder="Write your message..."> <textarea></textarea> </markdown-editor> <button type="submit">Submit</button></form>Tab Indentation
Add data-tab-indent to make the Tab key insert two spaces instead of moving focus.
<markdown-editor data-tab-indent> <textarea></textarea></markdown-editor>Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
name | string | — | Form field name reflected to the textarea |
placeholder | string | — | Textarea placeholder text |
rows | string | 10 | Textarea rows |
highlight | boolean | — | Pass highlight attribute to the preview viewer |
data-tab-indent | boolean | — | Tab key inserts spaces instead of moving focus |
data-theme | string | — | Theme propagated to the preview pane |
Events
| Event | Detail | Description |
|---|---|---|
markdown-editor:input | { value } | Fired on each keystroke |
markdown-editor:change | { value } | Fired on blur after content changed |
JavaScript API
| Property | Type | Description |
|---|---|---|
.value | string | Get or set the current markdown content. Setting updates the preview. |
.textarea | HTMLTextAreaElement | Reference to the internal textarea element for direct access. |
Progressive Enhancement
Before the component upgrades, the <textarea> renders at full width with monospace styling. After upgrade, the split layout appears with the live preview pane. Content is never lost.