There are lots of Markdown editors out there but I couldn't find one in which the viewer was built into the editing pane itself.

An example of what I don't want is these SE sites, where the question/answer Markdown preview appears down below. Similarly, the vast majority of existing Markdown editors have two separate side-by-side panes, one for editing and the other for the live preview. This is not what I want.

What I want is for the Markdown rendering to occur right where you're typing, replacing the typed text with marked-down text as you go along.

Is there anything like this? I'm on Windows but a webapp (or even just raw JS/HTML) would be cool too.

17 Answers 17

Last update: 2018-01-08

Having a similar need to the OP, I searched the whole web for current solutions. There's no current perfect solution, but there are a few ones that might be worth a try.

Note that I had additional requirements to inline previewing, such as: multidocuments tabbing, table of contents for quick navigation, lightweight, markup hiding/showing (sourcecode mode) with styling kept and finally autosave of documents and of session.

I will here describe two categories of editors that can fit OP's purpose depending on what exact kind of previewing is expected (inline preview vs inline styling). I will describe a few main features non exhaustively, you should consult the websites to get more information. I also chose to leave split-pane only editors (ie, without inline preview nor styling) out of the picture, as there are plenty and are explicitly excluded by OP.

Note that I have personally tested all the ones running on Windows.


Inline preview

All the following editors allow you to type Markdown markup, and automagically display the resulting style instantly inside the editor (no split-pane for preview).

This is also sometimes called WYSIWYG, but this is different here as you do not necessarily have to use the toolbars to format the text: with inline preview you can just input markup code and it will display the result dynamically. In some sense, this is very similar to what LyX pioneered for LaTeX.

There are basically two types of inline preview: per block (refresh the styling after you leave a block, eg, by going to the next line/block) or per character (ie, as you type).

I am not demonstrating image insertion but they can almost all preview images, both local and remote.

Note that almost none of the app here supports multi-document tabs (yet?), except for the note-taking oriented apps.

Texts

Texts.io

Commercial (but cheap: 19$)
Win + MacOSX
Inline preview + Presentation support too + Bibliography support + Footnotes
Math support
Can import LaTeX documents
No sourcecode mode (cannot show Markdown)
No autosave nor tabs.
No task list support.

Abricotine

Abricotine

