📝

Markdown Note Editor

Live preview markdown editing with style

✅ ActiveTry It Live →

Overview

A powerful markdown editor with live preview, syntax highlighting, and local storage. Perfect for taking notes, writing documentation, or drafting content with real-time preview capabilities.

⚡ Real-time

Live preview updates as you type

🎨 Syntax

Beautiful syntax highlighting

💾 Storage

Auto-save with local storage

Key Features

Split View Editor

Side-by-side editing and preview:

  • • Real-time markdown rendering
  • • Synchronized scrolling
  • • Resizable panes
  • • Full-screen modes

Export & Import

Flexible file handling:

  • • Export as HTML or PDF
  • • Import from files
  • • Download markdown files
  • • Copy to clipboard

Markdown Support

Basic Syntax

  • Headers (H1-H6)
  • Bold and Italic text
  • Links and Images
  • Lists and Quotes

Extended Features

  • Code blocks with syntax highlighting
  • Tables with formatting
  • Task lists and checkboxes
  • Strikethrough and highlights

Technical Implementation

Technologies Used

  • • React with TypeScript
  • • Marked.js for parsing
  • • Prism.js for syntax highlighting
  • • Local Storage API

Key Features

  • • Debounced auto-save
  • • Responsive design
  • • Keyboard shortcuts
  • • Theme support