SBBy Dominik Angerer · 4 November 2026 · 2 min read

A multi-author picker for Storyblok, built from one sentence

Several authors per article, in the right order, with the main author first

TL;DR A Storyblok field to pick and reorder several authors, the first one being the main author. Copy the prompt and build it yourself in minutes.

A lot of articles have more than one author, and the order matters. This field lets editors search for people, add several, and move the main author to the top.

Try it yourself

Paste this into Claude Code or Cursor:

Open in Claude CLI

Fetch and follow the Storyblok field plugin instructions at https://raw.githubusercontent.com/DominikAngerer/storyblok-field-wizard/main/generator/PROMPT.md and build this field:
A multi-select author field for blog articles that searches DummyJSON users (https://dummyjson.com/users/search?q=…) and shows each result with avatar, full name and company job title. It stores an ordered array of { "id", "name", "image", "title" } (name is "First Last", image and title are "" when missing), [] when empty, with duplicate ids removed; the first entry is the main author and gets a "Main" chip, and a bare id or single object from an older version is read as a one-item list. Selected authors can be moved up and down with buttons and removed; results that are already selected are hidden from the search list. Option maxAuthors (default unlimited in code, 3 in the sandbox config; empty, 0 or invalid means unlimited) shows an "N of M authors" counter, and when the limit is reached the search query is cleared, the input is disabled and greyed out, and a visible hint says "Maximum number of authors reached. Remove one to add another."; if a stored value already has more authors than allowed, show a red warning and remove nothing. Names stay on one line with an ellipsis (full name in a tooltip) so the field still works in a very narrow panel.

Already have the Claude Code plugin? Run:

Open in Claude CLI

/storyblok-field:storyblok-field "A multi-select DummyJSON author picker with avatars, reorder buttons, the first author as main author, and an optional maxAuthors limit"

It takes about three minutes and needs Node 22+. You only need a Storyblok personal access token if you want to deploy.

What it's for

A byline looks simple until you have guest authors, co-authors and a rule that the lead writer comes first. With a plain text field, every editor types names a little differently, and the frontend can't link to profiles or show avatars. With this field, editors pick real people from a list, see their photo and job title, and set the order. The frontend gets a clean list: the first person is the main author, the rest are co-authors. The people come from DummyJSON's fake users; in a real project that would be your team directory or an author content type.

What you get

⊕Two authors. The first one gets the "Main" chip. Two authors selected, the first with a Main chip, each with avatar, name, job title and reorder buttons

Three of three authors: the search box is cleared, greyed out and shows a hint that the maximum is reached

Michael Williams moved to the top and now carries the Main chip

The stored value:

json

[
  { "id": 1, "name": "Emily Johnson", "image": "https://dummyjson.com/icon/emilys/128", "title": "Sales Manager" },
  { "id": 89, "name": "Brayden Fleming", "image": "https://dummyjson.com/icon/braydenf/128", "title": "Chief Technology Officer" }
]

Option	Default	What it does
`maxAuthors`	unlimited (sandbox: `3`)	Maximum number of authors. Empty, `0` or invalid means unlimited. Over the limit, the field warns but removes nothing.

Using it in the frontend

jsx

const [main, ...coAuthors] = blok.authors ?? []

{main && (
  <p className="byline">
    <img src={main.image} alt="" width={32} height={32} />
    By {main.name}
    {coAuthors.length > 0 && ` with ${coAuthors.map((a) => a.name).join(', ')}`}
  </p>
)}

What I learned building it

The value carries the meaning. "The first one is the main author" needs no extra flag. It's array order, which every frontend understands.
A limit needs a visible state, not just a placeholder. All 11 unit tests were green, but the browser walkthrough showed that at the limit the input was disabled with the old query still in it. The "Maximum reached" hint was the placeholder, so nobody saw it. Now the query is cleared, the input is greyed out, and the hint is real text linked with aria-describedby.
Very narrow fields break layouts. In a 228 px wide field, "Emily Johnson" wrapped one character at a time and the "Main" chip broke into "M / ai / n". The name now gets its own span with an ellipsis, and the chip doesn't shrink.
Never remove data on your own. If someone lowers maxAuthors while a story already has more authors, the field shows a warning and leaves the content alone. The browser test checks exactly that by changing the option live.

This field was generated by a fresh agent from one sentence and the guide, in about 2.3 minutes. The full story is in the article about the original experiment. The other fields: brand color picker, product picker, recipe picker, code editor.