Front Matter is an integral Visual Studio Code extension that simplifies operating and managing your markdown articles. We created the extension to support several static-site generators and frameworks parallel to Hugo, Jekyll, Hexo, NextJs, Gatsby, and more which provides you the power and control of a full-blown Content Management System (CMS)

The extension brings CMS capabilities straight to Visual Studio Code. For example, you can keep a list of the used tags, categories, create content, and so much more.

Welcome screen to configure your website

Our main extension features are:

  • Page dashboard in which you can get an overview of all of your markdown pages. You can use it to search, filter, type your contents.
  • Site preview within Visual Studio Code
  • SEO checks for title, description, and keywords
  • Support for custom actions/scripts
  • and many more

Site preview

Why Front Matter?

Initially, the Front Matter extension was created when Elio Struyf migrated from WordPress to Hugo (Static web site Generator). To make content management more straightforward, he began to develop the Front Matter extension and developed more options regularly, until eventually, it became a headless CMS that runs on Visual Studio Code.


We believe that Front Matter gives you the subsequent advantages:


It simply runs on your machine. There are no servers/websites/APIs involved in the process. Nothing can beat this.

Use it within Visual Studio Code

Don't jump from tool to tool. Use the tool that you like the most: of course, that's Visual Studio Code.


Almost all of the Front Matter features are customizable in its settings. These settings ensure that you can tweak Front Matter to your needs.


We recognize that each website is different. That is why you can upload your custom scripts. These scripts will display as actions in the Front Matter panel and take your content material control to the next level.

Example: Generate open graph preview image in Code with Front Matter


Last updated on

Did you spot an issue in our documentation, or want to contribute? Edit this page on Github!

Ready to get started?

Special thanks to our backers & sponsors

VercelBEJS Community