https://github.com/peterbenoit/markdown-editor
Browser-based Markdown editor with real-time preview, syntax highlighting, YAML frontmatter support and much more. Built with React + Vite.
https://github.com/peterbenoit/markdown-editor
editor javascript markdown markdown-editor react real-time-preview syntax-highlighting vite
Last synced: 12 days ago
JSON representation
Browser-based Markdown editor with real-time preview, syntax highlighting, YAML frontmatter support and much more. Built with React + Vite.
- Host: GitHub
- URL: https://github.com/peterbenoit/markdown-editor
- Owner: peterbenoit
- Created: 2024-09-01T20:57:39.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2026-06-05T13:21:26.000Z (19 days ago)
- Last Synced: 2026-06-05T15:13:07.957Z (19 days ago)
- Topics: editor, javascript, markdown, markdown-editor, react, real-time-preview, syntax-highlighting, vite
- Language: JavaScript
- Homepage: https://md-fun.vercel.app/
- Size: 1.97 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Markdown Editor
A browser-based Markdown editor with real-time preview, syntax highlighting, and light/dark mode. Built with React and Vite.
## Features
- Real-time Markdown preview
- Light and dark mode toggle
- Text formatting toolbar (bold, italic, headers, links, code)
- Syntax highlighting via `highlight.js`
- Save content to a `.md` file or load an existing one
## Getting Started
### Prerequisites
- [Node.js](https://nodejs.org/) (v18 or later recommended)
- `npm`
### Installation
```bash
git clone https://github.com/peterbenoit/markdown-editor.git
cd markdown-editor
npm install
```
### Development
```bash
npm run dev
```
Opens at [http://localhost:5173](http://localhost:5173).
### Production Build
```bash
npm run build
```
Output goes to `dist/`.
## Usage
- Type Markdown in the left pane. The right pane renders it live.
- Select text, then use the toolbar buttons to apply formatting.
- Use the theme toggle to switch between light and dark mode.
- Save your content to a file or load an existing Markdown file using the toolbar controls.
## Customization
- Styles: `src/index.css`
- Syntax highlight theme: swap the `highlight.js` CSS import in `App.jsx`
## Contributing
Fork the repo and open a pull request. For significant changes, open an issue first.
## License
MIT