A beautiful, modern, and themeable Markdown editor built with React, Tailwind CSS, shadcn/ui, and Marked.js. Features live preview, split view, auto-save, keyboard shortcuts, and theme customization.

• Live Markdown Preview: See your Markdown rendered in real time as you type.
• Split, Editor, and Preview Views: Toggle between editing, previewing, or both.
• Auto-Save: Optionally auto-save your work to local storage.
• Download & Upload: Download your Markdown as a .md file or upload an existing one.
• Copy HTML/Markdown: Copy the rendered HTML or raw Markdown to your clipboard.
• Word & Character Count: Live statistics as you write.
• Sample Content: Quickly load a sample Markdown document.
• Theme & Accent Customization: Choose from multiple color themes and accent colors.
• Keyboard Shortcuts:
  • Ctrl+S to download
  • Ctrl+Shift+F to toggle fullscreen
• Responsive & Accessible: Works great on all devices and supports keyboard navigation.

• Node.js (v18+ recommended)
• npm or yarn

1. Clone the repository:

   git clone <your-repo-url>
   cd markdown-parser

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open in your browser: Visit http://localhost:5173 (or the port shown in your terminal).

npm run build
# or
yarn build

The output will be in the dist/ folder.

• App.tsx – Main app entry, renders the Markdown editor.
• MarkdownEditor.tsx – The core editor component with all features.
• components/ – UI components (Button, Card, Input, Textarea, ThemeProvider, ThemeSelector).
• theme.css – Custom theme and accent color variables.
• input.css / output.css – Tailwind CSS setup.
• index.html – Main HTML file.
• vite.config.ts – Vite configuration for development/build.

• Themes: Choose from Light, Dark, Sepia, Nord, and Dracula.
• Accent Colors: Blue, Purple, Orange, Green, Pink.
• Easily extendable: Add more themes or accents in ThemeProvider.tsx and theme.css.

• React
• Tailwind CSS
• shadcn/ui
• Marked.js

MIT