Presets are a powerful Stackbit concept that enable content editors to work quickly by providing reusable content variations for components or pages.

In this lesson, we're going to create a preset for our post feed component to show how we can easily duplicate the instance of the post feed on the home page.

In this lesson:

  • Preset configuration
  • Preset thumbnail images

Configure Post Feed Preset

Presets are defined in JSON configuration files within the .stackbit/presets directory. Each file can define a series of presets for one particular model.

Add the preset config file for our post feed component with the following content.

// .stackbit/presets/PostFeed.json

{
  "model": "PostFeed",
  "presets": [
    {
      "label": "Most Recent Posts",
      "data": {
        "heading": "Recent Posts",
        "subheading": "Here is a list of recent posts.",
        "styles": {
          "self": {
            "padding": {
              "top": "32",
              "bottom": "32"
            }
          },
          "heading": {
            "margin": {
              "bottom": "32"
            }
          }
        }
      }
    }
  ]
}

There are only two properties here:

  • model: The name of the model.
  • presets: An array of presets.

Each preset gets a label and data object. Everything within data is what gets stored to the content source when the preset is chosen.

Notice that we're using that same data that we used in previous lessons when adding the page feed component to the home page.

Add Thumbnail to Preset

Aside from label and data, you can also provide a thumbnail property to the preset.

Take a screenshot of the component on your home page. Name the file something recognizable (e.g. post-feed-default.png) and put it in a .stackbit/presets/images directory.

Then add a thumbnail property in the preset, pointing to that file.

// .stackbit/presets/PostFeed.json

{
  "model": "PostFeed",
  "presets": [
    {
      "label": "Most Recent Posts",
      "thumbnail": "images/post-feed-default.png",
      "data": {
        // ...
      }
    }
  ]
}

Add New Post Feed Component to Home Page

When you try to add a new component to the home page, you'll now notice that you have a preset available for the post feed component.

post feed preset

Select that preset, then choose Add, and you'll see a component with the heading and subheading set in the preset config.

Post feed component with preset values

Additional Resources

This was a super quick look at presets. As your project becomes more complex, these can be a turnkey method for content editors to build new pages quickly. And presets can be used for whole pages, too!

Here are a few guides to go deeper with presets: