Component Presets for Contentful

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

You can think of content presets as default values on steroids. 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 outlined 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 Trigger
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
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 see that it represents all the content for that section, including the embedded button entry with its ID value.

  • 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
{
  "model": "hero",
  "srcType": "contentful",
  "srcProjectId": "6pj5epr6vowr",
  "presets": [
    {
      "label": "Hero Image Right",
      "thumbnail": "images/hero-hero-image-right-5ad6.png",
      "metadata": {
        "categories": ["My Components"],
        "canDelete": true
      },
      "data": {
        "heading": "World's Best Cup of Coffee",
        "body": "And a super compelling supporting paragraph (fetched from Contentful) that makes the user immediately want to click the button below.",
        "image": {
          "$$ref": "o1G1j1B3fpZyVGa33M1zJ"
        },
        "button": {
          "$$ref": "36U7omnF7aFEHjVKwEhJI7"
        },
        "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

See below for more information on what happens with the embedded button component when creating a new component from a 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.

Handling Preset References

Because all content that is embedded in an object is an entry in Contentful, Stackbit needs to know how to handle the entry when creating a new entry.

In our example above, if we create a new hero component from this preset, it would use the existing button as its button.

This may not be your desired behavior. You may want a new button created when adding a new hero. To do that, you can set presetReferenceBehavior to duplicateContents in your configuration file.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • +
  • 19
import { ContentfulContentSource } from '@stackbit/cms-contentful'

export default {
  stackbitVersion: '~0.6.0',
  ssgName: 'nextjs',
  nodeVersion: '16',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID,
      environment: process.env.CONTENTFUL_ENVIRONMENT,
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
    }),
  ],
  models: {
    page: { type: 'page', urlPath: '/{slug}' },
  },
  presetReferenceBehavior: 'duplicateContents',
}

Now when you add a new hero component using the preset, you will also end up with a new button entry in contentful. Learn more about how presets work with Contentful.