All projects
frontendBeginner

Live Markdown Editor

Side-by-side Markdown editor with preview, syntax highlighting, and PDF export.

ReactCodeMirrorunifiedTailwind

Key features

  • Live preview with synced scroll
  • Syntax highlighting in code blocks
  • Auto-save to localStorage
  • Export to PDF/HTML
  • Keyboard shortcuts

Build steps

  1. 1

    Set up CodeMirror for the editor pane

  2. 2

    Render Markdown with unified + remark/rehype

  3. 3

    Implement synced scrolling between panes

  4. 4

    Add export and shortcut handlers