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