Content Model

What is Content Model, and why do I need one?

The content model describes the structure of your website's content. Stackbit uses your website's content model to allow you to edit your site's content within the site preview.

For example, assume your site's blog posts are stored in markdown files with three fields in the frontmatter - "title", "image" and "tags", and with the post content in the body of the markdown file like this:

---
title: "Content Model"
image: "/images/content-model.png"
tags: ["jamstack", "stackbit", "content-model"]
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Subheader

Consequat id porta nibh venenatis cras sed felis eget.
Dui ut ornare lectus sit amet est placerat in egestas.

The content model of the blog post would describe the names and types of blog post fields:

By knowing your site's content model, Stackbit can provide an "on-page" editing experience without any additional changes to your site's code.

Of course, the names and the types of post fields are the bare minimum your content model should have. Depending on the CMS you use, you can also specify the field labels, descriptions, validation rules, and other aspects of your content model.

Your site's content doesn't have to be stored in files. If your site is powered by an API-based CMS, your content and the content model are stored within the CMS. In this case, Stackbit will use the content and the content model defined within the CMS.

As noted above, there are two ways for Stackbit to get your site's content model - from an external CMS or from stackbit.yaml. The next section explains these two concepts.

External Content Model

File-Based CMS

If your site uses file-based CMS, then your site's content model should be defined in CMS specific configuration files. Stackbit will read these configuration files and get the content-model from there. So you won't need to define the content model in stackbit.yaml, but only specify which CMS you use.

For example, if your site uses NetlifyCMS as its CMS, your content model is defined within the NetlifyCMS's config.yml file. Stackbit will read NetlifyCMS configuration and use the content model from there.

API-Based CMS

If your site uses API-based CMS, then your site's content model is defined within that CMS. Stackbit will fetch the content model via CMS API.

For example, if your site uses Contentful, the content model is defined within Contentful. Stackbit will fetch the content model via Contentful API.

Stackbit Content Model

If your project does not use any headless-CMS and stores the content in plain files (.md, .json, .yaml, etc.), you can define your site's content models in stackbit.yaml using Models and Fields.

You can create and edit your Stackbit Content Model using the Content Model screen in the Stackbit Studio.

Continuing the previous example, the post's model in stackbit.yaml could be defined in the following way:

post:
  type: page
  label: Blog Post         # label shown besides posts in the Stackbit editor
  folder: "/blog"          # the folder where all post files are stored
  urlPath: "/blog/{slug}"  # the url of each post, the {slug} is file name
  fields:
    - type: string
      name: title
      label: Title
      required: true
    - type: image
      name: image
      label: Featured Image
    - type: list
      name: tags
      label: Tag List
      items:
        type: string