In this lesson, we improve the productivity of content editors by introducing component presets.

This is a lesson within the Next.js + Markdown tutorial. Following it requires completing all previous steps. If you're looking for more information on component presets, there are a number of resources to explore:

Understanding Content Presets

Presets are combinations of rich default values. They provide content editors with a visual and efficient means of pre-populating various permutations of components and pages.

In our example project, we have various content fields that can change both the style and layout of each section. For example, the hero component can have the image on the left with the default button.

Hero with image on left

But it can also have the image on the right and/or swap the button style.

Hero with image on right

As sites and their components grow more complex, presets come in handy because they provide a very specific starting point for a given component or page, enabling editors to work much faster.

Refer to the conceptual guide if you'd like to take a deeper look into presets.

Saving a Component as a Preset

Stackbit has a built-in method for storing a component as a preset. When highlighting a particular component, click the save as preset icon.

Save as preset trigger

Give the preset a name and add it to a group (you'll have to create the first group).

Save as preset modal

Preset Configuration Files

Presets are stored in configuration files within your site's repository in the .stackbit/presets directory.

When saving a component as a preset, Stackbit automatically writes a file in this directory, and even provides a thumbnail image of the component.

Take a look in the .stackbit/presets directory and open up the JSON file. You'll notice it is in a very similar shape to the YAML frontmatter in the markdown source file (content/pages/index.md).

{
  "model": "hero",
  "presets": [
    {
      "label": "Hero Image Right",
      "thumbnail": "images/hero-hero-image-right-cdc8.png",
      "metadata": {
        "categories": ["My Components"],
        "canDelete": true
      },
      "data": {
        "heading": "Can you make the perfect sandwich?",
        "body": "HandSandwich™️ is Central Southwestern Ohio's most highly attended sandwich-making class. Don't delay your ability to craft the perfect sandwich.\n",
        "image": {
          "src": "/images/fpo-sandwich.jpg",
          "alt": "Hero Sandwich",
          "$$type": "image"
        },
        "button": {
          "label": "Book Now",
          "url": "/",
          "theme": "outline",
          "$$type": "button"
        },
        "theme": "imgRight"
      }
    }
  ]
}

Creating a New Component from a Preset

Presets come into play when creating new pages or components. If you now try to add a hero component, you'll notice that you have an option to start from the new preset.

new component from preset

Adding Presets Manually

Because presets are driven by JSON files in the .stackbit/presets directory, you can add presets for any structured content, including pages.

Use the technical reference to ensure you're using the proper structure for the JSON object. You can also follow this guide, which walks through the process of creating a preset from scratch.