Placeholder content

When you add a component from the page outline column, the new component displays in the preview column. If a field has not yet been given a value, the preview can omit it (for example, a heading).

Placeholder text signals to editors that they must replace placeholder copy with real content. This placeholder content can also include short instructions about what to enter.

This placeholder text is not the same as the field’s default value to avoid the placeholder copy appearing when the page is previewed on the live site. It appears only inside the Page Builder interface.

This advanced technique uses the editor attribute of the ctx object within your JavaScript file.

The editor flag indicates whether the render request comes from the Page Builder or the website front-end. Editors see placeholder copy during authoring; site visitors do not see placeholder copy that mirrors an unset default.

export default {
  async main({ name }, info) { (1)
    // component functions, context and other information
    const componentContext = info?.ctx || null; (2)

    // context value to determine if the component is being edited
    const squizEdit = componentContext?.editor || false; (3)

    if (squizEdit) { (4)
      name = name || 'Default name';
    }

    return `<div>
      <p>${name}</p>
    </div>`;
  }
}

Make sure you have access to the additional argument info for the main function.

Figure 1. main function with the info argument.
Access the ctx object from the info argument.

Figure 2. Reading ctx from info.

The ctx object contains information about the context in which the component is being rendered. This includes the page URL, the asset ID, and whether the component is being edited in the Page Builder.
Determine if the component is being rendered inside the Page Builder or not using the boolean editor property inside the context object.

Figure 3. editor distinguishes Page Builder from live-site renders.

Figure 4. Placeholder copy only when squizEdit is true in Page Builder.
If the component is being rendered in Page Builder (squizEdit === true), provide placeholder text (Default name, in this example) if the editor has not already entered their own value.

Help Center

Menu

Placeholder content