/markdown-editor

Primary LanguageJavaScriptMIT LicenseMIT

Real-time Markdown Editor

Overview

Experience the power of our real-time Markdown editor, meticulously crafted with Node.js and React, and polished with Bootstrap for a sophisticated user interface.

Key Features

  • Live Markdown Editing: See your Markdown changes reflected instantly in the live preview.
  • Versatile Viewing Modes: Switch effortlessly between raw Markdown and rendered HTML views.
  • Robust Backend Integration: Utilizes Node.js for seamless Markdown to HTML conversion.
  • Error Handling Excellence: Enhanced user experience with robust error handling via react-error-boundary.
  • Modern UI Design: Delightful and intuitive interface design using Bootstrap.
  • State-of-the-art State Management: Powered by Redux Toolkit and RTK Query for efficient state management.
  • Enhanced User Experience: Smooth loading animations using react-loading-skeleton.
  • Secure HTML Rendering: Ensures safe HTML output with dompurify.

Setup

Backend
  1. Navigate to the backend directory.
  2. Install dependencies: npm install
  3. Start the server: npm start
  4. Launch the development server: npm run dev (Default port: 5500)
Frontend
  1. Navigate to the frontend directory.
  2. Install dependencies: npm install
  3. Start the React application: npm start (Default port: 4000)

Usage

  1. Access the editor at http://localhost:4000 in your preferred web browser.
  2. Begin typing Markdown syntax to witness real-time HTML preview updates.
  3. Easily toggle between raw Markdown and formatted HTML views using intuitive controls.

Contribution Opportunities

Contributions via pull requests and issue reports are warmly welcomed.

Licensing

Licensed under the MIT License for maximum flexibility and usability.