MarkdownMate: Modern, collaborative markdown editing.
MarkdownMate is designed to provide a seamless and efficient markdown editing experience.
- ✍️ Real-time Collaborative Editing: Work with your team simultaneously. See live cursors and presence indicators.
- 💻 Monaco Editor Integration: Enjoy a VSCode-like editing experience with features like intelligent autocomplete and syntax highlighting.
- 📄 GitHub Flavored Markdown (GFM): Full support for GFM, including tables, task lists, and code syntax highlighting.
- 📱 Modern Responsive UI: A clean, professional, and intuitive interface that looks great on all devices.
- 🔒 Secure Document Sharing: Control who can access and edit your documents with granular permissions (future feature).
- 📤 Export Options: Easily export your documents to Markdown. PDF & HTML coming soon!
- ⚡ WebSocket Powered: Ensures instant synchronization of changes across all connected users.
- 🎨 Professional Design: A GitHub-inspired color scheme and typography for a familiar and productive environment.
The MarkdownMate editor: Feature-rich and user-friendly.
MarkdownMate is built with a modern and robust technology stack, leveraging powerful tools like React for a dynamic frontend experience.
Frontend:
Editor & Markdown:
Real-time & Backend:
Database & ORM:
Build, Test & Deployment:
Get MarkdownMate up and running in a few simple steps:
-
Clone the Repository:
git clone https://github.com/hexawulf/MarkdownMate.git cd MarkdownMate -
Install Dependencies:
npm install
-
Set up Environment Variables:
- Create a
.envfile by copying.env.example(if it exists, otherwise create.envfrom scratch). - Fill in your Firebase and database credentials in the
.envfile.
- Create a
-
Run Database Migrations:
npm run db:push # Or the relevant migration command for your setup -
Start the Development Servers:
- Backend server:
npm run dev:server
- Frontend client (in a new terminal):
npm run dev:client
- Backend server:
The application should now be available at http://localhost:5173 (or the port Vite assigns).
For production builds, use npm run build and serve the dist folder.
The project includes a GitHub Actions workflow (.github/workflows/deploy.yml) for automatic deployment to GitHub Pages:
- Ensure your repository is public for GitHub Pages free tier.
- In your repository settings under "Pages":
- Set the source to "GitHub Actions".
- Pushing to the
mainbranch will trigger the deployment.
Note: GitHub Pages is best for static sites. For full backend functionality, use a platform like Vercel or Heroku.
- Sign up or Log in to Vercel.
- Import Your Project:
- Click "Add New..." -> "Project".
- Connect your Git provider and select the
MarkdownMaterepository.
- Configure Your Project:
- Vercel usually auto-detects Vite projects.
- Build Command:
npm run build(orvite build) - Output Directory:
dist - Install Command:
npm install - Set up necessary Environment Variables in the Vercel project settings (for Firebase, database, etc.).
- Deploy. Vercel will automatically deploy your project and provide a URL. Future pushes to the connected branch will trigger automatic redeployments.
We welcome contributions to MarkdownMate!
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature/your-amazing-featureorbugfix/issue-tracker-fix. - Make your changes. Ensure your code follows the project's style and conventions.
- Commit your changes with clear, descriptive messages:
git commit -m 'feat: Add X feature that does Y'. - Push to your forked repository:
git push origin feature/your-amazing-feature. - Open a Pull Request to the
mainbranch of thehexawulf/MarkdownMaterepository.
For more detailed guidelines, please see the CONTRIBUTING.md file.
This project is licensed under the MIT License. See the LICENSE file for details.
- Found a Bug? Open an issue on GitHub Issues.
- Have a Question or Idea? Start a discussion on GitHub Discussions.
- Need Help? Check the documentation or reach out via Discussions.
Made with ❤️ for the developer community.