📝 Markdown Editor

A local-first markdown editor built with React 19 + TypeScript + Tailwind CSS 4 + Zustand.

Tech Stack

• React 19 + TypeScript
• Tailwind CSS 4 (@tailwindcss/vite)
• Zustand 5 (State management + localStorage persistence)
• marked + highlight.js (Markdown parsing + code highlighting)
• DOMPurify (XSS prevention)
• Lucide React (Icons)
• nanoid (Unique IDs)

Features

• 📁 Folder tree structure for document management
• ⚡ Real-time markdown preview with syntax highlighting
• 🎨 Three view modes — Editor only / Split / Preview only
• 💾 Auto-save — All content preserved in localStorage
• 🌙 Dark theme by default
• 🌍 Multi-language support (English, Korean, Japanese, Chinese)
• ⌨️ Keyboard shortcuts for efficient editing
• 📝 Rich formatting toolbar with markdown helpers

Getting Started

npm install
npm run dev

Build

npm run build
npm run preview

Project Structure

src/
├── components/
│   ├── Editor/        # Textarea editor with line numbers
│   ├── Preview/       # Markdown → HTML preview
│   ├── Sidebar/       # File tree + resizable handle
│   ├── Toolbar/       # Top bar, view mode toggle
│   └── UI/            # Button, Input, Tooltip, etc.
├── hooks/
│   ├── useEditor.ts   # Editor logic
│   └── useKeyboard.ts # Keyboard shortcuts
├── lib/
│   ├── markdown.ts    # marked configuration
│   ├── i18n.ts        # Internationalization
│   ├── utils.ts       # cn, wordCount, etc.
│   └── defaultData.ts # Initial file data
├── store/
│   └── editorStore.ts # Zustand store (file tree management)
├── types/
│   └── index.ts       # TypeScript types
└── styles/
    └── index.css      # Tailwind + preview CSS

Keyboard Shortcuts

Shortcut	Action
⌘/Ctrl + 1	Editor only
⌘/Ctrl + 2	Split view
⌘/Ctrl + 3	Preview only
Tab	Indent (2 spaces)
⌘/Ctrl + B	Bold
⌘/Ctrl + I	Italic

Deployment

This is a static site that can be deployed to any hosting service:

npm run build
# Deploy the dist/ folder to Vercel, Netlify, GitHub Pages, etc.

Recommended Platforms

• Vercel - Zero configuration
• Netlify - Drag & drop deployment
• GitHub Pages - Free hosting for public repos
• Cloudflare Pages - Fast global CDN

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.