What is a Page Designer component type?

A component type is a reusable content block that merchandisers can drag into Page Designer pages. It defines the editor surface (attribute groups with typed inputs) and the render target (an ISML template or a Storefront Next React component). The component_type.json file is what Page Designer reads to build the editor UI.

What is the difference between component_type and page_type?

A page_type is a top-level page template (e.g. a homepage layout). A component_type is a reusable block placed inside a page or region. Most custom development involves component types. This tool generates component types only — set "Allowed in" to "page" if you want the component to also be usable as a page type.

Why does my component not appear in the Page Designer editor?

Common causes: (1) The component_type.json has a syntax error. (2) The component ID does not follow the namespace.name pattern. (3) The cartridge is not in the active code version. (4) An enum attribute has no value definitions — Page Designer silently hides components with invalid attribute definitions.

What is the ISML render skeleton?

The ISML skeleton is a starting-point template that reads each attribute from the pdict.content object and renders it. It uses for output and for nested regions. You will need to add your own HTML structure and styling around the generated skeleton.

How do I use this with Storefront Next?

Set the render target to "Storefront Next (React)". The generated JSON is the same — the difference is that instead of an ISML file, you register a React component in your extension's target-config.json using the component ID as the key.

Page Designer Component Type Generator

Build a Page Designer component_type with attributes, groups, and an ISML render skeleton. Targets ISML by default; React render hooks into Storefront Next.

Component id

namespace.name

Display name

Description

Allowed in

Render target

Attributes

Required
Required
Required

Component valid — files ready

{
    "name": "Image Tile",
    "description": "A tile with an image and a caption",
    "attribute_definition_groups": [
        {
            "id": "main",
            "name": "Main",
            "attribute_definitions": [
                {
                    "id": "image",
                    "name": "Image",
                    "type": "image",
                    "required": true
                },
                {
                    "id": "caption",
                    "name": "Caption",
                    "type": "string",
                    "required": false
                },
                {
                    "id": "align",
                    "name": "Alignment",
                    "type": "enum",
                    "required": false,
                    "values": [
                        {
                            "id": "left",
                            "name": "Left"
                        },
                        {
                            "id": "center",
                            "name": "Center"
                        },
                        {
                            "id": "right",
                            "name": "Right"
                        }
                    ]
                }
            ]
        }
    ],
    "region_definitions": [],
    "page_type": false,
    "component_type": true
}

About Page Designer Component Generator

Generate Page Designer component_type.json metadata with attribute groups, region constraints, and an ISML render skeleton. The builder validates the component ID format, checks for duplicate attribute IDs, and ensures enum attributes have value definitions — the silent failure modes that cause components to disappear from the Page Designer editor.

Pipeline

JSON Formatter — validate and prettify the generated component JSON.
Rich Text Editor — edit the generated ISML skeleton.

Frequently asked

What is a Page Designer component type?: A component type is a reusable content block that merchandisers can drag into Page Designer pages. It defines the editor surface (attribute groups with typed inputs) and the render target (an ISML template or a Storefront Next React component). The component_type.json file is what Page Designer reads to build the editor UI.
What is the difference between component_type and page_type?: A page_type is a top-level page template (e.g. a homepage layout). A component_type is a reusable block placed inside a page or region. Most custom development involves component types. This tool generates component types only — set "Allowed in" to "page" if you want the component to also be usable as a page type.
Why does my component not appear in the Page Designer editor?: Common causes: (1) The component_type.json has a syntax error. (2) The component ID does not follow the namespace.name pattern. (3) The cartridge is not in the active code version. (4) An enum attribute has no value definitions — Page Designer silently hides components with invalid attribute definitions.
What is the ISML render skeleton?: The ISML skeleton is a starting-point template that reads each attribute from the pdict.content object and renders it. It uses <isprint> for output and <isregion> for nested regions. You will need to add your own HTML structure and styling around the generated skeleton.
How do I use this with Storefront Next?: Set the render target to "Storefront Next (React)". The generated JSON is the same — the difference is that instead of an ISML file, you register a React component in your extension's target-config.json using the component ID as the key.