Page Settings Extensions

Page Settings Extensions

TL;DR

Page settings extensions let you add new tabs to the page settings drawer or inject fields into existing tabs. Create a class implementing PageSettingsGroup.Interface for a new tab, or PageSettingsGroupModifier.Interface to extend an existing one. Register both via createFeature() and <RegisterFeature>. Always store custom data in doc.extensions — never write to doc.properties, which is reserved for built-in system properties.

YOU MUST include the full file path with the .tsx extension in every src prop. For example, use src={"/extensions/myPageSettings/index.tsx"}, NOT src={"/extensions/myPageSettings/index"}. Omitting the file extension will cause a build failure.

For field types, renderers, layout, validation, and all other form builder APIs, refer to the webiny-form-model skill.

Important: Where to Store Data

Use doc.extensions for all custom data. The doc.properties object holds built-in system properties (title, path, snippet, image, tags, seo, social). Writing custom fields into doc.properties risks naming collisions with future Webiny updates and can corrupt system behavior. Always namespace your data under doc.extensions.<yourGroupName>.

// CORRECT — custom data in doc.extensions
mapFromForm(formData, doc) {
    doc.extensions.mySettings = doc.extensions.mySettings ?? {};
    doc.extensions.mySettings.myField = formData.myField;
}

// WRONG — never write custom data into doc.properties
mapFromForm(formData, doc) {
    doc.properties.myField = formData.myField; // DON'T DO THIS
}

Adding a New Settings Group

A new settings group appears as its own tab in the page settings drawer. Implement PageSettingsGroup.Interface with these members: