Save as Preset

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 pages and components.

Eligible Objects#

Any page that can be reached via Stackbit's sitemap navigator can be stored as a preset. For components, only those that are selectable (annotated) and represented by a model can be stored as presets.

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.

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.

For pages, the icon looks the same, but is shown at the top of the page editor panel.

Fill in the appropriate details for the preset:

1. Label to describe the page or component variation
2. Category to group the preset with others. You can also create a new category. Note that presets will be automatically grouped by type. More on categories below.
3. Click Save.

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.

Creating Pages and Components from Presets#

When creating a component from a preset, you'll be able to choose from your saved presets, as well as any other presets developers and editors have saved.

If you want to know more about how presets work, see the feature guide.

Handling References#

When a component contains a reference field, how the reference is created depends on your configuration.

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 to the posts may be copied, not the posts themselves. This means that if you edit a post in the new post feed, that same post will be updated in the original post feed. Alternatively, references may be duplicated, which would create a new series of posts.

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 be 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.