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

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.

@thinkertype: I collected all my CSS snippet in 1 file, and that includes the “Full Monty” on WYSIWYG.

+1 WYSIWYM,It’s my favorite function. Hope support soon.


Bingo. Totally with you. I don’t want to have to use my imagination to picture how… what I’m working on now, will look like later.

I want to see the finished product at all times—constantly. Anything else, is another “step” that adds time to the task I’m trying to do.

The “forced-viewing-of-markdown-syntax-while-editing” that so many notes apps force… on the user, is in my opinion, an epidemic. I don’t know why they do it.

When I select a word, then hit CMD+B to make that text I just selected bold, and am then presented with four asterisks… I feel like I’ve just been lied too.

Whoa, it looks like I have an opinion.


Because it’s easy for the programmer.

1 Like

Hey Alan,

Is it really? Aside from changing the look of existing apps with css, I can’t code at all. So really, I don’t know.

Your elaboration would help explain a common frustration I have.

Markdown is as easy as typing text. First a * then whatever then another *. Formatting stuff on the fly is a whole lot more intricate than that.

1 Like

+1 to this, would love to be able to render latex in edit mode

1 Like

+1 for prioritizing WYSIWYM over the mobile app :slight_smile: