Modular Markdown Editor
The Modular Markdown Editor is a single-page, fully modular markdown editor built with vanilla JavaScript. It demonstrates how to create maintainable, testable, and scalable frontend systems without relying on heavy frameworks.
This project began as a personal challenge to push the boundaries of vanilla JavaScript while maintaining a clean, modular architecture. The goal was to build a Markdown editor that remains easy to reason about as it grows, combining dependency injection, a dedicated Composition Root, and immutable state to keep the codebase predictable, decoupled, and fully testable.
One of the biggest challenges was designing a complex frontend application without letting it devolve into tangled dependencies or hidden side effects. Vanilla JavaScript projects can quickly become difficult to maintain as they scale, so the challenge was to build a feature-rich editor that is both modular and robust, all while keeping components fully decoupled and testable.
I began with exploratory Figma concepts to define how each user type would interpret value differently.
I approached this project by first planning the architecture around a Composition Root that handles all wiring of dependencies, ensuring that individual components never import anything directly. Each view and controller was designed to receive dependencies via constructor injection, keeping them independent and easily testable. The global store was implemented as an immutable object, which allowed predictable state updates and simplified debugging. Views manage the DOM and user events independently, interacting with controllers without introducing tight coupling. Iterating on functionality was straightforward because each piece could be tested in isolation, allowing for clean and maintainable growth of the application.
Color palette
Each color was selected to support accessibility, visual hierarchy, and a clean, modern interface.
What I learned
I began with exploratory Figma concepts to define how each user type would interpret value differently — from long-term appreciation to short-term trade signals.
This project reinforced that it’s possible to build scalable, maintainable frontend applications without frameworks, provided the architecture is carefully considered. Implementing dependency injection and a Composition Root drastically reduced coupling and improved testability, while immutable state simplified debugging and ensured predictable behavior. The project demonstrates my ability to design robust frontend systems, make thoughtful technical decisions, and deliver a maintainable, production-ready application from start to finish.