Front Matter is an integral Visual Studio Code extension that simplifies operating and managing your markdown articles. we have 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 among 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 create content management more straightforward, he began to develop the Front Matter extension and superimposed more options regularly, and eventually, it became a headless CMS that runs among 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

You do not ought to jump from tool to tool. simply use the one that you simply just like the most, that is, of course, Visual Studio Code.


Almost all of the Front Matter features are customizable by the extension of its settings. These settings ensure that you just will tweak it to your needs.


We recognize that now no longer each website is the same. That is why we permit you to upload your custom scripts. These scripts will display up as actions in our panel and will take your content material control to the next level.

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


Do you want to provide feedback about this page/content?

Provide feedback
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