How to Preview Markdown With the CommonMark Demo

Markdown is a handy way to format a README, notes, or documentation using ordinary keyboard characters. But when a heading or link refuses to look right, staring at the punctuation only gets you so far. CommonMark’s browser demo lets you put the source beside a rendered preview and see what changed.

Quick answer: Open the CommonMark demo, replace its example with a small piece of Markdown, and compare the left-hand editor with the Preview pane. Use the HTML tab to inspect the generated markup. Copy your source into the place you actually intend to use it, then check the result there too.

Try a small example

1. Open the CommonMark demo in a browser. The page calls itself a “dingus,” which is simply the name used for this interactive demo.
2. Select the sample text in the left-hand editor and replace it with the example below. Keep the blank lines between the heading, paragraph, list, and link.
3. Look at Preview on the right. The heading should be larger, “water” bold, “jacket” italic, the two lines a bulleted list, and “Learn Markdown” a link.

# Weekend checklist

Pack **water** and a *jacket*.

- Check the forecast
- Charge the phone

[Learn Markdown](https://commonmark.org/help/)

We entered this sample in a desktop browser and watched the preview update. We also opened the HTML tab and saw the heading, emphasis, list and link represented as HTML. This is a small formatting test, not a test of every Markdown feature.

What those marks do

The # at the start makes a heading. Pairs of asterisks make **water** bold; single asterisks make *jacket* italic. Each - begins a list item. A link uses square brackets for its visible text and parentheses for its destination. The CommonMark reference has more examples, including numbered lists and code blocks.

If the output looks wrong, check that the heading and list markers have a space after them, that the asterisks occur on both sides of the intended text, and that the link has both brackets and parentheses. Blank lines make the separate blocks in this example easier to recognize.

Check the destination before calling it done

Markdown implementations can differ. A result in this CommonMark demo is useful feedback, but it doesn’t guarantee that every app or site will render the same source identically. Paste your text into the destination and inspect its own preview before publishing or sharing. If you’re working on a web page, our HTML checker guide covers a separate validation step.

Use fictional or non-sensitive material while experimenting with an online tool, and keep a copy of work you care about in your own editor. We did not test account features, permanent storage, mobile browsers, or every destination.

How we checked: TRT entered the fictional checklist in the live CommonMark demo on desktop, inspected Preview, and opened the HTML tab. The example is illustrative, not a promise that another Markdown editor behaves identically.