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.

  <display-name>My first page</display-name>
  <config />
    <region name="main"/>

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.
var content = execute('portal.getContent');

// Include info about the region of the current content in the parameters
// list for the rendering.
var mainRegion =["main"];

// Extend the model from previous example
var model = {
    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>
    <h1>My first page, with a view!</h1>
    <h2>Hello <span data-th-text="${name}">World</span></h2>
    <div data-portal-component-type="region">
      <div data-th-each="component : ${mainRegion.components}" data-th-remove="tag">
        <div data-portal-component="${component.path}" data-th-remove="tag" />

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