Modular Markdown Editor

Overview

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.

Problem

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.

Approach

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.

Impact

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.