skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-page-settings-extensions

Extends Webiny Website Builder page settings with custom tabs and field modifiers.

8.0k|673|Updated Jan 9, 2018
Search Tags:#website builder#typeScript#form builder#webiny#reAct#admin extension#page settings
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-page-settings-extensions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-page-settings-extensions
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/admin/website-builder/page-settings
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-page-settings-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers building on Webiny's Website Builder often need to add custom configuration options to the page settings drawer, such as publishing schedules, analytics flags, or access control fields, without forking core code. This Skill provides the exact patterns for adding new settings tabs or injecting fields into existing ones.

Core Features & Use Cases

  • New Settings Groups: Implement PageSettingsGroup.Interface to create a fully custom tab (e.g., Publishing, Analytics) with its own fields, layout, icon, and data mapping.
  • Group Modifiers: Implement PageSettingsGroupModifier.Interface to inject fields into built-in tabs like General, SEO, Social, or Schema, with precise layout positioning via .after("fieldName").
  • Safe Data Storage: Enforces the doc.extensions namespace for all custom data, preventing collisions with system-managed doc.properties.
  • Use Case: Add a Publishing tab with publish/unpublish datetime fields and a visibility dropdown, then register it via createFeature() and <Admin.Extension> in webiny.config.tsx.

Quick Start

Add a new Publishing tab to the Webiny page settings drawer with publish date, unpublish date, and visibility fields.

Frequently Asked Questions about webiny-page-settings-extensions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom tab to Webiny page settings?▼

Create a class implementing PageSettingsGroup.Interface with a name, label, buildForm, mapToForm, and mapFromForm. Register it inside a feature using createFeature() and mount it with <Admin.Extension src={"/extensions/myPageSettings/index.tsx"} /> in webiny.config.tsx.

How to add fields to the existing General or SEO tab in Webiny?▼

Implement PageSettingsGroupModifier.Interface with the target group name (general, seo, social, or schema). Use modifyForm to add fields and position them with layout.row("field").after("existingField"), referencing built-in field names like title, path, or snippet.

Where should custom page settings data be stored in Webiny?▼

Store all custom data under doc.extensions, namespaced by your group name (e.g., doc.extensions.publishing). Never write to doc.properties or doc.metadata, which are reserved for system-managed properties and can break with future updates.

Why does my Webiny admin extension fail to build?▼

A common cause is omitting the .tsx file extension in the src prop of Admin.Extension. Always use the full path like src={"/extensions/myPageSettings/index.tsx"}, not src={"/extensions/myPageSettings/index"}.

What field types are available for Webiny page settings forms?▼

The form builder supports fields like text, datetime, and boolean, with options, default values, and layout rows. For the full set of field types, renderers, validation, and conditional rules, refer to the webiny-form-model skill.

Related Skills

Explore More Software Engineering Skills→
fycd2006fycd2006

admin-developer

Build and wire admin features with React views, DI, and MobX.

Community
Advanced
tomtoto757tomtoto757
14

woocommerce-blocks

Customize WooCommerce checkout and cart with Gutenberg blocks and Store API persistence.

Community
Intermediate
kizzzkizzz

angular-forms

Develop Angular Signal Forms with type-safe models and validation.

Community
Advanced
Arupbiswas09Arupbiswas09

react-navigation

Provide React Navigation UI patterns for stack, tab, drawer, and form sheet navigation.

Community
Intermediate