← Back to ProjectsView Architecture
View Demo
GitHub

Live Markdown Editor#

Project Overview##

The Live Markdown Editor is a web-based, privacy-first markdown editor that provides real-time preview functionality. It operates entirely in the browser without requiring server-side processing, emphasizing local data storage and user privacy.

Core Features and Functionality##

Real-time Markdown Processing###

  • Live Preview: Instant rendering of markdown content as users type
  • Split-pane Interface: Side-by-side editor and preview panels with adjustable sizing
  • Synchronized Scrolling: Optional synchronized scrolling between editor and preview panes
  • Markdown Parsing: Uses the marked.js library (v5.1.1) for markdown-to-HTML conversion
  • Content Sanitization: Implements DOMPurify (v3.0.3) for XSS protection

Editing Tools and Interface###

  • Toolbar: 15+ formatting buttons for common markdown operations
    • Text formatting: Bold, Italic, Inline Code
    • Headers: H1, H2, H3
    • Links and Images insertion
    • Lists: Bulleted and numbered
    • Blockquotes and code blocks
    • Horizontal rules
  • Keyboard Shortcuts:
    • Ctrl/Cmd+B (Bold)
    • Ctrl/Cmd+I (Italic)
    • Ctrl/Cmd+K (Link)
    • Ctrl/Cmd+Z (Undo)
    • Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y (Redo)
    • Tab (Insert spaces)

Data Management###

  • Auto-save: Automatic local storage of content on every change
  • Undo/Redo System: Maintains history stack (up to 50 states)
  • Local Storage Keys:
    • live-markdown-editor-content: Stores markdown content
    • live-markdown-editor-panel-size: Saves panel width ratios
    • live-markdown-editor-sync-scroll: Stores scroll sync preference

Export and Sharing###

  • Clipboard Copy: Copies formatted HTML content with fallback to plain text
  • PDF Export: Generates printable HTML for PDF creation via browser print dialog
  • Content Clearing: Reset functionality to restore default template

Technical Architecture##

Frontend Technologies###

  • HTML5: Semantic markup with proper ARIA roles and accessibility attributes
  • CSS3: Custom styling with modern features (flexbox, transitions, media queries)
  • Vanilla JavaScript: No frameworks, pure DOM manipulation and event handling
  • Web APIs: LocalStorage, Clipboard API, Print API, FileReader (referenced but not implemented)

External Dependencies###

  • marked.js (v5.1.1): Markdown parsing with GFM support and breaks enabled
  • DOMPurify (v3.0.3): HTML sanitization for security
  • CDN Delivery: Both libraries loaded from cdnjs.cloudflare.com

JavaScript Architecture###

  • Event-driven: Uses addEventListener for user interactions
  • State Management: Manual state tracking for undo/redo and UI states
  • Modular Functions: Separate functions for different features (formatting, storage, UI updates)
  • Error Handling: Try-catch blocks around localStorage operations with fallback behaviors

User Interface Components##

Header Section###

  • Logo/Title: "Live Markdown Editor" branding
  • Action Buttons:
    • Clear button (trash icon) with hover effects
    • Sync scroll toggle (copy icon) with active state styling
  • Privacy Notice: Blue-styled notification about local storage
  • GitHub Link: External link to project repository

Editor Panel###

  • Toolbar: Icon-based buttons with hover states and active indicators
  • Text Area: Full-height textarea with:
    • Monospace font (JetBrains Mono, Monaco, Menlo fallbacks)
    • 14px font size, 1.6 line height
    • 24px padding
    • Custom placeholder text with usage instructions

Preview Panel###

  • Header: Title with action buttons (Copy, PDF)
  • Content Area: Styled markdown output with:
    • Professional typography hierarchy
    • Code syntax highlighting preparation
    • Table styling with borders and hover effects
    • Blockquote styling with left border
    • Link and image handling

Resizer Component###

  • Visual Indicators: Drag dots that appear on hover
  • Mouse Interaction: Cursor changes and visual feedback during resize
  • Constraints: Panel widths limited between 20% and 80%

Styling and Design System##

Color Scheme###

  • Primary Blue: #3b82f6 (buttons, active states)
  • Gray Palette: Various shades from #fafafa to #111827
  • Semantic Colors: Green (#10b981) for success, Red (#ef4444) for errors
  • Text Colors: Hierarchical grayscale for readability

Typography###

  • System Fonts: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto
  • Monospace: JetBrains Mono for code and editor
  • Font Sizing: Responsive scaling from 11px to 32px
  • Line Heights: Optimized for readability (1.2 for headers, 1.7 for content)

Layout System###

  • Flexbox: Primary layout method for panels and components
  • Responsive Design: Media query at 768px switching to column layout
  • Overflow Handling: Proper scroll management for editor and preview

Browser Compatibility and Standards##

HTML Standards###

  • DOCTYPE HTML5: Modern document structure
  • Semantic Elements: header, main, div with proper roles
  • Accessibility: ARIA labels, roles, and live regions
  • Meta Tags: Viewport, charset, description, and favicon

CSS Features###

  • Modern Properties: box-sizing, flexbox, transitions, transforms
  • Custom Properties: Inline SVG for icons
  • Responsive Units: Mix of px, %, vh for different use cases
  • Pseudo-classes: :hover, :active, :focus states

JavaScript APIs###

  • DOM Manipulation: Modern selector methods and event handling
  • Storage API: localStorage with error handling
  • Clipboard API: Modern async clipboard with fallback
  • Print API: window.print() integration

Security Considerations##

Content Sanitization###

  • DOMPurify Integration: All markdown-rendered HTML is sanitized
  • XSS Prevention: Prevents malicious script injection
  • Safe HTML: Only allows safe HTML elements and attributes

Data Privacy###

  • No Server Communication: All processing happens client-side
  • Local Storage Only: No external data transmission
  • No Tracking: No analytics or tracking scripts included

Performance Characteristics##

Rendering Performance###

  • Debounced Updates: Preview updates on every input change
  • Efficient DOM Updates: Direct innerHTML replacement
  • Scroll Synchronization: Throttled scroll event handling

Memory Management###

  • Undo Stack Limits: Maximum 50 undo states to prevent memory bloat
  • Event Cleanup: Proper event listener management during resizing
  • Blob URL Cleanup: Proper cleanup of generated URLs for PDF export

Loading Performance###

  • Minimal Dependencies: Only two external libraries
  • CDN Delivery: Fast loading from cloudflare CDN
  • Inline Styles: All CSS included inline for single-file deployment

File Structure and Organization##

Single File Architecture###

  • Self-contained: All HTML, CSS, and JavaScript in one file
  • Inline Styles: Complete CSS in <style> tag
  • Inline Scripts: All JavaScript in <script> tag
  • SVG Icons: Inline SVG for all interface icons

Code Organization###

  • Variable Declarations: Global variables at top of script
  • Function Definitions: Organized by feature area
  • Event Listeners: Grouped at bottom of script
  • Initialization: Application setup and loading logic

This project represents a complete, production-ready markdown editor that prioritizes user privacy, performance, and usability while maintaining a clean, professional interface suitable for various markdown editing tasks.

Architecture Diagram

Drag to pan, scroll to zoom