This content originally appeared on DEV Community and was authored by Emmanuel
The Problem: My Workflow Was Broken
Ever wished you could seamlessly convert rich-text notes into perfect Markdown? We’ve all been there. You’re trying to quickly draft a README, a blog post, or project documentation. You start in a rich-text editor for the ease of formatting, but eventually, you need to convert it to clean, portable Markdown.
That’s where the pain starts. You copy-paste the content and spend the next 15 minutes manually fixing broken lists, wrestling with mangled code blocks, and cleaning up weird HTML artifacts. I was tired of this clunky, inefficient workflow. I wanted a tool that provided the fluid, visual experience of a WYSIWYG editor but was built from the ground up to produce perfect Markdown.
So, I decided to build it myself. In this article, I’ll walk you through how I built the Markdown Converter: Effortless & Perfect, the tech stack I chose, the architectural challenges I overcame, and how it all came together.
Better by Design: The Right Architecture for a Superior Tool
To build a better editor, I focused on two things: a solid technical foundation and a user experience that genuinely solves problems.
The app is built using key design patterns like the Component-Service architecture and Dependency Injection to keep the UI logic separate from the business logic. This makes the code clean, testable, and scalable. For a snappy, modern feel, it uses Angular Signals for efficient, reactive state management.
This architecture supports what makes the converter different from the countless others out there:
A True Rich-Text First Experience: Instead of a plain textbox, you get a powerful, TipTap-based WYSIWYG editor. It’s as easy to use as a word processor but outputs perfect Markdown. This wasn’t a straightforward integration, however. TipTap, while incredibly powerful and headless, is primarily built with other frameworks like React and Vue in mind. Getting it to play nicely with Angular required some dedicated effort. I had to research and eventually leverage an Angular community npm package (ngx-tiptap) I found on GitHub, which provided the necessary bindings to make TipTap truly feel at home within an Angular application. This meant diving into its specific implementation nuances and adapting it to my component structure, adding a challenging but ultimately rewarding layer to the development process.
An Intelligent Import System: Go beyond copy-paste. You can import directly from a file, fetch content from a URL, or use built-in templates for READMEs, blog posts, and more to accelerate your workflow.
The Struggle: A Dark Mode That Was Actively Hostile
One of the biggest challenges was implementing a truly high-quality dark mode. My first attempt was simple: add a .dark class to the element and use Tailwind’s dark: variants. This worked for the main UI, but the notification toasts were a disaster.
The Problem: The initial notifications used light-colored text on vibrant backgrounds (e.g., white text on a green success toast). In dark mode, this created a jarring, low-contrast experience that was genuinely hard to read.
The Solution: I had to re-architect the notification styling. Instead of just inverting colors, I created a new color strategy focused on readability.
High-Contrast Backgrounds: I chose new medium-brightness background colors for each notification type.
Dark Text on Color: The key insight was to switch to dark gray text on these colored backgrounds, which provided excellent contrast and made the text pop.
CSS Specificity: To enforce these new styles, I had to carefully manage my CSS rules, sometimes using !important to override base styles that were bleeding through from the component library.
Here’s a snippet of the CSS that solved it. Notice the use of dark gray (#374151) for text, even in dark mode.
CSS
/* Dark mode notification architecture */
html.dark .alert-success {
background-color: #16a34a; /* Vibrant but readable background */
color: #374151; /* High contrast dark gray text */
}
html.dark .alert-success .alert-title {
color: #374151 !important; /* Override base styles */
}
This experience was a powerful lesson: a feature isn’t “done” until it works well for everyone in every context. This kind of problem-solving—identifying an issue, architecting a solution, and documenting it—is exactly what makes a good developer great.
The Result: The Markdown Editor I Always Wanted
After weeks of development and refinement, the Markdown Converter: Effortless & Perfect is live. It’s a fast, responsive, and feature-rich tool that has genuinely improved my own workflow.
Here is the powerful Import Modal in action, showing the file, URL, and template options:
And here’s the final dark mode, with the high-contrast notifications we just discussed:
I’m incredibly proud of how it turned out. The architecture is solid, the feature set is robust, and it solves the exact problem I set out to fix.
Key Learnings & What’s Next
This project was a fantastic learning experience. My main takeaways were:
Architecture First: A clean separation of concerns from day one prevents countless headaches later.
The Last 10% is Everything: A feature like “dark mode” is more than a toggle; it requires deep thought about accessibility and user experience to be truly complete.
Embrace the Ecosystem: Leveraging powerful open-source libraries like TipTap and Turndown allowed me to focus on building unique features instead of reinventing the wheel.
As for the future, I’m already planning features like real-time collaboration to enable seamless team workflows, cloud sync for universal access, and an extensible plugin system for greater customization.
Now It’s Your Turn!
Thank you for reading about my project! I built this tool for developers and writers like you.
Check out the live demo and try it for yourself!
Dive into the source code on GitHub. I welcome feedback, issues, and of course, stars!
What features would you love to see in a tool like this to further streamline your workflow?
Let me know your thoughts in the comments below!
This content originally appeared on DEV Community and was authored by Emmanuel