What it does

Markdown Front Matter Preview is a small client-side workspace for validating content that starts with YAML front matter.

It splits the document into two concerns:

• the raw source blob you edit
• the preview column that shows parsed YAML first and rendered Markdown second

The workspace is designed for quick validation loops: paste, edit, inspect the metadata shape, and copy the rendered output in the format you need.

How to use it

• Open: https://tedt.org/tools/markdown-frontmatter-preview.html
• Paste a document that starts with ---, includes YAML front matter, and then closes with another --- line.
• Edit the source on the left.
• Watch the raw text line count update as you type.
• Watch the preview update on the right.
• Expand the YAML section only when you want to inspect metadata in detail.

Screenshots

Notes

• If no front matter fence is detected, the tool renders the whole blob as Markdown.
• If the opening fence exists but the closing fence is missing, the tool stops and shows the fence error clearly.
• YAML parsing uses js-yaml, and Markdown rendering uses marked, both loaded in-browser.
• The last edited document and the YAML panel open/closed state are remembered in browser storage, with a cookie fallback.
• Clipboard actions include source copy, HTML copy, rich text copy, and styled rich text copy where the browser context allows it.