---
title: Introduction
slug: ''
description: Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.
date: '2021-08-30T16:13:00.546Z'
lastmod: '2021-08-30T16:13:01.763Z'
weight: 1
---

# Introduction

Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.

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

![Welcome screen](/assets/welcome-progress.png)

Our main extension features are:

- Page dashboard where you can get an overview of all your markdown pages. You can use it to search, filter, sort 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](/assets/site-preview.png)

## Why Front Matter?

Initially, the Front Matter extension was created when [Elio Struyf](https://twitter.com/eliostruyf) migrated from WordPress to Hugo (Static Site Generator). To make content management more straightforward, he started to develop the Front Matter extension. He added more features regularly, and eventually, it became a headless CMS that runs within Visual Studio Code.

## Advantages

We believe that Front Matter gives you the following advantages:

### Speed

It just 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 need to jump from tool to tool. Just use the one that you like the most, which is, of course, Visual Studio Code.

### Customizable

Almost all of the Front Matter features are customizable by the extension of its settings. These settings make sure that you can tweak it to your needs.

### Extensibility

We know that not every site is the same. That is why we allow you to add your custom scripts. These scripts will show up as actions in our panel and could take your content management to the next level. 

> **Example**: [Generate open graph preview image in Code with Front Matter](https://www.eliostruyf.com/generate-open-graph-preview-image-code-front-matter/)