Markdown Editor Widget

MarkdownEditor darkMarkdownEditor color darkMarkdownEditor dark previewMarkdownEditor dimMarkdownEditor light

The Markdown Editor widget gives you a full-featured Markdown writing environment right on your dashboard. Write in Markdown syntax and switch to a live preview that you can also edit directly.

#How to Use

Type or paste Markdown into the text area. Use the toolbar to switch between Markdown and Preview modes.

#Markdown Mode

Write using standard Markdown syntax - headings, bold, italic, lists, code blocks, tables, task lists, and more. The text area uses a monospace font for easy editing.

#Preview Mode

Switch to Preview to see your Markdown rendered as formatted text. The preview is fully editable - you can click into it and make changes directly using a rich text editor. Your edits are converted back to Markdown automatically.

#Expanded View

Click the expand button to open a full-screen editor with a side-by-side layout. The left panel shows the Markdown source and the right panel shows the live preview. Changes in either panel update the other in real time. Press Escape to close.

#Toolbar Actions

  • Markdown / Preview - toggle between raw Markdown editing and the rendered preview.
  • Copy - copies the content to your clipboard. In Markdown mode, copies the raw Markdown. In Preview mode, copies rich text (formatted text you can paste into emails or documents).
  • Export - save your content as a file. Choose from four formats:
    • PDF - export as a PDF document
    • HTML - export as a standalone HTML file
    • Markdown (.md) - export as a Markdown file
    • Text (.txt) - export as plain text
  • Clear - remove all content from the editor.
  • Expand - open the full-screen side-by-side editor (desktop only).

#Tips

  • Use Preview mode's rich text copy to paste formatted content directly into emails or documents.
  • The expanded view is great for longer writing - you get a full-screen editor with live preview side by side.
  • Your content is auto-saved as you type, so you won't lose your work.
  • The file name for exports is taken from the first heading in your document.