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

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

By Dominik Angerer · 4 November 2026 · https://d12r.io/e/storyblok-author-picker-field-plugin/

**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:
>
> ```
> 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:
>
> ```
> /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.

> **Good to know: plugin names are global**
>
> Field plugin names in Storyblok are shared across all spaces, not per space. If the field doesn't render correctly in the preview, or the deploy fails with `DUPLICATED_NAME`, someone else probably has that name already. Give yours a different one, for example `@yourhandle/author-picker`. It happened to me with the [code editor field](https://d12r.io/e/storyblok-code-editor-field-plugin/).

## 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](https://dummyjson.com)'s fake users; in a real project that would be your team directory or an author content type.

> **Thanks to DummyJSON**
>
> The authors in this field come from [DummyJSON](https://dummyjson.com/), a free fake REST API with placeholder data for development, testing and prototyping, built by [Ovi](https://github.com/ovi). No sign-up and no API key, which made it easy to try field plugins against real-looking data.

## What you get

![Two authors selected, the first with a Main chip, each with avatar, name, job title and reorder buttons](https://a.storyblok.com/f/296339501219281/2144x2288/51411b843b/dummyjson-author-picker-04-added-second-5d716874.png)

*Two authors. The first one gets the "Main" chip.*

![Three of three authors: the search box is cleared, greyed out and shows a hint that the maximum is reached](https://a.storyblok.com/f/296339501219281/2144x2666/beae0e173b/dummyjson-author-picker-05-max-reached-9e9d34d9.png)

*At the limit, the search is cleared and disabled, with a visible hint. This state came out of a browser-test fix.*

![Michael Williams moved to the top and now carries the Main chip](https://a.storyblok.com/f/296339501219281/2144x2666/a9014ff7b7/dummyjson-author-picker-06-reordered-a383b024.png)

*Moving an author to the top makes them the main author.*

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](https://d12r.io/e/midnight-idea-generating-storyblok-field-plugins/). The other fields: [brand color picker](https://d12r.io/e/storyblok-brand-color-picker-field-plugin/), [product picker](https://d12r.io/e/storyblok-product-picker-field-plugin/), [recipe picker](https://d12r.io/e/storyblok-recipe-picker-fullscreen-field-plugin/), [code editor](https://d12r.io/e/storyblok-code-editor-field-plugin/).