https://github.com/keepserene/in-browser-markdown-editor-fem-react
Challenge: https://www.frontendmentor.io/challenges/inbrowser-markdown-editor-r16TrrQX9
https://github.com/keepserene/in-browser-markdown-editor-fem-react
accessible frontend-mentor-challenge light-dark-theme markdown-editor reactjs responsive-web-design tailwind-css
Last synced: 7 days ago
JSON representation
Challenge: https://www.frontendmentor.io/challenges/inbrowser-markdown-editor-r16TrrQX9
- Host: GitHub
- URL: https://github.com/keepserene/in-browser-markdown-editor-fem-react
- Owner: KeepSerene
- Created: 2025-01-13T22:22:09.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-01-15T22:35:22.000Z (6 months ago)
- Last Synced: 2025-03-13T06:30:53.270Z (4 months ago)
- Topics: accessible, frontend-mentor-challenge, light-dark-theme, markdown-editor, reactjs, responsive-web-design, tailwind-css
- Language: JavaScript
- Homepage: https://mark-view-pro.vercel.app/
- Size: 271 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MarkView Pro
MarkView Pro is a sleek, feature-rich, and responsive Markdown editor designed to enhance your writing experience. With support for live previews, custom themes, and seamless document management, MarkView Pro is perfect for developers, writers, and content creators.
---
## Live Demo
[Play around](https://mark-view-pro.vercel.app/)
## Desktop View
## Features
- **Live Markdown Preview**: Instantly preview your Markdown as you write.
- **Dark Mode Support**: Switch between light and dark themes for optimal comfort.
- **Document Management**: Create, edit, rename, and delete documents with ease.
- **Customizable File Names**: Save your documents with any `.md` extension name.
- **Keyboard Accessible**: Full support for keyboard navigation and shortcuts.
- **Cross-Browser Compatibility**: Works seamlessly on modern browsers.
- **Responsive Design**: Optimized for three breakpoints:
- **Mobile** (< 768px)
- **Tablet** (768px – 1024px)
- **Desktop** (> 1024px)
- **Autosave**: Your documents are automatically saved in local storage.
- **Secure Content**: All data stays in your browser—no external storage or server dependency.
- **Semantic HTML and ARIA**: Built with accessibility in mind, ensuring usability for all users.
---
## Accessibility
MarkView Pro adheres to the following accessibility standards:
- ARIA roles for interactive components.
- Keyboard and screen-reader-friendly controls.
- Color contrast compliant for light and dark themes.
- Clear focus indicators for interactive elements.
---
## Tech Stack
- **Frontend**: React.js (Functional components, Hooks, Context API)
- **Styling**: Tailwind CSS
- **State Management**: React Context API
- **Storage**: LocalStorage for document persistence
- **Markdown Parsing**: Custom Markdown-to-HTML parser
- **Icons**: Heroicons
---
## Installation
1. Clone the repository:
```bash
git clone https://github.com/KeepSerene/in-browser-markdown-editor-fem-react.git
cd markview-pro
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Open the app in your browser at `http://localhost:3000.`
## Usage
- Create a new Markdown document or select an existing one.
- Write your Markdown in the editor pane.
- Preview your content in real-time in the preview pane.
- Save your work or delete unwanted documents.
## Author
_Dhrubajyoti Bhattacharjee_
- [Portfolio](https://math-to-dev.vercel.app/)
## License
This project is licensed under the MIT License.