https://github.com/ashwin-s-nambiar/markdown-editor
Markdown Editor - A website in which the user is able to write in markdown.
https://github.com/ashwin-s-nambiar/markdown-editor
css3 firebase firebase-database html5 javascript react react-mde react-split
Last synced: 2 months ago
JSON representation
Markdown Editor - A website in which the user is able to write in markdown.
- Host: GitHub
- URL: https://github.com/ashwin-s-nambiar/markdown-editor
- Owner: Ashwin-S-Nambiar
- Created: 2024-09-23T05:36:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-26T09:24:14.000Z (7 months ago)
- Last Synced: 2025-11-29T08:46:22.809Z (7 months ago)
- Topics: css3, firebase, firebase-database, html5, javascript, react, react-mde, react-split
- Language: JavaScript
- Homepage: https://markdown-editor-gray-six.vercel.app
- Size: 85.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Markdown Editor
A web-based markdown editor with live preview and persistent storage.
[Features](#-features) • [Tech Stack](#-tech-stack) • [Installation](#-installation) • [Contributing](#-contributing) • [Screenshots](#-screenshots) • [Live](#-live) • [Author](#-author)
## Features
- **Live Markdown Preview:** Instantly see the rendered output as you type.
- **Split View Mode:** Edit markdown and view the preview side-by-side.
- **Rich Text Formatting:** Supports common markdown elements (bold, italics, headings, lists, code blocks, etc.).
- **Persistent Storage:** Saves your notes automatically using Firebase, so your work is never lost.
- **User-Friendly UI:** Clean and minimal interface for a distraction-free writing experience.
- **Responsive Design:** Works seamlessly on all devices, from desktops to mobile phones.
## Tech Stack
### Core Technologies
- **[React](https://reactjs.org/)**: A JavaScript library for building user interfaces.
- **[Vite](https://vitejs.dev/)**: A fast development environment for modern web apps.
- **[Firebase](https://firebase.google.com/)**: A platform for building web, mobile, and desktop applications.
### Libraries
- **[React-mde](https://www.npmjs.com/package/react-mde)**: A robust markdown editor component for React.
- **[React-split](https://www.npmjs.com/package/react-split)**: A component for creating split view layouts.
### Other
- **HTML5:** For structuring the web application's content.
- **CSS3:** For styling and layout.
- **JavaScript:** For core logic and interactivity.
## Installation
1. **Clone the Repository:**
```bash
git clone https://github.com/Ashwin-S-Nambiar/Markdown-Editor.git
cd Markdown-Editor
```
2. **Install Dependencies:**
```bash
npm install
```
3. **Start the Development Server:**
```bash
npm run dev
```
**The app will be available at `http://localhost:5173`.**
## Contributing
Contributions are welcome\! If you'd like to enhance the Markdown Editor, follow these steps:
1. **Fork the repository**
2. **Create a new feature branch:**
```bash
git checkout -b feature/your-feature-name
```
3. **Make your changes and commit them:**
```bash
git commit -m "Add some feature"
```
4. **Push to the branch:**
```bash
git push origin feature/your-feature-name
```
5. **Open a Pull Request**
## Screenshots
### Editor Interface
### Split View Mode
### Rendered Markdown Preview
## Live
[](https://markdown-editor-gray-six.vercel.app/)
-----
Made with ❤️ by Ashwin S Nambiar