Welcome to Markdown Magic, an interactive, real-time Markdown editor that enables users to write, preview, and download their work as a complete web project. This app supports editing HTML, CSS, and JavaScript with live preview capabilities, as well as a seamless interface for downloading your work as a ZIP file. Whether you're a developer, designer, or hobbyist, Markdown Magic makes it easy to build and share your content.
- Real-Time Editing: Edit HTML, CSS, and JavaScript in real time with instant preview updates.
- Dark/Light Theme Toggle: Easily switch between dark and light themes for a personalized user experience.
- Download Project as ZIP: Download your entire project (HTML, CSS, JS) as a ZIP file with just one click.
- Collapsible Sidebar: Navigate between different sections of the app using the collapsible sidebar for a cleaner workspace.
- Responsive Interface: The app is designed to be fully responsive for both desktop and mobile use.
- Instant Preview: See changes immediately in the preview pane as you edit the code.
- React.js: Frontend framework for building the user interface.
- JSZip: A JavaScript library for creating ZIP files on the client side.
- FileSaver.js: For saving the generated ZIP file locally.
- Prettier: Code formatter to clean up the user’s HTML, CSS, and JavaScript code.
- ShadCN: Component library for building modern, customizable UI components.
- Tailwind CSS: Utility-first CSS framework for building responsive and visually rich designs.
- Vite: Next-generation frontend toolchain for faster builds and optimized development.
To run the app locally, follow these steps:
-
Clone this repository:
git clone https://github.com/yourusername/markdown-magic.git cd markdown-magic -
Install the required dependencies:
npm install
This will install the following dependencies:
reactjszipfile-savertailwindcssshadcnprettier(for code formatting, if implemented)
-
Run the development server:
npm run dev
-
Open your browser and go to
http://localhost:5173to view the project.