The latest articles on DEV Community by Rafat Alam (@rafatalam). https://dev.to/rafatalam https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3527012%2Fbe084914-0cb2-492c-977f-8b4960d2ac9c.jpeg https://dev.to/rafatalam en Rafat Alam Wed, 24 Sep 2025 13:45:18 +0000 https://dev.to/rafatalam/contribute-to-mdx-editor-an-open-source-ai-powered-markdown-jsx-experience-47n7 https://dev.to/rafatalam/contribute-to-mdx-editor-an-open-source-ai-powered-markdown-jsx-experience-47n7 <p>Hey everyone! 👋<br><br> I’m super excited to introduce <strong><a href="https://github.com/rafat-alam/mdx-editor" rel="noopener noreferrer">MDX Editor</a></strong> — a modern, open-source editor for creating and managing MDX (Markdown + JSX) documents with ease. </p> <p>This project started as a way to simplify writing, editing, and collaborating on MDX content, and it has quickly evolved into a powerful editor with AI-assisted text manipulation, real-time saving, and a clean, responsive UI. </p> <p>Now, I’m opening it up to the <strong>community</strong> to help shape its future. If you’re passionate about open-source, React, Next.js, or MDX — this is your chance to contribute to something impactful. 💜</p> <h2> ✨ What Is MDX Editor? </h2> <p>MDX Editor is a <strong>web-based editor</strong> built with <strong>Next.js</strong>, <strong>React</strong>, and <strong>Tailwind CSS</strong> that allows you to:</p> <ul> <li>Write and edit MDX (Markdown + JSX) documents with real-time preview.</li> <li>Manage your files and folders like a repository system.</li> <li>Collaborate and save changes in real time.</li> <li>Use <strong>AI-powered tools</strong> to improve your content (coming soon).</li> <li>Securely authenticate and manage private/public repositories.</li> </ul> <p>It’s essentially like your favorite code editor, but optimized for <strong>content creators and developers</strong> working with MDX.</p> <h2> 🛠️ Tech Stack </h2> <ul> <li> <strong>Next.js</strong> + <strong>React</strong> </li> <li> <strong>Tailwind CSS</strong> for styling </li> <li> <strong>Prisma</strong> + <strong>PostgreSQL</strong> for database </li> <li> <strong>NextAuth</strong> for authentication </li> <li> <strong>Monaco Editor</strong> for a VS Code–like editing experience </li> </ul> <h2> 🚧 How You Can Contribute </h2> <p>There are many ways you can jump in and help:</p> <ul> <li>🐛 <strong>Fix bugs</strong> or improve performance. </li> <li>🎨 <strong>Enhance the UI/UX</strong> with better design ideas. </li> <li>📝 <strong>Improve documentation</strong> or write tutorials. </li> <li>🔌 <strong>Add new features</strong> (like themes, AI plugins, or export options). </li> <li>🧪 <strong>Write tests</strong> to increase coverage and stability. </li> </ul> <h2> 🌟 Final Thoughts </h2> <p>Open source thrives because of passionate contributors like you. Whether you’re fixing a typo, designing a new feature, or helping with documentation, every contribution makes MDX Editor better. 💡 </p> <p>If this project sparks your interest, don’t hesitate — fork the repo, open an issue, or start a pull request. Even the smallest step forward has a big impact. </p> <p>👉 <strong>Let’s build an amazing MDX experience together!</strong> 🚀 </p> <h2> <a href="https://github.com/rafat-alam/mdx-editor" rel="noopener noreferrer">⭐ Star the project on GitHub</a> and join the journey today! </h2> webdev opensource nextjs ai