This guide walks through how you can use an existing page to create a preset that can be used as a starting point for new pages.

This process requires working with your site's code. Content editors also have the ability to save presets, but only at the component level. Learn more about saving component presets.

Copy Existing Content

The first thing to do is to build a page that you'd like to use as your preset.

Once this is in place, open the code editor (lefthand sidebar). Then select any content on the page in the preview panel and click the content icon. This will open the content file for that page.

Jump to content file

Convert YAML Content to JSON

If your content is already stored as JSON, you can skip this step.

Preset configuration files are written in JSON, while content files are typically stored as markdown frontmatter (YAML).

Copy the content of your file and convert it to JSON. You can do this with any YAML-to-JSON converter, like this one.

Add Preset File

Before moving on, look to see if there is already a preset file for the page model you're working with. If there is, you can move on to the next step. If you aren't sure, read the rest of this step to know how to identify the proper preset file.

Create a JSON file in .stackbit/presets to represent your page model. Our convention is to use the lowercased and hyphenated name of the model as the filename. Example: If the model is PageLayout, the file path would be .stackbit/presets/page-layout.json.

Begin with the basic shape for this preset configuration (replace ModelName with the name of your page model):

{
  "model": "ModelName",
  "presets": []
}

See here for the full preset reference.

Add Preset Configuration

Once you have your preset config file and your content in JSON format, create a new preset object in the preset config file (replace My Preset Example with a name for this preset):

{
  "model": "ModelName",
  "presets": [
    {
      "label": "My Preset Example",
      "data": {
        // Converted JSON content goes here ...
      }
    }
  ]
}

Paste your JSON content inside the data property.

Create a New Page

Now if you create a new page, you'll notice that the preset appears! Select the preset, fill out the appropriate fields, and you should see a page that looks exactly like the page you began with.

New Page without Thumbnail

Add Preset Thumbnail

Notice that the preset did not have a thumbnail in the new page dialog. To add one, first take a screenshot of your original page.

Page preset example

Then drop the image file into the .stackbit/presets/images directory. (Create the directory if it doesn't exist.) You can drag and drop files from your local system into the code editor's file explorer.

Then add a thumbnail property to the preset configuration (replace the filename as necessary):

{
  "model": "ModelName",
  "presets": [
    {
      "label": "My Preset Example",
      "thumbnail": "images/my-preset-screenshot.png",
      "data": {
        // ...
      }
    }
  ]
}

Try creating a new page again, and this time you should see the thumbnail!

New page with thumbnail