Binding to data

Any field can hold data instead of a typed-in value. The way in is the dot on the field’s top-left corner, which appears when you hover it.

The picker shows values, not paths

The picker lists what is in scope with each field’s current value beside it, read from the entry the canvas is rendering. getStaticPaths has already run in the dev server, so its props are Astro.props. You are choosing from real data, not from a schema.

References are followed through the data itself: an Astro content reference carries the collection and id it points at, so a post’s author expands into that author’s fields.

On a dynamic route, arrows in the picker step through the route’s entries. The canvas and the sample values move together, so you can check a layout against several posts rather than one.

Collections the page does not read yet

Everything in the site is reachable, not just what the page already queries. Picking from a collection the page has never touched writes the query that fetches it, reusing an existing query when there is one for that collection.

Those generated queries are marked. When the last field using one goes away, the query and its import go with it: only the ones Stacki wrote, only when nothing else in the file mentions the name, and only after a pause in typing.

Values are edited as parts

A bound value is shown as parts rather than as a blob of code:

• date={post.data.pubDate} is one chip.
• label={`Posted ${post.data.pubDate}`} is three parts (text, chip, text) and the text is editable around the chip.
• post.data.seo.title ?? post.data.title chips both operands and leaves the ?? as text.

Calls and arrows keep the code editor.

Loops use the same picker

The Data field of a loop is the same control, filtered to things that can be iterated.