How I Built Draftly - A Simple Rich Text Editor

Building a rich text editor from scratch is a challenge many frontend developers shy away from - and I decided to take it on with my project Draftly.

What is Draftly?

Draftly is a lightweight, custom rich text editor built in JavaScript that lets you format text, create lists, and style content without relying on heavy external libraries.

Why build Draftly?

Most rich text editors are bulky or too opinionated.
I wanted to understand the core mechanics behind text editing on the web.
Customization is much easier when you control every detail.
It was a great learning project to deepen my JavaScript and DOM manipulation skills.

Challenges I faced

Handling cursor and selection accurately.
Implementing undo/redo functionality.
Managing HTML output cleanly without extra tags or styles.
Keeping the editor performant and responsive.

What I learned

The complexity hidden behind seemingly simple contenteditable elements.
How browsers differ in handling user input and selection.
The importance of modular architecture to separate UI from logic.
Writing clean, maintainable JavaScript for interactive components.

Quick look at the code

Here’s a simplified example of how Draftly toggles bold formatting:

function toggleBold() {
  document.execCommand('bold');
}

Of course, Draftly extends far beyond this simple command - but starting small helped me build up functionality incrementally.

What’s next?

Draftly is still a work in progress. My description here is just a sketch of what the project is and what I plan to include in it.

I plan to:

Add support for more formatting options.
Improve keyboard shortcuts and accessibility.
Create a plugin system for easy extensibility.
Write tests to ensure stability.

Final thoughts

If you’re thinking about building your own editor or just curious how these tools work under the hood, I highly recommend trying a project like Draftly. It’s both humbling and rewarding.

Check out the repo here: Draftly on GitHub