Markdown is plain text with a light sprinkling of punctuation that stands in for formatting: hashes for headings, asterisks for emphasis, hyphens for lists, backticks for code. It is what READMEs, issue trackers, documentation sites and static blogs are written in, because it stays readable as source and converts cleanly to HTML.
A previewer is useful for the cases where you are writing Markdown somewhere that will not show you the result. Editing a README in a plain editor, drafting a comment in a field with no preview tab, or checking that a nested list is indented deeply enough to actually nest, are all faster with the rendered output visible next to the source.
This tool shows three things at once: your source, the rendered result styled the way an article on this site is styled, and the generated HTML. That last panel is the reason to use this rather than any editor's built-in preview. When you need to paste real HTML into a template, a CMS field, or an email, having the markup available saves a conversion step, and it also shows you exactly what a heading or a code block actually produced.
The supported syntax covers the parts people actually use: headings, bold and italic, inline code and fenced code blocks, ordered and unordered lists including nesting, links, images, blockquotes, horizontal rules, and tables. HTML in the source is escaped rather than passed through, so a preview can never execute markup from whatever you pasted.