Reimagining User Experience of Markdown Link

Introduction

Zuunote aims to make writing in Markdown enjoyable to everyone. This includes technical and non-technical people - and everyone in between. This means crafting a writing experience that feels right to everyone. And this posts documents my balancing act in achieving that when creating and editing links in Markdown.

How to create a link in Markdown

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.

Advantages of creating Markdown links with plain-text characters

The brackets and parentheses can be intimidating and a turn off to a lot of people. But I believe that once you get past that, you are going to experience something in your writing that you never did before.

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

Compare to Markdown editors such as Typora:

Confluence can do that too:

Again, I believe once you get past having to enter brackets and parentheses, writing in Markdown will become extremely ergonomic for you.

And one positive side effect 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, right?

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

and in Confluence:

(Note: in Confluence, link creation and modification flows are different. See more)

and in Notion:

But you don't have to struggle like that in Markdown Editors:

(But notice the exploded long url and the inconvenience to copy and select. More on this below.)

No surprises there! Once we knew that brackets [] encloses link's text, we can precisely edit the texts anywhere within them.

However, even with this added ergonomics and precision from Markdown, I believe there are still areas we can improve.

UX issues of Markdown links

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:

Zuunote

Zuunote's 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.

Below is how I meet Markdown links halfway for everyone.

Creating links

Everything is just plain-texts. Boring but good and accessible.

Entering links

Here, I adopt the action buttons that you see in Google Docs and Notion, and enclose them with parentheses as seen in a vanilla Markdown link, which means link's Markdown syntax is still being enforced:

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

Edit link's URL

Clicking the edit button displays an input field, in which you can use familiar keyboard shortcuts(or mouse clicks) to quickly select all, copy, or paste.

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

Copy link's URL

Copy URL by clicking a button rather than carefully selecting the text.

Remove links

Conclusion

It seems to me that every text editor caters solely to a particular group of people. What if there's a text editor that 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 [e-mail] if you want. Or just join the waitlist.

Thank you for your attention and time. Take care.