Markdown Maestro

Markdown Maestro

A beautiful, educational, open-source Markdown editor and documentation viewer built with Next.js and Firebase.

Markdown Maestro is a modern, real-time Markdown editor designed for developers, writers, and documentation enthusiasts. It provides a seamless two-pane interface with a powerful editor on one side and a live, rendered preview on the other. Inspired by the simplicity and power of Marked.js, this project aims to deliver a top-tier editing experience with a focus on education, performance, and beautiful design.

✨ Key Features

  • ⚡️ Real-Time Two-Pane Editor: Write Markdown in the left pane and see it rendered live in the right pane.
  • 🎨 Syntax Highlighting: Code blocks are automatically highlighted for enhanced readability, supporting a wide range of languages.
  • 📄 Documentation Viewer: View and navigate project documentation, including this README.md and a CONTRIBUTING.md guide, directly within the app.
  • 🌓 Light & Dark Modes: Switch between light and dark themes for optimal viewing comfort, day or night.
  • 🤖 AI-Powered Summarization: Leverage GenAI to automatically summarize the key features of any Markdown document.
  • 🧩 Extensible by Design: Built with a modular architecture that's easy to understand and extend.
  • 🚀 Built with Modern Tech: Leverages the power of Next.js, React Server Components, Tailwind CSS, and Firebase for a fast, scalable, and modern web experience.

🚀 Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

  • Node.js (v18 or later)
  • npm, yarn, or pnpm

Installation

  1. Clone the repository:
    git clone https://github.com/your-username/markdown-maestro.git
  2. Navigate to the project directory:
    cd markdown-maestro
  3. Install NPM packages:
    npm install
  4. Run the development server:
    npm run dev
  5. Open http://localhost:9002 with your browser to see the result.

Usage

  • Demo Page: The primary feature of Markdown Maestro is the editor located on the "Demo" page. Here you can write and preview your Markdown.
  • Documentation: Explore the "Getting Started", "Features", and "Docs" sections to learn more about Markdown, Marked.js, and the features of this application.
  • View Source Docs: The "📘 Readme" and "🤝 Contribution Guide" sections render the project's own documentation, demonstrating the app's capabilities as a doc viewer.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please refer to the Contribution Guide for detailed instructions on how to get involved.

⚖️ License

Distributed under the MIT License. See LICENSE for more information.

🙏 Acknowledgements