Save as Preset

Create reusable component variations with the save as preset feature.

Presets enable you to create reusable pieces of content for your site. This helps speed up the editing process by providing a content-rich starting point for new sections and components on your site's pages.

Saving New Presets

To save a component as a preset, select it by clicking on it in the visual editor and then choosing the Save as preset icon.

Save as preset icon
Save as preset icon

Give the preset a name (1), add it to an existing category or create a new category (2), and click Save. (More on categories below.)

Save as preset form
Save as preset form

Eligible Objects

Any object on the page that is represented by a data model can be saved as a preset.

For example, in our minimal starter, the card grid component is available as a preset (1), along with the cards inside (2), which are sub-components of the card grid. But the heading and subheading (3) can not be stored independently, as they are simply content values applied directly to the card grid.

Objects eligible for preset
Objects eligible for preset

Preset Categories

Categories provide a means for you to organize your presets however you would prefer. You can create new categories when creating new presets.

These categories are then surfaced when creating a component from a preset.

Saved preset categories
Saved preset categories

Creating New Components from Presets

As shown above, when creating a component from a preset, you'll be able to choose from your saved presets, as well as any other presets developers have stored in the .stackbit/presets directory.

If you want to know more about the structure of the preset configuration files, read the API reference.

Handling References

When a component contains a reference field, note that the references are copied.

For example, consider a post feed component that has a list of referenced blog posts. When creating a new post feed from a preset, the references are copied, not the posts. This means that if you edit a post in the new post feed, that same post will be updated in the original post feed.

API-Based References

Some API content sources (e.g. Contentful) don't allow for embedded objects and treat every embedded model as a reference. In this case, you can control how Stackbit handles references globally in your project configuration.

Editing Presets

Presets can not edited through the visual editor. Unless you want to write code, the easiest thing to do is to:

  1. Create a component from the saved preset
  2. Adjust necessary values
  3. Delete the existing preset (see below)
  4. Save a new preset with the adjusted content

If you want to edit directly instead, see the API reference to learn about preset files and their structure.

Deleting Presets

Not all presets are able to be deleted. If a preset can be deleted, there will be a trash can icon when you hover on the preset in the new preset menu.

Delete preset
Delete preset

Storing Pages as Presets

Entire pages can be saved as a preset, too, but it requires writing code. Learn more here.