Markdown preview with tables, task lists and images
Pipes, dashes and colons are enough to build a table in Markdown, and this Markdown preview draws it while you type. The source sits in the left panel, the rendered page in the right one. Use it to check a README draft, a changelog or a ticket comment before you paste it somewhere else. A counter above the panels shows the words and characters of your source.
Which syntax the preview renders
The page uses the library marked in GitHub-flavoured mode. It renders headings from level 1 to 6, bold, italic, ~~strikethrough~~, inline code, fenced code blocks, block quotes, ordered and unordered lists, nested lists, task lists, horizontal rules, links, images and tables. A bare address such as https://example.com becomes a link without brackets. Task lists show checkboxes that you cannot click.
One line break in the source gives one line break in the output. A blank line starts a new paragraph. A language label after the opening fence, such as js, is accepted, but the code gets no colours.
Writing a table: header row, delimiter row, colons
A table needs a header row and, under it, a delimiter row of dashes. Colons in the delimiter row set the alignment: :-- is left, :-: is centre and --: is right. The outer pipes are optional. Write \| when a cell must contain a pipe. Bold, italic, code and links work inside cells.
A row with too few cells gets empty cells at the end. Cells beyond the header are dropped. A table can follow a line of text directly, without a blank line. But a cell holds only one line of inline text: a list or a second paragraph does not fit, and a typed <br> shows as text. A wide table scrolls sideways inside the preview.
Using the two panels and the divider
- Type or paste Markdown into the "Markdown source" panel. The "Live preview" panel updates on every key press.
- Drag the divider between the panels with a mouse, a finger or a pen. A double-click resets it to 50/50. With the keyboard, focus the divider and press Left or Right (2 percent), Shift with an arrow (10 percent), Home, End or Enter (reset).
- Press "Large view" to fill the screen. The panel width stays as you set it.
- Press "Copy HTML" to copy the sanitized HTML body, or "Save as HTML" to download
document.htmlwith a small stylesheet that includes tables.
The width stays between 15 and 85 percent. The browser remembers it in local storage on this device. Below 860 px the panels stack and the divider is hidden.
Raw HTML, links and remote images
HTML that you type into the source is shown as text. It never runs. Links keep only these targets: http, https, mailto, #anchor and relative paths. Any other link loses its target.
Remote images are not loaded in the preview, because loading an image makes your browser contact the site that hosts it. A placeholder with the alt text takes their place. Turn on "Load remote images" to see them. Images embedded as data:image/png;base64, (also JPEG, GIF, WebP, AVIF) always show. The copied and saved HTML keeps every image tag with its address.
What is missing, and where your text goes
There is no syntax colouring, no footnotes, no maths, no emoji short codes such as :smile: and no front matter. A block between two --- lines shows as a rule and a heading. The two panels do not scroll together.
The libraries marked and dompurify load when the page opens. If loading fails, the preview shows a message. After that, your Markdown is converted in the browser and sent nowhere. You can check this in the network panel. The clipboard is used only when you press "Copy HTML", and a file is created only when you press "Save as HTML".
Frequently asked questions (FAQ)
| --- | --- |.