Component Presets for Files Source

Boost content editing productivity by introducing component presets into your project.

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 right with the default button.

Hero with Image on Right
Hero with Image on Right

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

Hero with Image on Left
Hero with Image on Left

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 feature 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 Button
Save as Preset Button

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

Save as Preset Modal
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).

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
{
  "model": "hero",
  "srcType": "git",
  "srcProjectId": "git_project",
  "presets": [
    {
      "label": "Hero Image Right",
      "thumbnail": "images/hero-hero-image-right-4c43.png",
      "metadata": {
        "categories": ["My Components"],
        "canDelete": true
      },
      "data": {
        "heading": "This is amazing!!",
        "body": "And a super compelling supporting paragraph that makes the user immediately want to click the button below.\n",
        "image": {
          "src": "/images/fpo-shapes.png",
          "alt": "Stackbit Shapes",
          "$$type": "image"
        },
        "button": {
          "label": "Get Started",
          "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
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 feature guide for more information.