How to Use Front Matter CMS with Astro

What is Front Matter CMS?

Front Matter CMS is a VS Code extension that turns your editor into a full-featured Content Management System. Instead of paying for Contentful, Sanity, or another cloud CMS, you manage all your blog posts and MDX content right inside VS Code — with a beautiful dashboard panel, live preview, image picker, and field forms derived directly from your frontmatter schema.

It’s genuinely one of the best-kept secrets in the Astro ecosystem.

Key benefit: Your content stays in your Git repository as plain MDX files. No API calls, no vendor lock-in, no SaaS subscriptions.

Step 1: Install the Extension

Open VS Code and search for “Front Matter CMS” in the Extensions panel (or press Ctrl+Shift+X), then click Install.

Alternatively, install it directly from the command palette:

code --install-extension eliostruyf.vscode-front-matter

Once installed you’ll see a 📄 Front Matter icon appear in the VS Code Activity Bar on the left.

Step 2: Open the Dashboard

Click the Front Matter icon in the Activity Bar. The first time you open it, you’ll see an empty dashboard. Click Initialize Project and select Astro as your framework.

This automatically detects your src/content/ folder structure and generates a basic frontmatter.json config file in your .vscode/ directory.

Step 3: Understanding the Configuration File

The heart of Front Matter CMS is .vscode/frontmatter.json. Let’s look at the key settings for an Astro + MDX project:

{
"$schema": "https://frontmatter.codes/frontmatter.schema.json",
"frontMatter.framework.id": "astro",
"frontMatter.framework.startCommand": "npm run dev",

"frontMatter.content.pageFolders": [
  {
    "title": "Posts",
    "path": "[[workspace]]/src/content/posts",
    "contentTypes": ["post"]
  }
],

"frontMatter.preview.host": "http://localhost:4321"
}

Step 4: Define Your Content Type (Schema)

This is where you map your Zod schema to CMS form fields. Each field in frontMatter.taxonomy.contentTypes generates a UI control in the editor panel:

{
"frontMatter.taxonomy.contentTypes": [
  {
    "name": "post",
    "fileType": "mdx",
    "fields": [
      { "name": "title",       "type": "string",   "required": true },
      { "name": "description", "type": "string",   "required": true },
      { "name": "pubDate",     "type": "datetime", "default": "{{now}}", "isPublishDate": true },
      { "name": "heroImage",   "type": "image",    "isPreviewImage": true },
      {
        "name": "category",
        "type": "choice",
        "choices": ["Tutorials", "Projects", "DevOps", "Tools"],
        "required": true
      },
      { "name": "draft",  "type": "draft" },
      { "name": "tags",   "type": "tags"  }
    ]
  }
]
}

The type values map to intuitive UI widgets:

• string → Single-line text input
• datetime → A date picker (with {{now}} as a default)
• image → Opens your /public image picker
• choice → A dropdown menu from a predefined list
• draft → A prominent draft/publish toggle switch
• tags → A tag autocomplete input

Step 5: Creating a New Post

With the CMS configured, creating a post is a point-and-click operation:

1. Open the Front Matter panel (📄 icon in the Activity Bar)
2. Click “New content” in the dashboard
3. Enter a title — the slug is auto-generated using {{slugify title}}
4. Fill in the fields in the right-hand panel
5. Write your MDX body in the editor

The extension writes the frontmatter block for you automatically:

---
title: "My Awesome Post"
description: "A short summary of the post"
pubDate: 2026-04-20
heroImage: https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1200&q=80
category: Tutorials
tags:
- astro
- mdx
draft: false
---

Step 6: Using Custom Component Snippets

Front Matter CMS supports Snippets — reusable template blocks you can insert with a single click. This project ships with two pre-configured snippets for the custom MDX components:

YouTube Embed

Click Snippets → YouTube Embed in the panel, enter the video ID, and it inserts:

<YouTubeEmbed id="dQw4w9WgXcQ" title="My Video Title" />

You can embed any YouTube video inline:

Code Snippet Component

Similarly, the Code Snippet snippet wraps Shiki-highlighted code:

<CodeSnippet lang="javascript" code={`console.log('Hello, World!')`} />

Step 7: Git Integration

When you save a post, Front Matter CMS can automatically stage and commit the file to Git. Enable it in frontmatter.json:

{
"frontMatter.git.enabled": true,
"frontMatter.git.commitMessage": "feat(content): {{title}}"
}

The {{title}} placeholder is replaced with the actual post title, giving you clean, descriptive commit messages like:

feat(content): How to Use Front Matter CMS with Astro

Step 8: Live Preview

With frontMatter.preview.host set to http://localhost:4321, you get a split-view preview directly inside VS Code:

1. Start your dev server: npm run dev
2. Open a post file
3. Click the “Open preview” button (👁 icon) in the Front Matter panel
4. A live iframe loads the rendered post alongside your editor

Anytime you save, the preview refreshes automatically.

Tips for the Best Experience

Summary

Front Matter CMS transforms your local Astro workflow into a polished editorial experience without ever leaving VS Code. Combined with the Zod schema in src/content.config.ts, every post is type-safe, correctly structured, and Git-tracked from day one.

The full setup for this project:

• ✅ Content type post with 7 fields
• ✅ Dropdown categories (no typos)
• ✅ Auto-slug from title
• ✅ Live preview at localhost:4321
• ✅ Git commit on save
• ✅ Snippets for YouTubeEmbed and CodeSnippet

Happy writing! 🚀