SBBy Dominik Angerer · 4 November 2026 · 2 min read

A fullscreen recipe browser for Storyblok, built from one sentence

When a picker needs room, open it fullscreen, and keep a compact card in the form

TL;DR A Storyblok field with a fullscreen browser, search and filters, and a compact card in the form. Copy the prompt and build it yourself.

Some choices are visual. Picking the "recipe of the week" from a list of names doesn't work. You want to see the dishes. This field opens a fullscreen browser with search and filters, and leaves a small card in the form once you've picked.

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 "recipe of the week" field for a food magazine using DummyJSON recipes (https://dummyjson.com/recipes). Inline it shows "No recipe selected yet." with a "Browse recipes" button, or, after a pick, a compact card with image, name, ID, a Change button and a remove (✕) button; it stores { "id", "name", "image" } (name and image are a snapshot), null when empty, and reads a bare id from an older version. Browse opens the fullscreen portal modal with a debounced search box, meal type, tag and difficulty filters, a Reset button and a result count; tiles show image, name, cuisine, difficulty and total time (prep + cook), the current pick is marked "Current selection", and a "Show more (N left)" button reveals the next page. The API takes only one filter per request, so send the search term (else the tag, else the meal type) to the server and apply the other filters, and difficulty, in the browser; load tags from /recipes/tags and hide the tag filter if that fails, and only offer difficulty values that exist in the data. Options: mealTypes (comma-separated, trimmed and de-duplicated, default Breakfast,Lunch,Dinner,Snack,Dessert,Appetizer,Side Dish,Beverage) and pageSize (default 12); the modal closes after a pick, on its Close button and on Escape, and has generous padding.

Already have the Claude Code plugin? Run:

Open in Claude CLI

/storyblok-field:storyblok-field "A DummyJSON recipe-of-the-week picker with a fullscreen browser, search, meal type, tag and difficulty filters, and a compact inline card"

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 food magazine features one recipe each week. The editor wants to browse: desserts, easy ones, something Italian for dinner. Storyblok lets a field plugin switch to fullscreen, so this field uses that for browsing with search and filters, then goes back to a compact card in the form. The frontend gets the id, name and image, which is enough for a teaser, and can load the full recipe by id when it needs ingredients and steps. The recipes come from DummyJSON, but the pattern fits any visual catalogue: case studies, events, videos.

What you get

Fullscreen recipe browser with search, meal type, tag and difficulty filters, and a grid of recipe tiles

Dessert plus Easy narrows the list to two recipes

After picking, a compact card with image, name, ID, Change and remove button

The stored value:

json

{
  "id": 1,
  "name": "Classic Margherita Pizza",
  "image": "https://cdn.dummyjson.com/recipe-images/1.webp"
}

Option	Default	What it does
`mealTypes`	`Breakfast,Lunch,Dinner,Snack,Dessert,Appetizer,Side Dish,Beverage`	Meal types offered in the filter.
`pageSize`	`12`	Recipes shown before "Show more".

Using it in the frontend

jsx

const recipe = blok.recipe_of_the_week // { id, name, image } | null

{recipe && (
  <a href={`/recipes/${recipe.id}`}>
    <img src={recipe.image} alt={recipe.name} />
    <h2>{recipe.name}</h2>
  </a>
)}

For ingredients and steps, fetch https://dummyjson.com/recipes/${recipe.id}.

What I learned building it

Real APIs are messy. DummyJSON accepts one filter per request, so the field sends the most selective one to the server and applies the rest in the browser. The data also mixes "Snack" and "Snacks" and has no "Hard" recipes. The guide now says to only offer filter values that exist. This field was generated before that rule, so its difficulty filter still offers "Hard".
The modal needs a way out. The agent that built this field pointed out that my guide said nothing about closing a modal with Escape. The field closes on Escape, and the rule is now in the guide: Close button, Escape, and close after a pick.
A CSS order bug no test would catch. I asked for more padding in the fullscreen view. The padding rule had been there all along, but the template loaded its shared ui.css after the field's own CSS, so .sb-field { padding: 2px } won at equal specificity. The fix here is a more specific selector, and the template now loads ui.css first, so every future field's CSS wins. A screenshot showed it right away.
Two close buttons. Storyblok's modal has its own "×", and the field adds a "Close" button. Both work. It's cosmetic, so I kept both.

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