To be able to add components like images, component parts, or text to our page via the live edit drag and drop
interface, we need to create at least one region. Regions can be declared in the page descriptor.

<page-component><display-name>My first page</display-name><config/><regions><regionname="main"/></regions></page-component>

You will also need to handle regions in your controller.

// Get the current content. It holds the context of the current execution// session, including information about regions in the page.varcontent=execute('portal.getContent');// Include info about the region of the current content in the parameters// list for the rendering.varmainRegion=content.page.regions["main"];// Extend the model from previous examplevarmodel={name:"Michael",mainRegion:mainRegion};

To make live-edit understand that an element is a region, we need an attribute
called data-portal-component-type with the value region in our HTML.

<!DOCTYPE html><html><head></head><body><h1>My first page, with a view!</h1><h2>Hello <spandata-th-text="${name}">World</span></h2><divdata-portal-component-type="region"><divdata-th-each="component : ${mainRegion.components}"data-th-remove="tag"><divdata-portal-component="${component.path}"data-th-remove="tag"/></div></div></body></html>

We can now use the live edit drag and drop interface to drag components onto
our page.