Make a list addable

Editing the items of a list needs only anchors. Growing the list needs the schema to know what a new item looks like, so the Add form can ask for it. Two steps.

1. Anchor the list

stageArray on the element that holds the items, with the label the tab shows. Each item is a direct child of that element. Fields inside an item use their indexed path, props.items.2.title, so the editor can address one item.

<ul class="grid gap-8 md:grid-cols-3" {...stageArray("props.items", "Add feature")}>
  {items.map((item, i) => (
    <li class="rounded-panel border border-border p-6">
      <h3 class="text-lg text-foreground" {...stagePath(`props.items.${i}.title`)}>{item.title}</h3>
      <p class="mt-2 text-muted" {...stagePath(`props.items.${i}.body`)}>{item.body}</p>
    </li>
  ))}
</ul>

Items get their own generated ids when they are added, so reordering and removing address the item, not its position.

2. Describe the item

In lib/admin-schema.ts, under components, keyed by the component type and the list’s dotted path:

"feature-grid": {
  arrays: {
    "props.items": {
      kind: "modal",              // the Add form opens in a panel
      addLabel: "Add feature",    // the tab's label
      title: "New feature",       // the panel's title
      noun: "feature",            // "Remove feature", "Adding feature…"
      reorderable: true,          // drag handles on hover
      form: [
        { key: "title", label: "Title", type: "text", required: true },
        { key: "body",  label: "Body",  type: "textarea" },
        { key: "icon",  label: "Icon",  type: "media", videoKey: "iconVideo" },
      ],
    },
  },
},

form is only for adding. Once an item exists, its anchored fields are edited in place. A field with no anchor, such as a link target, stays in the form and is edited from the item’s cog.

What editors get

In Edit mode the section’s tab gains a +. Adding opens the form, then the item appears in place with no reload. Hover an item for its drag handle and its ×.

Variations

The list	Do
Shows one item at a time, a carousel or tabs	`reorderable: "strip"` so reorder happens in a thumbnail strip, and stamp `data-e-current` on the active item so the cog edits it. See the edit notch
Has DOM that depends on the count, dots or a counter	`insert: "reload"` so an add re-renders the component
Items are whole pages, projects or case studies	`kind: "page"` with a `starter`. Each add creates a child page and links to it
Items are blog posts	`kind: "article"`. The list is query-driven, there is nothing to store. See Blog

Start

Making content editable

Making content addable

Media

Next.js

Analytics SDK

Recipes

Platform reference

Make a list addable

1. Anchor the list

2. Describe the item

What editors get

Variations

Next steps

Page schemas

The edit notch

​1. Anchor the list

​2. Describe the item

​What editors get

​Variations

​Next steps

Page schemas

The edit notch

1. Anchor the list

2. Describe the item

What editors get

Variations

Next steps