Frontmatter Editor

Visual YAML frontmatter editor for Markdown and MDX

Parse, edit, and serialize the YAML metadata block at the top of any Markdown or MDX file. Per-field types, presets for Next.js, Astro, Hugo, Jekyll, and Docusaurus, and a clean round-trip — all in your browser.

Open the editor TOC generator Reading time

Original document

Click Re-parse input to load this document's frontmatter into the editor below.

Body (after frontmatter)

Frontmatter fields (5)

Assembled output

---
title: Hello World
date: "2026-05-10"
draft: false
tags: ["intro", "hello"]
description: My first post.
---

# Hello

Welcome to my blog.

How to use the frontmatter editor

Paste a Markdown document with YAML frontmatter, or open a file with the picker.
Click Re-parse input to load the frontmatter into the editable rows below.
Add, remove, and edit fields. Each row has a key, type, and value. Switching the type changes how the value is serialized — quoted strings, raw numbers, lowercase booleans, or inline arrays.
Edit the body on the right pane independently.
Copy or download the assembled document.

Why frontmatter matters

In a static-site pipeline, the same file does two jobs:

The body is rendered as the page content.
The frontmatter drives layout, listing order, SEO meta tags, RSS entries, and navigation hierarchies.

Misspell description and your SEO description disappears. Forget a date and your blog index breaks. Set a string where a boolean was expected and your build fails. A typed visual editor catches these before commit.

Quick-start presets

Preset	Best for
Next.js / MDX	App-router or Pages-router blogs
Astro	Astro content collections
Hugo	Hugo + theme-driven sites
Jekyll	GitHub Pages, classic Jekyll
Docusaurus	Docusaurus v2 / v3 doc pages

Click the dropdown to drop in a baseline. Then customize.

Common frontmatter fields

Field	Purpose
`title`	Page title — used for `<title>`, og:title, and listing headings.
`description`	SEO + og:description; usually 150–160 chars.
`date`	Publish date — drives sort order and `<time>` markup.
`draft`	Skip from production builds.
`tags`	Array of keywords; powers tag indexes.
`author`	Single author or array.
`image`	Cover image path for og:image and listing thumbnails.
`canonical`	Override the canonical URL when republishing.

Tips

Keep dates in ISO format (YYYY-MM-DD or full RFC 3339). Different SSGs parse other formats inconsistently.
Always quote values containing colons or hashes — the editor handles this for you automatically.
Use lowercase booleans (true / false) — YAML is case-sensitive.
Prefer flat structures. Nested frontmatter looks clean but every SSG handles it differently.

Companion tools

Markdown Editor — write the body with live preview.
Markdown TOC Generator — build the in-page TOC after editing frontmatter.
Markdown Heading Audit — confirm the outline is valid.

Privacy & data

The editor runs entirely in your browser. We don't upload, log, or store your content.

Frequently asked questions

What is Markdown frontmatter?

Frontmatter is a small block of metadata at the top of a Markdown file, delimited by `---` on either side. It typically uses YAML syntax and carries fields like title, date, tags, draft status, and SEO description. Static-site generators (Next.js MDX, Astro, Hugo, Jekyll, Docusaurus, 11ty) read this metadata to power layouts, listings, and feeds.

Which formats are supported?

The editor parses YAML frontmatter with strings, numbers, booleans, and simple inline arrays (`tags: [a, b]`). Complex nested structures aren't supported — keep your frontmatter flat for compatibility with most static-site generators.

Why edit frontmatter here instead of in my editor?

Three reasons: (1) instant type checking — you choose the type per field so you can't accidentally serialize a number as a string; (2) presets — drop in Astro / Hugo / Jekyll / Docusaurus baselines in one click; (3) the assembled output round-trips cleanly through the parser, so quoting and escaping are handled for you.

Will it preserve my body content?

Yes. The body editor on the right shows everything after the closing `---`. Edit it freely; the assembled output combines your frontmatter and body with consistent spacing.

What about TOML frontmatter?

Some Hugo setups use `+++` TOML frontmatter. This editor focuses on YAML which is the most widely supported format. If you're on TOML Hugo, you can keep the same fields here and switch the delimiters manually after export.

Is my document uploaded?

No. Parsing, editing, and serialization happen entirely in your browser. Nothing leaves the tab.