Opensource (GPL)
Win + Mac + Linux
Inline preview + TOC navigation (Table of Content)
Math support
Only sourcecode mode (cannot hide markup, links cannot be beautified)
Actively in development (so the following issues may resolve fast)
Bug with loading external pictures under https
Cannot click on links
No [autosave](https://github.com/brrd/Abricotine/issues/17) nor [tabs](https://github.com/brrd/Abricotine/issues/10) (but issues are open, feel free to +1 or even contribute a patch if you know [Electron](http://electron.atom.io/)!)

Typora

Typora

Original announcement

Commercial, free during beta
Win + Mac (+ Linux in the future)
Inline preview + TOC navigation (called Outline)
Math support
Both sourcecode and no markup mode are available.
Autosave + documents recovery
Can insert an auto-updating TOC (in addition to TOC navigation)
No bibliography support (yet?) but can add "link reference" and footnotes.
Auto-reload notification when document changes.
Live preview as-you-type of mathematical equations.
No multi-documents tabs.

Qute

Qute

Opensource
Win + Mac + Linux
Zenware
Inline preview
Math support
No task list support

FoldingText

FoldingText

Commercial (free limited version available)
Mac
Inline preview (sourcecode mode only, cannot hide markup)
Automatic cumulative time computation from task description

TagSpaces

TagSpaces

OpenSource (AGPL v3)
Cross-platform (Windows, Mac, Linux, Android, Firefox, Chrome)
Inline preview
Documents manager
Tags

Note: this is a very interesting solution if you do not just want to write notes but also manage files.

Web-based apps with inline preview

Marko editor

Marko editor

Opensource (not released yet)
Win + Mac + Linux
Inline preview of Markdown + WYSIWYG

Vis-a-Wiki

Video Vis-a-Wiki

Opensource (not released yet)
Win + Mac + Linux
Inline preview of Markdown
Note-taking oriented (multi-documents)
Same author as Marko Editor (and same codebase)
Mix between a note taking app and a mind-mapping software, with automatic graph reorganization algorithms
Everything is stored as plain text

Personal note: this app seems goddamn amazing, but it is not yet available unluckily! Please reach the author if you are interested too!

Zim Desktop Wiki

Zim Desktop Wiki

Zim sourcecode repository

Disclaimer: the following review is a bit biased as I am regularly using this software.

Opensource (GPL2)
Win + Linux + Mac + BSD (runs on Python + GTK2, should be adaptable to any platform supported by GTK2)
Inline previewing (can type wiki markup code and it's styled on-the-fly) + WYSIWYG
Note-taking oriented (multi-documents)
Notes syntax and stored in hybrid DocuWiki/Markdown "lightweight" markup
Can export/copy snippet, single or all notes to standard Markdown
TOC navigation (plugin)
Very mature project (started in 2007, 9 years of development) and still active development (as of 2016)
Multi-documents tabs (with memorization of the order you opened them)
Autosaving per character (aka realtime autosaving)
Tags, pictures, can attach files alongside notes, calendar, etc.
Can copy/paste pictures from Paint or similar directly into a note (and can afterward resize) - such pictures will be stored inside your Zim notes folder
Clickable links
Remember last cursor position for every notes
LaTeX math formulas support (can be later edited by right-click)
Reorderable tables (markdown syntax) support

Also, lots of plugins, included natively in the app (take a look, they are all amazing, can even interface with GNOME's Zeitgeist, Lilypond music sheet, draw ASCII diagrams, etc)

Cons:

No Markdown support for storing the files (can only import/export to Markdown, but otherwise the notes are stored as Zim markup language).

/UPDATE: to get instant refresh for all markups (like bold, italic, etc.), you need to enable the option "Reformat wiki markup on the fly" in the Editing panel of Preferences.

Personal note: I am using Zim + Typora until something like Abricotine matures enough to be used for serious multi note taking

Collate

CollateNotes screenshot

Collate (aka CollateNotes) is a note manager with an integrated Markdown editor mixed with YAML to store metadata. It has live rendering and editing abilities.

Everything is stored on local computer.
Made with crossplatform compatibility as a requirement (Windows, Mac, Linux).
Supports syntax highlighting for most languages.
Support for Github Flavored Markdown
Clear file format specification: https://github.com/Collateapp/CollateFileFormat
Tags
Commercial software, free trial for 14 days.

Inline formatting/styling

The following editors won't provide a full Markdown inline preview, but they provide a prototype formatting/styling of your document. This allows you to somewhat know what your document will look like, even if some elements may not be correctly styled (or previewed at all like images). They also all provide a split-pane or a separated window for a full preview.

Note: inline styling is NOT just a simple regex in a code editor (such as Notepad++, SublimeText, Atom, etc.), because they cannot differenciate between different markup depths (eg, all headers levels are shown with the same styling), hence, they are excluded here.

CuteMarked

CuteMarked

Opensource
Win + Linux
TOC navigation

Springseed

Springseed

Opensource
Linux (+ Win in the future)
Note-taking oriented (multi-documents)
Preview when saving the document

Note: seems to be unmaintained since a few years now (the official website is dead, only the github remains).

TextNutWriter

TextNutWriter

Commercial
Mac
Sourcecode/preview switching + WYSIWYG

QOwnNotes

QOwnNotes

Opensource (GPL)
Win + Mac + Linux
Inline styling/formatting
Note-taking oriented (multi-documents)
Said to be an equivalent to Quiver
Multi-documents tabs
Support for encrypted notes
Make your ownCloud (+ web editor supports inline styling)
Support for versioning

Metanota

Metanota

Freeware (with ads) or commercial
Mac
Seems to support inline previewing
Note-taking oriented (multi-documents)

Web-based apps with inline styling/formatting

SimpleMDE

YodaNote

Video

Freeware
Win + Android
Purports to support Markdown, but I couldn't find how
Note-taking oriented (multi-documents)
Stores in HTML by default, not Markdown
  • 4
    Maybe you should have provided one answer per tool. Like that we'd be able to vote appropriately. So over time we'll find which application is better than another. Like it is now, I'd want to upvote 5 times and downvote 3 times, so what should I do? – Thomas Weller Mar 14 '16 at 19:24
  • @ThomasWeller Lol you're right, I'll see what I can do. – gaborous Mar 14 '16 at 21:23
  • 1
    @ThomasWeller I thought about it but I don't know then where to place the categories descriptions, and I think that having these categories clarifies a lot the different kinds of editors and their usage. Any advice? – gaborous Mar 14 '16 at 21:50
  • 2
    Epic answer! And unlike most of the answers here, it even successfully incorporates the requirement that the Markdown be rendered in the same pane as the input. Yeah, this format doesn't allow us to vote for individual editors, but it's still a very useful answer. – John Y Sep 27 '17 at 0:24
  • 1
    Hm. I still think this is a valuable answer, but I am noticing that some of the images don't really illustrate how the software meets even the "in-line prototype styling" requirement. In particular, GitBook Editor looks like its in-line styling is no better than "simple regex" like Atom, which you rejected. And the Springseed picture gives pretty much no information at all about previewing capabilities. Maybe it's time for another update? – John Y Sep 28 '17 at 21:39

MarkdownPad

It displays a live view on the right side. You can see a full list of features on the website.

Screenshto of MarkdownPad
Source: http://markdownpad.com/

Note

When starting MarkdownPad for the first time, it asks whether you want to buy the Pro version or use the free one. You can just click on "Use free" and it will never ask you again.

  • In any case, I deleted it very soon as trying it out. It's really really slow to respond. – SarahofGaia Aug 1 '15 at 0:13
  • 1
    Disappointment for me was it only supports "basic Markdown" – things like "Github flavored" or "Markdown Extra" are only available in the paid version (~USD 15 currently). – Izzy Jan 8 '16 at 10:35
  • 2
    @Izzy Every Windows markdown editor I tried supported basic Markdown only. When someone adds extra nice features for a little money, people complain as if software developers should offer all their labor for free. Must be some Linux user mentality expecting all software to be free. Btw, this is a Windows question. – Tony_Henrich Jan 6 '17 at 1:49
  • 1
    @Tony_Henrich see my answer recommending ReText. Supports MarkdownExtra, MathJax etc. and comes for free. – Izzy Jan 6 '17 at 9:28
  • Usually free open source apps are unpolished ganky apps. Sometimes with little and delayed support. The day when I need those features I will decide if it's worth the hassle to install Python, deal with such an app or just pay the $15 and get a commercial polished hand by hand supported app. It depends on one's tolerance and time cost. Thanks for the info. – Tony_Henrich Jan 7 '17 at 18:27

I'm using ReText for that. It's written in Python, so it should be cross-platform; in the project Wiki you can find detailed instructions on how to install ReText on Windows, as that's the platform you're using.

ReText does a great job for me on Linux. Supports a lot of "specific dialects" in addition to standard Markdown, like Michel Fortins Markdown Extra, MathJax, and many more. You can export your texts as HTML, ODT (Open Document Text, i.e. for OpenOffice/LibreOffice), PDF.

And: next to a "preview button", it also provides a Live Preview, side by side, while you're typing:

ReText with Live Preview
ReText with Live Preview (source: ReText; click image for larger variant)

I'm using this for a while now, and it's running stable, smooth, and fast. With support for mentioned "dialects" (I'm pretty sure I saw somewhere it also support the dialects in use here at SE, and the one from GitHub), I can only heartly recommend it to you!

Assuming your Windows OS has a browser, and you can find at least briefly a working Internet connection, you can use StackEdit

screenshot of StackEdit

StackEdit features:

  • Works offline - documents are saved in your browser's local storage, and can be opened from and saved to your local filesystem. Once loaded, the app's code is cached by your browser, and will open and work just fine with zero Internet connectivity.
  • Real-time preview
  • Support for standard Markdown
  • Support for Markdown Extra
  • Support for exporting documents as raw Markdown (text), HTML or PDF
  • Support for saving and synchronizing a document with Dropbox or Google Drive
  • Support for publishing a document to Blogger, Dropbox, Gist, GitHub, Google Drive, Tumblr, WordPress or any SSH server.

Not that while this does offer a live, synchronized preview rendering, and attempts to style the source based on the markup being edited, it does not allow editing of the preview itself - whether or not the styled editor is sufficient for your requirements I cannot say.

  • I've noticed that StackEdit doesn't support some HTML5 syntax. – SarahofGaia Jul 30 '15 at 17:49
  • Is there a portable version for Windows or is the only offline-capable version a Chrome app? – SarahofGaia Jul 30 '15 at 18:33
  • 1
    @SarahofGaia: this is the only version that's there. But your question made me think and I think you can make a standalone version using nw.js – Krumia Jul 31 '15 at 2:56
  • "But your question made me think" Lol glad to be of service. ;3 – SarahofGaia Aug 1 '15 at 0:07
  • Also, thanks for the link. But not only am I too inexperienced to work with something like that (it looks advanced, at least), and it's still in beta. As a general principle, unless I really want or need to use a programme, I don't use them if they're still in beta or prior. – SarahofGaia Aug 1 '15 at 0:09

Another alternative you can choose is Github Atom.

Since nobody mentioned it, I give you the alternative editor which I use every time when I am working on a project. Github Atom is not only Markdown editor but also like other editor — text editor — but, you can hack the core. Answering your question, this editor supports live preview what you write on Markdown. The live preview is called Markdown Preview, one of the packages is included by default on fresh Github Atom you install. See how it works below:

Github Atom UI

The example I show to you is some dummy texts on Markdown. The way you can get it is very simple: write your Markdown text and press Ctrl + Shift + M, then another pane will show the result even your live editing.

Github Atom is free and open source, available for Windows. You can download it here by downloading the executable file one. Feel free to ask if you have something to say.

I very strongly suspect there aren't any editors specifically like that.(edit: I stand corrected @Izzy) However with a bit of plugin and external software installation you can have SublimeText do that.

The result will look like this: http://yjyao.com/images/markmon.gif (from the author as I'm not going to be able to do better than that to show how good it is)

So the (unfortunately a little bit complicated) setup/install instructions: (These instructions are for windows, but it should also work on Mac, however, there will be a few differences - like you won't need the Windows SDK but you might need something else and stuff like that)

  1. Install SublimeText.
  2. Install Pandoc.
  3. Install Node.js.
  4. (You can try to step 5 without this from the normal cmd line and it may work depending on your installed tools/path) Install Windows SDK 7.1 . It'll work on any thing XP+. Windows SDK 8 won't work - doesn't include all the tools so you have to install that and a compiler. If you have the VS 2010 redistributables installed already try unchecking them in the installer for the Windows SDK - otherwise, you may have to uninstall them to be able to install this and then reinstall the newer version if you need to at some point.
  5. Install Node.JS package Markmon - best to just type in a the Windows SDK Build Environment cmd prompt npm install -g markmon.
  6. Install SublimeText PackageControl plugin.
  7. Install the SublimeText Markmon plugin. BUT NOT according to the instructions there as currently that won't work for Windows - hopefully it will soon (ie when my fork is merged). Instead, you'll have to [install from my fork] where I've fixed it to work on Windows. So you'll have to download that to your SublimeText Packages folder (usually C:\Users\[your username]\AppData\Roaming\Sublime Text 3\Packages). **My edits now merged so just follow the page's instruction and then in SublimeEdit go to Preferences->Package Settings->Markmon->Settings - User and edit the file to at least have this for settings:

    { "executable": "markmon.cmd", }

  8. Restart SublimeText and run Tools->Markmon->Launch

Rendered markdown will appear live as you edit it in SublimeText in a new browser window. You can position them side by side to make it work pretty good.

(Note: I had no previous connection to this project but to write up this answer I, of course, had to use it and then I discovered it didn't work on Windows so I have now forked it and submitted a pull request to fix that)

Texts does do it and is available for Windows and MacOs. http://www.texts.io

Text inline editing Screenshot

  • 3
    This is the only one that has inbuilt live viewer that I really want. Unfortunately its Markdown-processing is very sub-par and heavily customized for the app. You can't copy-paste stuff from here to this app and back without inconsistencies. – laggingreflex Aug 2 '14 at 15:15
  • There have since been a couple more answers that offer editors which render the Markdown in the same pane as the input, as you type. But yeah, almost all the answers miss this critical part of your question. – John Y Sep 27 '17 at 0:20

Haroopad is a cross-platform (Linux, OSX, Windows) Markdown editor GUI based on NodeJS that includes a live preview pane. In a lot of ways, it is similar to the Atom editor (in fact I suspect they share some node libraries) but the interface is tailored specifically for dealing with Markdown documents.

screenshot

The preview pane updates in nearly real time (although I don't think it's quite as responsive as some others I've tried) and does a good job of rendering Markdown as you would expect it to appear. You can choose from several style sheets for the preview or load your own CSS (e.g. you can load you site's CSS stylesheet so the preview looks exactly like the content will render is your site!).

The editor can also be styled using CSS, includes keybindings and optional auto-complete for common Markdown formatting, and has a full blown VIM mode for the truly savvy.

Optional Markdown parsing features include:

  • Github flavored markdown
  • Whether to parse inline HTML elements
  • "Smart" typographic features like quotes and dashes
  • Footnotes (would that SE included this!)
  • Mathjax/LaTex style expressions

The integration between the two works about like you'd expect with synchronized scroll of the preview while moving around in the editor. Extras include a sidebar with Markdown syntax hints and an insert menu for when you can't remember how something goes. Besides the usual saving in Markdown format, it can also export to HTML or send the rendered version of documents via email.

  • Just a few questions: (1) Is it lightweight? (2) Does it have a portable version? (3) Is it open-source? (4) You said it has "Smart" typographic features like quotes and dashes: does this mean it can use curly quotes? (5) And what do you mean by "smart" dashes: em/en dashes? – SarahofGaia Jul 30 '15 at 18:32
  • @SarahofGaia 2: none found. 3: claims to be(come), is hosted at Github. Smart dashes: auto-converts "--" (two "minus") to "–" (dash) in viewer. // What I strongly miss are tabs; Haroopad uses one window per file, unfortunately. – Izzy Jan 8 '16 at 10:33

Here's a new Markdown Editor for Windows to check out.

http://mike-ward.net/markdownedit

screen shot http://mike-ward.net/cdn/images/markdown-edit/markdown-edit-screenshot.png

It has a built-in preview as you requested plus most of the other features one would expect like:

  • as you type spell checking
  • full-screen mode
  • quick recent documents window
  • find and replace with regular expressions
  • keyboard shortcuts for common Markdown expressions
  • Themes
  • CommonMark (a proposed standard for Markdown)
  • Paste special replaces MS Word characters with plain text (quotes for instance)
  • Synchronized scrolling

Markdown Edit places the emphasis on content and keyboard shortcuts. Menus and status bars are minimal and subtle.

Full disclosure: I'm the developer

  • I'd like to commend you for stating that disclosure. It was a very honourable act. bows I respect that. :) – SarahofGaia Jul 30 '15 at 17:51
  • Just checked it out via the website: it looks great! But is there a portable version of this? :/ – SarahofGaia Jul 30 '15 at 18:36
  • I've never tried this but I think if you copy the folder (in App_Data/local) to a thumb drive it should work. The host computer still needs .Net installed however. – Mike Ward Jul 30 '15 at 19:02
  • Most modern forms of Windows have .net installed by default, right? Win7, 8, and 10? – SarahofGaia Jul 30 '15 at 19:28
  • Later versions yes. Earlier versions not so much. – Mike Ward Jul 30 '15 at 19:49

I've been asking this question for a long time now too. I use this: Pen -- what you see is what you get.

As you type, your text will be formatted

It's probably not as full-featured as other solutions, but I really appreciate that I can style in the same window. Hope this helps.

NOTE: It's a little buggy, not sure if it would fit your needs. But I do have to point out, it has potential.

There is a free Markdown Editor plugin for Eclipse that has a preview window:

Markdown Editor plugin UI

Markdown Notes would fit your needs. There is a live demo on the front page if you want to use it just as an editor. There are also some features such as image uploads and LaTeX support that are not available in every markdown editor.

Markdown Notes UI

  • Just checked out the website. This editor looks amazing! But my question is this: it doesn't look like it's anything more than a webapp; is this something I can use offline? Is there a installable or portable version of it? – SarahofGaia Jul 30 '15 at 18:50
  • Also, can you use it for using markdown on full-length documents or is it only best for notetaking? – SarahofGaia Jul 30 '15 at 18:50
  • 1
    It's strictly an online editor, but it can handle some pretty heavy documents. I used it to create lengthy, latex-heavy cheat sheets and it handles it pretty well. – Nicolas Bouliane Jul 31 '15 at 8:14
  • Aww man I really would love an offline one. Still, I might check it out on my Google Crapbook. ;P How's it stack up (see what I did there?) against Dillinger? – SarahofGaia Aug 1 '15 at 0:11

May I recommend Zerk.tk? It's extremely simple to use with just an editor and a viewer, nothing else. It has one export feature that exports directly to GitHub Gists. It's a web app but you could clone the repo to download it for offline use.

Zerk (Github Repo)

A simple markdown REPL, nothing more.

Fully in-browser with zero server-side processing.

Zerk UI

Note: I helped develop zerk

It's strange but there is no answer about great, free and open-source Visual Studio Code.

Visual Studio Code Window

VS Code supports highlighting, live preview, header folding, and other Markdown features (see an official description).

Moreover, there are plenty of markdown plugins that improve productivity: Code Spell Checker, MarkdownLint, Table Formatter, Markdown TOC and other.

  • 1
    This answer does not satisfy the requirement that the styling occurs directly in the editing area. That was pretty much the whole point of this question. It is true that most of the other answers here fail in the same way, so I can't really blame you for suggesting it. Still, I wish people would actually stick to the requirements if possible. – John Y Apr 20 at 16:47
  • @JohnY what exactly don't you like in my answer? You can edit it by yourself. – Ivan Kochurkin Apr 21 at 11:24
  • Your answer does not need editing. It is not a badly written answer. But your answer is a wrong answer because the software you are recommending does not do what the question is asking for. Most of the answers here are wrong for the same reason. – John Y Apr 21 at 22:00
  • I read the question title again. You are right, my answer does not correspond the header. Sorry, sprinkle my head with ashes. – Ivan Kochurkin Apr 22 at 18:48

StackEdit actually has an offline Chrome app as well, meaning it can be used as a cross platform Markdown editor. It's built on the same stuff as Stack Exchange, so the experience is similar to that.

If you're looking for something that integrates the Markdown output in the same pane, I'd look at Qute, which is a Markdown editor for Windows/Mac that lets you edit individual paragraphs as Markdown then switches them back to preview.

There's also a List of 78 Markdown editors that might have what you're looking for.

Microsoft Visual Studio has a plugin Web Essentials that provides markdown syntax highlighting and preview. It's a good choice if you're going to be slinging code along with your markdown.

On Windows 10 there is another alternative which is BookPad, you can find it in the Store. It is an offline markdown editor but supports a lot of the extra syntax. The out put is beautiful.

It has a price currently of $0.99

  • I just checked the price; it has gone up to $1.99. – John Y Dec 28 '17 at 23:12

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.