For AI agents: the complete documentation index is available at llms.txt; this page is also available as Markdown at index.md.

• Documentation >
• Content management >
• Pages >
• React App page block

React App block

React App block allows an editor to embed a preconfigured React application into a page. It's configured in YAML files, under the ibexa_fieldtype_page key. Page block configuration isn't SiteAccess-aware.

React App Block configuration

React App blocks are regular Page blocks and can be configured on field definition level as any other block. Their configuration has exactly the same structure as regular block configuration, except:

• additional component attribute which binds Page Builder block with React App
• views attribute is removed

Each configured React app block has an identifier and the following settings:

Setting	Description
name	Name of the block used in the Page Builder interface. Also accepts a help key that adds a helper text under the Name field in the block configuration form.
category	Category in the Page Builder Page blocks toolbox that the block is shown in.
thumbnail	Thumbnail used in the Page Builder Page blocks toolbox.
component	Name of the React app component that this block is bound to.
visible	(Optional) Toggles the block's visibility in the Page Builder Page blocks toolbox. Remove the block from the layout before you publish another version of the page.
attributes	(Optional) List of block attributes.

For example:

ibexa_fieldtype_page:
    react_blocks:
        calculator:
            name: Calculator
            category: Demo
            thumbnail: /bundles/ibexaadminuiassets/vendors/ids-assets/dist/img/all-icons.svg#calendar
            component: Calculator
            attributes:
                a:
                    type: integer
                b: integer

Each entry below react_blocks adds one block to the Page Builder with the defined name, category and thumbnail. Both name and attributes support a short syntax and a long one for specifics.

Attributes defined without sub-keys use the key as the identifier and name, and the value as the type:

attributes:
  b: integer

Sub-keys can be used to specify any of the usual attributes configuration key:

attributes:
  a:
    name: Attribute A
    type: string
    options:
      ...

Copy as Markdown View as Markdown View on GitHub