List

Data list

A list that repeats over a State array.

Markup

Drops in as data-pb-block="list".

html

<div data-pb-block="list" class="pb-list" x-data style="font-family:inherit;color:#0f172a;display:flex;flex-direction:column;gap:0.5rem;max-width:32rem;">
  <template x-for="item in $store.app.items" :key="item.id">
    <div class="pb-list__item" x-text="item.label" style="padding:0.75rem 1rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#fff;"></div>
  </template>
  <div class="pb-list__sample" x-show="false" style="padding:0.75rem 1rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#fff;">First item</div>
  <div class="pb-list__sample" x-show="false" style="padding:0.75rem 1rem;border:1px solid #e2e8f0;border-radius:0.5rem;background:#fff;">Second item</div>
</div>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="list" so it imports as a labelled, editable component.
Array source: Iterates a State array with x-for="item in $store.app.<key>"; bind each item with x-text="item.<field>".
Live updates: A Flow setState action updates the bound array and the list re-renders without a reload.