Every year Tiny’s engineering and product team gets together for one week to hack away on projects that fall a little outside the scope of our day-to-day work. This year they invited a few interlopers down to our Australian office, including us marketing folks.
During the hackathon, which we call Product Week, I had the privilege of playing product manager alongside some of our best engineers. Together we worked on a project that’s close to my heart: a markdown mode for TinyMCE.
The team humored me as I stumbled my way through my product manager duties, and by the end of the week we had produced a rather cool markdown editor using TinyMCE.
Today I’d like to share a brief overview of our journey.
Can’t wait to see what we built? Check out TinyMCE’s markdown preview now.
The requirement set for the team was to see whether we could build a markdown mode for TinyMCE. I say “mode” intentionally here. We did not set out to build a markdown editor. That’s already been done, many times. What we wanted to do was parse rich text (HTML) into markdown and back inside a TinyMCE instance, and then output valid, compliant markdown from the editor.
Our hackathon brief went something like this:
Markdown is a popular tool for power users. By leveraging the existing textpattern plugin we could potentially provide a mostly configuration free solution for providing markdown support for TinyMCE.
For extra credit, find other ways to use the textpattern plugin to provide user value. Changes to the plugin itself should be on the table. Even consider a GUI that would enable users to create new patterns.
Being a team of renegades, we promptly ignored that. My career as a product manager was already looking shaky …
On TinyMCE vs markdown
Given that I work for a rich text editor company, you might think it’s a little odd that I’d champion markdown. Two thoughts on this:
- In my work I’m very customer and user-centric, and my view is that the best tool for the job wins. Usually that’s TinyMCE, sometimes not. If not, the question becomes whether we can extend TinyMCE to solve for those cases?
- Practically, I like markdown because my thoughts aren’t interrupted by mouse clicks and I can stay focused on my work. An exception would be building tables and even mildly complex lists, which is no fun in markdown. There are of course many other times TinyMCE wins out, but for tasks like note taking markdown is my thing.
The process: scope
Measure twice, cut once. Day one was about learning, scope and design. If we wrote a line of code on the first morning, we’d already failed.
We started with a hypothesis:
- That TinyMCE can be used to generate new content as either rich text or as markdown
- That TinyMCE can ingest and edit existing markdown syntax
From there we asked two questions:
- Can we create content in TinyMCE and send valid markdown out of the editor?
- Can we return valid markdown to the editor?
But before going any further, even a hackathon needs to be rooted in a little reality. So we started with user interviews. I needed to get this done ASAP. We had 3 days to build our markdown mode and there was no time to burn. I pinged our sales, success and support teams asking whether they’d received requests or feedback about markdown. Sure enough they had and I went about contacting everyone who’d expressed even the slightest interest in this solution.
At the same time, in one of those moments of universal coincidence, that very day we received an inbound request for a markdown mode. Being an on-top-of-everything kind of marketing guy, I saw the conversion and pinged the assigned sales guy Bryan. Anyone who’s done business with Tiny in the past 12 months will know Bryan. He’s a BDR machine. Absolute legend. We got to chatting and we decided we’d pitch a product that didn’t exist, yet. Bryan even got to intro pricing …
It was a fun conversation and the prospective customer provided some great feedback:
“The current state of markdown editors is dismal, so there’s a real opportunity there.”
Right-o. Perhaps we’re on to something?
The process: market statement
The team then built a market statement, asking three simple questions:
1. What are we building?
- Markdown syntax plugin for TinyMCE
2. Who are we building it for?
- Authors who prefer the speed & simplicity of markdown
- Developers who need maximum control over content output, but where authors are not familiar with markdown
3. Why should they care?
- Fast, distraction & error free writing to get published quickly
After this stage, here’s where we landed:
- Tiny Markdown is a markdown syntax plugin for TinyMCE
- It provides flexible rich text and markdown content creation options for authors
- It provides robust, reliable markdown output for developer projects
The process: design + development
While I was off doing user research, the team started work on the technical scoping and design of the project. We have some incredibly smart folks at Tiny, and it was good to know I could leave these critical tasks in the hands of Lawanya, Morgan, Josh, and Luke. I fed my customer learnings back to the team at lightning speed and they adapted equally quickly.
They called in Alice from the roaming design and UX team to get some help, and together the group started wireframing some ideas, while exploring libraries that could solve the anticipated parsing requirements. Shoutout to Alice here, who made the time to work intensively on our markdown project and became a core part of our team.
The engineers on the team allocated the remainder of their time to writing code and testing. This is where my inability to write software starts to bring our story to a close, but know that we built a simple (enough) markdown mode for TinyMCE quite quickly. IIRC the team had it done within a day.
So, with some spare time on their hands the team decided to add some very cool extras. Things like image resizing, nested lists, tables (huge!), hints and markdown help with a keyword search for those not familiar writing markdown. They added support for various dialogs also, including inline, block, ditto with insertion, browsing, and inline in fullscreen mode.
With a successful Product Week behind us, and a gold medal for most fun hackathon pitch (imho), we published the project on our Labs page. Please check out the preview and let us know what you think.
If you have feedback for the team, and/or are interested in how we built the markdown solution, please ping labs [at] tiny [dot] cloud and the product team will be in touch. Thanks for joining us on our markdown journey and we look forward to sharing more soon.
Need a markdown mode in production? Please direct enquiries to our team via chat or our contact form.
If you’d like to chat about TinyMCE, Tiny the company, or about the fun to be had marketing the world’s most loved WYSIWYG editor, feel free to ping me on Twitter @robertcollings.