A Typora-like editing mode (edit and preview at the same time)


+1 for WYSIWYG mode sooner.

Thank you.

I’m using a downloadable CSS snippet that removes much of the markdown from edit mode and presents lines pretty much as they will appear in preview mode. So bullets look like bullets, bold is bold, highlighted text is highlighted, tickboxes look like tickboxes, headers are underlined and the right size etc all without unsightly dashes, hashes underlines and equals signs scattered through the text. You only see the markdown when you click on a paragraph to edit it. When you click off the markdown symbols disappear.

This does have some clunky aspects though. When you click on a paragraph, because the CSS has moved things, the cursor doesn’t always end up where you expected. Also you can’t show images or tables yet.

If they could fix these couple of niggles I would be happy with this approach. I.e. you use markdown when you are clicked into a paragraph but it previews when you click off it. I’ve no idea if this would be harder or easier to implement than a full WYSIWYG editor that never shows markdown.

I would be quite happy with this implementation also, if it is much easier/faster to do than a full blown WYSIWYG.

One slight suggestion - to make the visual switch to Markdown on mouse over also, rather than just when the cursor is within the line. This would help avoid the problem of clicking in the wrong place.

Yes, but if you want to edit you still need to put the cursor in the line. Being in Edit mode is, after all, to edit.

can you share the CCS - or point to where you got it from

@Chrisg: see the downloadable CSS file here.

The complaint above, which I agree with, is that current hacks towards WYSIWYG mean it can be hard to click into the desired location for an actual edit. My suggestion was an attempt at solving that specific problem, short of developing a full blown WYSIWYG mode.

@icebear: I understand that, but hovering does not solve it. If one is in Edit mode one needs to be able to place the cursor for editing.

BTW, as one of the 1st adopters of this what I call pseudo-WYSIWYG I am fully aware of the issue. My workaround this irritating issue, as outlined by @dcoales is to comment out this line: div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag.

That way one still retains a lot of the pseudo-WYSIWYG experience, and have a more comfortable editing experience.

1 Like

TBH I’ve forgotten where I got the attached (354 Bytes) css snippets from (which is bad, since I can’t properly credit the original authors). I think I cut bits out of other snippet files linked to in the discord forum. I’ve made a couple of tiny edits myself so if anything doesn’t work that’s probably my fault rather than the original author’s.

@icebear I don’t have that line in my wysiwyg editor CSS. Is there another edit you can recommend to help with the cursor positioning.

wysiwyg editor.css (3.1 KB)
Edit mode bullets.css (354 Bytes) Coloured tag pils.css (1.6 KB)


We already have what you see is what you MEAN, this is just like any other markup language editor, what you want is what you see is what you GET.

1 Like

I am waiting for this mode eagerly. I have used to love typora for this mode for saving a lot of space of my screen.


We already have what you see is what you MEAN

We do not.

“WYSIWYM (Typora-like)” would mean that you can type in Markdown and see the resulting formatting in a single pane, including seeing your attached images, mermaid graphs, or other content inline - depicted in way that is structured and formatted, but not necessarily design-accurate.

As of now, you currently have to switch between Edit and Preview modes, or have two panes open. That’s the fundamental problem being addressed in this thread.

WYSIWYG means that you’ll see an accurate depiction of a final rendered output on screen or print. This is not what this particular thread is asking for. Since you could have any arbitrary text-editing CSS theme to suit your tired late-night novel-writing eyes, but then export your final document(s) to any other type of CSS theme or YAML-formatted output to suit your editor’s manuscript needs, for example. Or your website’s funky typography. There’s no particular reason for the two to be the same.


in fact, neither of us was right. Reading on the discord server there was a post by the obsidian team about it, but I cant find it anymore.
A wysiwym editor means that you do not see any rendering of your writing. This is an editor llike most other markup language editors, e.g. html editors.

A wysiwyg editor shows you the final output, what you will get when you print it.

This difference is explained in the wikipedia article for the wysiwym paradigm

Both of there are, however, not a typora-style editor, its own category, that uses wysiwym for the currently edited part and wysiwyg for the rest of the document.

1 Like

@Daemon: at the end of the day it does not matter what we call it, the devs know that what is meant is the Typora-style, which is what they are going for.


The California Coast theme and simply the hotkey Cmd + E have fulfilled almost all needs of a WYSIWYG editor for me. I’m still waiting for it, but not desperately.

@tav: you mean CC theme looks and behaves pretty much the same in Edit and Preview modes?

Yes :smiley:

Today is a sad day for humanity, Mobile apps were chosen before the WYSIWYG :sob:.


See my message above and cheer up.
You already have WYSIWYG and now you’ll have mobile apps as well.
It’s a good day.


Clutter Free Mode has been around for a long time and it is far from being the same thing, there are several cursor positioning problems which end up wasting more time than saving.

And most importantly, you cannot view images or work with tables correctly.