Markdown editor for Windows with live rendering in the editing pane, NOT in a separate preview pane

Question

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.

Answer 1

Last update: 2023-05-06

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 realtime/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 (aka realtime preview or WYSIWYG)

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.

MarkText

Opensource
Cross-platform (Windows + MacOSX + Linux)
Inline preview
Mouse-friendly interface (easy to insert a markdown construct from menus, or by click at the beginning of the line, or by highlighting a text, options are then displayed)
Math support (LaTeX)
Sourcecode mode
Support for a lot of markdown constructs: tasks, code blocks, HTML block, 
Export to HTML, PDF
Focus and typewriter modes
Table of content
Integrated search
Multi-tabs, multi-documents
Support for images, but not for embedded videos
Support for complex constructs, such as graphs, such as vega-lite, or mermaid
Basic autosave support (check File > Autosave). Currently working on a full session manager with more advanced autosave.
Basic support for attachments (either in a folder defined by user, or transparently uploaded to an online repository)

Note: this project is in very active development and already has a big community. It is a personal favorite, it managed to catch up with older editors in terms of features (or even surpass them).

Zettlr

Opensource
Cross-platform (Windows + MacOSX + Linux)
Inline preview (but mixing both rendered and some unrendered but dimmed down markdown formatting, eg, bold and italics)
No sourcecode mode (but there is a readability mode to highlight non-markup text content)
Full note manager, multi-tabs
Attachments support
Bibliography and citation support
Footnotes support
Tables support
Tasks support
Table of content
Mathematical equation support (LaTeX)
Lots of importing and exporting formats: HTML, PDF, DOCX, LaTeX (great for scientific collaborations!)
Code blocks with syntax highlighting
Search (and replace) function integrated
Statistics graphs
Autosave (any change is saved)
Notebook paradigm: you select a folder, and all your notes will be stored inside. It is thus easy to have multiple notebooks and switch between them.
Tags
Fully localized in lots of languages

Note: this software was initially made for scientists, hence the extensive support for attachments, bibliography and footnotes. The extensive import/export from/to LaTeX and DOCX is a killer feature for researchers which can ease collaborations. In the end, we could say it's the Markdown equivalent of Zim Desktop Wiki, they are very similar in their philosophy and feature set.

Texts

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

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

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

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

FoldingText

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

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

• Lexical by FaceBook, a very extensible framework for rich-text editors that supports Markdown syntax and can export/render to Markdown on-the-fly via a native plugin, although internally it uses its own markup. It can be easily extended in terms of functionalities or to support more languages.
• ProseMirror Markdown WYSIWYG editor
• laobubu/HyperMD: A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
• Hallo.js - Editing Markdown in WYSIWYG
• pell - jaredreich.com
• Alex-D/Trumbowyg: A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)
• Etherpad with ep_markdown and ep_markdownify plugins (plus it allows for collaborative edition, lots of other plugins here)
• Marklight Editor
• Pen
• Medium editor with the Medium Editor Markdown extension
• CKEditor with Markdown plugin - but note the plugin only supports a limited subset of Markdown markup.
• md-wysiwyg (in Python!)
• Simditor with Markdown extension (or this one).
• DIY tutorial using contentEditable property of div and MutationObserver (mirror here)

Marko editor

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

Vis-a-Wiki

Video

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 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). Here are a few I advise:

• Support for multi-users editing or cloud storage (dropbox etc) with 3-way diff (automatic and manual) with this PR.
• Support for bibliography and citation with the zim-zotero plugin.

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 2020: there is now a markdown-zim bidirectional converter: [markdown2zim][33]. This can be used to migrate to/from other markdown editors.

/UPDATE 2018: 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* - UPDATE: I now use Zim + MarkText, and I may migrate to Zettlr.

Collate

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.

Writer Plus (WriterP)

Freeware
Android
Stores each note as its own .md file directly in a Writer folder at the root of SD card (ease backups)
Easy to share notes by email (either directly as the email text content, or as attachment)
Probably a sequel to [Writer](https://play.google.com/store/apps/details?id=com.jamesmc.writer&hl=fr)

Note: I used this to replace ColorNotes, which stores notes in a database that is difficult to access and is prone to data loss. I use this one since years now instead and never lost a note since I back them up along with photos and other materials regularly.

iA Writer

Commercial
Cross-platform (Windows, Mac, Android, iOS)
Synchronization between devices

Note: it looks to me to be similar to Writer Plus, if I was using an iPhone or iPad, this is probably what I would be using.

Mou (archive.org)

Commercial
MacOSX

CuteMarked

Opensource
Win + Linux
TOC navigation

Note: Seems like this software is not maintained anymore.

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

Commercial
Mac
Sourcecode/preview switching + WYSIWYG

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

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

Web-based apps with inline styling/formatting

• TOASTUI.editor, a new kid in the block, WYSIWYG editor with CommonMark and GithubFlavoredMarkdown support, and also copy-paste from external spreadsheets and images. If you are a JS developer, feel free to help!
• 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

Answer 2

MarkdownPad

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

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.

Answer 3

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 (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!

Answer 4

Assuming your Windows OS has a browser, and you can find at least briefly a working Internet connection, you can use 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.

Answer 5

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:

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.

Answer 6

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

Answer 7

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: (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)

Answer 8

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.

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.

Answer 9

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

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.

Answer 10

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

http://mike-ward.net/markdownedit

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

Answer 11

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

Answer 12

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.

Answer 13

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

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.

Answer 14

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.

Answer 15

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.

Answer 16

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.

Note: I helped develop zerk

Answer 17

I found one which is nice, but does not add things like:

:warning: as emojis

name: zettlr

Answer 18

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