Tailwind Resources Logo Tailwind Resources
Vscode Front Matter screenshot

Vscode Front Matter

Author Avatar Theme by Estruyf
Updated: 16 Apr 2025
2213 Stars

Front Matter is a CMS running straight in Visual Studio Code. Can be used with static site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...

Github Live Preview

Categories

React Headless ui

Overview

Front Matter is a CMS (Content Management System) that operates within Visual Studio Code. It offers the functionality and control of a comprehensive CMS, with the flexibility and speed of a static site generator. With Front Matter, users can easily edit and create content, preview it within VS Code, and perform various management tasks such as search, filtering, sorting, and more. The extension supports multiple static-site generators and frameworks like Hugo, Jekyll, Hexo, NextJs, Gatsby, and others.

Features

  • Content, data, and media management: Easily manage your content, data, and media files within VS Code.
  • Search, filter, sort: Perform powerful search, filter, and sort operations on your content.
  • Create new content: Quickly create new content files, saving you time and effort.
  • Supporting tools to edit content and media: Access useful tools for editing your content and media files.
  • Preview your site/content straight in Visual Studio Code: View a live preview of your site or content directly within VS Code.
  • SEO checks for title, description, and keywords: Ensure your content meets SEO best practices with built-in checks.
  • Extensibility: Extend the functionality of Front Matter to suit your specific use cases.

Installation

To install Front Matter, you have the following options:

  • VS Code Marketplace: Visit the Front Matter page on the VS Code Marketplace and click “Install” to add the extension to your VS Code.
  • Extension CLI: Use the VS Code CLI and run the command ext install eliostruyf.vscode-front-matter to install Front Matter.
  • Manual installation: Open VS Code, go to the Extensions menu, search for “Front Matter” and click “Install”.

For detailed installation instructions and further information, you can refer to the Front Matter documentation.

Summary

Front Matter is a powerful CMS that integrates seamlessly with Visual Studio Code, providing users with a comprehensive set of features for managing and editing content, as well as previewing sites or content within the IDE. With support for various static-site generators and frameworks, Front Matter offers flexibility and extensibility to meet different use case requirements. Whether you need to create, organize, search, or enhance your content, Front Matter simplifies the workflow and provides a cohesive solution within the familiar VS Code environment.