Documentation

Page folder schema

Elevate, May 20-22-2025, Miami Beach, Florida

The page folder schema lets you add additional page folder settings.

When creating or updating a page folder, you can only configure the General settings, Data source, Display properties, and SEO options. To allow further configuration of page folders, you must extend the page folder schema and add the necessary fields.

Extend the page folder schema

To extend the page folder schema, follow these steps:

  1. From the Studio home page or from the left menu, go to Developer > Schemas.
  2. Click Page folder schema: the Page folder schema pane opens.
  3. Click Edit schema: the schema editor opens.
  4. Add the necessary schema fields. For more information about schema fields, see Schemas.
    Editing the Display properties and SEO schema fields will affect existing page folders and might cause issues with your website. Consult with your development team before editing the existing fields and always ensure backward compatibility with schema.
  5. Click Validate and Publish.
Now you'll see the new configuration fields when creating or updating a page folder.

Read page folder configuration in data sources

You can read the page folder configuration in a data source extension handler from the pageFolder.configuration property on the context parameter.
Read data source extension reading page folder configurationts
const seoDataSource = async (
  config: DataSourceConfiguration,
  context: DataSourceContext
) => {
  return {
    dataSourcePayload: {
      title: context.pageFolder.configuration.seoTitle,
      seoDescription: context.pageFolder.configuration.seoDescription,
      seoKeywords: context.pageFolder.configuration.seoKeywords,
    },
  };
};

Read page folder configuration in Frontend components

You can read the page folder configuration in a Frontend component from the configuration property on the pageFolder parameter.
Read page folder configuration in a Frontend componenttsx
function SEOComponent({ data, pageFolder }) {
  return (
    <div>
      <h1>{pageFolder.configuration.seoTitle}</h1>
      <p>{pageFolder.configuration.seoDescription}</p>
      <p>{pageFolder.configuration.seoKeywords}</p>
    </div>
  );
}