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

A post was merged into an existing topic: Another WYSIWYG Open-Source Markdown Editor (An alternative to Typora)

thank you! it workssssss :grinning:

What about this hack until it is implemented natively?


1 Like

@pihentagy: and what about this?

I think it is too hard / impossible to implement. Hope others prove me wrong :wink:

All of those can be hidden when !important is added to original css, unless I don’t understand what you expect

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag {
    display: none !important;

@Piotr: wow, this is really cool, it works, even the
tags are hidden. Many thanks.

The only thing is that I had set a colour for the H1 - H6 headings, but with this code they are back to black, even in Preview. Is there a way to exclude the heading font colours?

Headers have cm-header class, which is not affected by the code above (it also doesn’t revert colours in my Obsidian), I think that you might have accidentally remove or change some part of your stylesheet.
Or if there is some error in the css, everything below that error will not be used, you can look for some unnecessary or lacking ,, ;, {, } in the code surrounding your last change.

BTW if you want to use my modification and still see -, tasks etc, you’ll also need to change the rest of the original code into this:

/* except list markers */ .CodeMirror-lines .CodeMirror-code .CodeMirror-line span.cm-formatting-list,
/*code block backticks */ .CodeMirror-lines .CodeMirror-code .CodeMirror-line span.cm-formatting-code-block.cm-hmd-codeblock,
/* optionally header hashes */ .CodeMirror-lines .CodeMirror-code .CodeMirror-line span.cm-formatting-header
{ display: inline !important; }

/* and task checkboxes */
.CodeMirror-lines .CodeMirror-code .CodeMirror-line span.cm-formatting-task { display: inline !important; font-family: monospace; }

A step towards a pseudo-WYSIWYG experience is achieved by making modifications to the Edit mode. I personally love WYSIWYG, and have implemented many of the code on the Clutter-free page.

I thought it might be useful to compile it all into 1 CSS sheet.
Note that the CSS sheet is NOT a theme; you can copy/paste from the sheet into the theme you are using.


thank you :zap::sunflower:

I’m used to the Typhora style but honestly I would welcome either one of the editor modes described by @dsteinbock

Thanks to @Klaas!


It’s great to know that the feature is on the road map, but I wish it were given a higher priority. Especially if you regularly include images in your notes, Obsidian currently feels pretty clumsy compared to Typora. On a small laptop screen, dual pane mode is not really feasible, and regularly switching between edit mode and preview mode feels pretty awkward.

It looks like this sentiment is shared by a large number of users: Not only is the Typora-like editable preview mode the most requested feature, it also leads by a wide margin (it has twice as many likes and twice as many replies as the second most requested feature).


Why not just do your writing in Typora then? Simple enough to have one file open in Obsidian and Typora and only switch to Obsidian for autolinks, image pasting etc.

1 Like

@Dor: Because more often than not, I don’t sit down with a particular note to do prolonged writing; instead I cycle between different notes (sometimes somewhat rapidly), alternating between reading and making small edits. This makes having to frequently toggle between edit and preview mode (especially to see the images) already a bit awkward; introducing frequently switching to Typora would add even more friction.

Furthermore, for many people (myself included), visual consistency is extremely valuable. In Typora, my notes always look the same, which is very conducive to forming consistent visuospatial representations of the notes. By contrast, switching between edit and preview mode in Obsidian, and/or putting Typora on top of all that, is very disruptive in this regard.

As a consequence, I currently still spend most of my time in Typora, even though there are a lot of things I really like about Obsidian. If Obsidian had a Typora-like editable preview mode, I would jump ship in a heartbeat.


My point is that you can simply do nearly all of the editing of your Obsidian vault using Typora.
And just use Obsidian for the features unique to it.

Your argument was that WYSIWYG ought to be moved up on the priority list. There’s not much left on that list, that hasn’t been started.
There’s Sync - which is one of the legs supporting Obsidian’s development - and Mobile apps.
If you look at issues as they are raised on the Discord, mobile access is probably the most frequent and there’s no adequate alternative. Current Android and iOS apps are very rough workarounds; they can be made to function but not well. And Sync may not see a big take up until the mobile apps to use it are up and running.

1 Like

I know it’s on the roadmap but …
+1 for WYSIWYG :blush:
(with switch to code mode, if you need to arrange things behind the curtain)

NB: in my humble work of literary writing, and my passage from word processing to markdown (drafts and connective notes in light format (plain-text)), the difficult part was not learning mardown but the distraction side. The applications with two side-by-side panels (code and render) did not suit me at all. I really adopted markdown thanks to Typora, because the wysiwyg gives me a more direct experience of writing (strike out, highlight, etc., almost like on paper).

1 Like

Still Hope dev team could move this feature from Long-Term to Short-Term.

After the great ‘Block References’ feature, WYSIWYM becomes more urgent:

BTW: Drag-Drop to automatically create Block Reference like Roam would be great.


Agreed. It’s the one thing that keeps me from saying bye to Roam


@thinkertype: if that’s the only thing, right now you can get a pretty close approximation with “remove clutter” CSS. Add to that the same font for Edit and Preview and you’ll wonder why you waited :sweat_smile:

Thanks for the tip, let me check it out now.