Section

Sections are UI components built with Preact that can receive props configured by users on deco.cx’s Admin. The Section local implementations live on the sections/ folder in the Site’s code, but it’s also possible to Install Apps.

Some examples of Sections for an ecommerce store would be:

• ProductShelf.tsx: displays a product shelf with image, title and price.
• Header.tsx: displays the standard header of the store, containing logo, menu categories and links for cart and login.
• Banner.tsx: displays image, text and some Call to action for campaign or specific department.

Interactivity

Note that Sections run on the server-side only, so state and lifecycle such as useState , useEffect and callbacks such as onClick , onInput will not work. In order for those to work, you’ll need to use interactive Islands

In deco.cx’s Admin, it’s possible to interact with Sections in two places:

• Library: Allows developers to configure the properties of Sections and automatically see the generated UI. (Works similar to Storybook)
• Pages: Allows Section to be added to Page on the site, also being configurable.

Further reading

• Tutorial: Coding a new Section
• Developing: Editable sections