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.
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.)
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.
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 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:
- Create a component from the saved preset
- Adjust necessary values
- Delete the existing preset (see below)
- 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 next to the name in the thumbnail image on the new component modal.
Storing Pages as Presets
Entire pages can be saved as a preset, too, but it requires writing code. Learn more here.