Skip to main content
All CollectionsCreate & Edit Cards
Introduction to the Super Editor
Introduction to the Super Editor

Why we built a one-of-a kind WYSIWYM editor

Updated over 8 months ago

We designed an entirely new editor for Supernotes, using Markdown as the underlying text format. Markdown has a number of clear benefits:

  • Simple to start, but very extensible. Markdown is basic and intuitive, you can begin with just wrapping text with asterisks (this is known as a Mark) to make it Italic. But once you master it, you won't go back to traditional editors.

  • Marks are explicit, allowing you to specify exactly how everything will be formatted. Your cursor doesn't get stuck and jump around

  • Markdown is extremely portable as it used by many other tools and websites, so it's easy to import / export your knowledge between them

Our Super Editor is different as it's one of very few "What You See Is What You Mean" (WYSIWYM) editors. This is in contrast to "What You See Is What You Get" (WYSIWYG) editors.

The difference between the two is fairly straightforward: in a WYSIWYG editor, there should be no difference between what your content looks like in an "edit" vs "display" mode. Here is an example of what some content might look like in a WYSIWYG editor:

Picture of WYSIWYG content

This is how the document looks all the time, whether you're editing it or just reading it. Many websites and tools have adopted this type of editor because it makes everything very predictable.

However on Supernotes we actually want to embrace the difference between editing and viewing your content, as they are two very different activities with different priorities. So we have built the Supernotes editor to be "WYSIWYM", which in essence just means that while we will format your content mostly as it will appear in display mode, we leave in all the markdown marks. This allows you to be very deliberate and conscientious about what you are putting and where while also giving you a pretty good idea of what the final result will look like. Here is that same content as above, but this time in the Supernotes Editor:

One of the main benefits for us of this paradigm is that it makes things very easy to change from one type of formatting to another. For example, if you want to make the first title in the above card ("Today's Todo List") a little bigger, you can very quickly just remove one of the hashtags to make it an H1 style rather than H2.

The rest of the articles in this section expand on this idea and explain how you can address your formatting and content-creation needs using Supernotes.

Did this answer your question?