Architecture

​

Technology stack

• React 19: Latest version of React for building the user interface
• Vite: Next-generation frontend build tool for fast development and optimized builds
• react-markdown: Renders markdown content to React components
• remark-gfm: Adds support for GitHub Flavored Markdown (tables, strikethrough, task lists)
• Mermaid: Renders diagrams and flowcharts from markdown code blocks
• lucide-react: Beautiful, consistent icon library
• ESLint: Code quality and consistency checks

​

Project structure

src/
├── components/
│   ├── MarkdownRenderer.jsx  # Markdown rendering with syntax highlighting
│   ├── Mermaid.jsx           # Mermaid diagram component
│   ├── Sidebar.jsx           # File list sidebar
│   └── Toolbar.jsx           # Top toolbar with controls
├── assets/                   # Static assets
├── App.jsx                   # Main application component
├── App.css                   # Application-specific styles
├── index.css                 # Global styles and CSS custom properties
└── main.jsx                  # Application entry point

​

Component breakdown

• App.jsx: Main application component that orchestrates the entire UI, manages state, and handles file operations
• Sidebar.jsx: Displays the list of open files and provides file management controls
• Toolbar.jsx: Contains the sidebar toggle, file title, and font size controls
• MarkdownRenderer.jsx: Renders markdown content using react-markdown with custom components
• Mermaid.jsx: Handles Mermaid diagram rendering with proper initialization

​

State management

• useState: For component-level state (sidebar open/closed, active file, font size, etc.)
• useCallback: For memoized event handlers to optimize performance
• useEffect: For side effects like loading and persisting data

​

Local storage persistence

// Files are saved automatically on change
localStorage.setItem('md-viewer-files', JSON.stringify(files));
localStorage.setItem('md-viewer-active-id', activeFileId);

​

Styling approach

​

CSS custom properties

• Theme colors (background, surface, accent)
• Typography scale
• Spacing system
• Border radius values

​

Glassmorphism design

• Semi-transparent backgrounds with backdrop blur
• Subtle borders and shadows
• Smooth transitions and animations

​

System fonts

• -apple-system for macOS
• Fallbacks for other platforms
• Separate font stacks for UI and markdown content

​

Component architecture

​

Unidirectional data flow

<Sidebar 
  isOpen={isOpen} 
  files={files} 
  activeFileId={activeFileId} 
  onSelectFile={setActiveFileId}
  onNewFile={handleNewFile}
  onRemoveFile={handleRemoveFile}
  onFileUpload={loadFile}
/>

​

Event handlers

​

File handling

1. File upload: Click the upload button in the sidebar
2. Drag and drop: Drag markdown files anywhere in the window
3. Create new: Generate a new untitled document

const reader = new FileReader();
reader.onload = (e) => {
  const content = e.target.result;
  // Add to files array
};
reader.readAsText(fileObj);

​

Performance optimizations

• React 19: Benefits from automatic optimizations in the latest React version
• Memoized callbacks: Uses useCallback for event handlers to prevent unnecessary re-renders
• Vite: Extremely fast HMR during development and optimized production builds
• Auto-hiding toolbar: Hides on scroll down for a distraction-free reading experience

​

Build configuration

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})