Reimagining user experience of links in Markdown

Popular applications such as Notion, Slack and Trello support Markdown. While Markdown is a very ergonomic way to write, I believe the writing experience still leaves much to be desired, particularly in the aspects of editing.

What if we combined the ergonomics of Markdown and the friendly UI elements found in Google Doc, and we applied that approach on links in Markdown? Well, here is what I have come up with:

You can jump to here to see how those buttons work, or read on to learn about the process.

Let's get this out of the way first. This is how a link looks like in Markdown: [Contact us](https://example.com/contact-us`)`

There are two parts to it:

1. Brackets []: The text of your link goes in there, in this case Contact us. And,
2. Parentheses (): The URL goes in there, in this case https://example.com/contact-us.

The brackets [] part comes first, followed by the parentheses () part.

On first impression, the brackets and parentheses can be a turn off to a lot of people. But I believe that once you get past that, you are going to experience a flow in your writing like you never did before.

For example, this is how you would create a link in Google Doc:

Now, compared to Markdown editors such as Typora:

Confluence can do that too:

And one positive side effect from that is: editing becomes precise too.

I mean, for example, you will run into troubles in Google Doc and Confluence if you want to edit in the beginning of a link's text:

even though you can edit it anywhere in between:

That's a little confusing if not frustrating, right?

This is the fool-proof way to edit link's text in Google Doc:

and in Confluence:

and in Notion:

Compared again with Markdown editors:

We can precisely edit the texts anywhere within brackets [] .

But I believe there are some UX issues which we will address next.

Markdown editors such as Typora that offers live-preview without split-pane offer an ergonomic way to create links. However, when it comes to editing them, it's not as ergonomic and pleasant as it's precise.

Notice the jarring shift in your content when you focus on a link with a super long URL.

Nota, a Markdown editor for Mac, solves it by initially showing an icon as a placeholder:

But still doesn't avoid the content shift when cursor enters the parentheses:

Additional to the content shift, copying and editing the long URL are not easy to everyone:

Writing purely in Markdown can be a tough pill to swallow for folks coming from, for example, Google Doc, because user experience is not as intuitive. Conversely, writing purely in intuitive editors such as Google Doc sacrifices the ergonomics and precision of Markdown.

How can we have the best of both worlds?

I'm building a Markdown editor called Zuunote. Its guiding principle is to meet everyone halfway - everyone who is using Google Docs and Microsoft Words, and everyone who is using Notion, Confluence, Typora, and Obsidian.

Here are the results of applying that principle on links.

Everything is just plain-texts. This is how writing in Markdown can be ergonomic and precise, both of which are an ingredient to get into the flow.

Here, I adopt the action buttons that you see in Google Docs and Notion, and enclose them with parentheses (). This means we are still enforcing Markdown syntax of links:

This approach not only avoids the jarring content shift, but most importantly it's functional and delightful to everyone.

To edit URL, click the edit button. It will reveal an input field with the URL pre-filled. Since it's a vanilla HTML input field, you can use familiar keyboard shortcuts(or mouse clicks) to quickly select all, copy, or paste.

Notice that things still flow and act like plain-text but now with added niceties you see in places like Google Doc and Notion.

Copy the URL with a click of a button, rather than carefully selecting its entirety with repetitive actions on keyboard or mouse.

A click on the remove icon instantaneously removes all artifacts and behavior of a link in Markdown.

It seems to me that every text editor caters solely to a particular group of people. What if there's a text editor where all groups of people can equally enjoy? That's the goal of Zuunote. And I hope it shows here through the way it implements links. But I'm way in over my head. So please send me feedbacks at hello@zuunote.com if you want. Or just join the waitlist, again, if you want.

Thank you for your attention and time. Take care.