Save as Preset

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

Objects eligible for preset
Objects eligible for preset

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 for components
Save as preset for components

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

Save as preset for pages
Save as preset for pages

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.
Save as preset form
Save as preset form

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

Delete preset
Delete preset